DataTables and FancyBox?

robbiesmith79

My application of DataTables is an order history (Customer Name, Date of Purchase, Invoice, Amount, etc.) and its' all working perfectly! Thanks Allen!

However, One of the columns is a hyper link "View" That's supposed to invoke a fancy box in an iframe for a quick order view. I have implement the exact same code in another website, but somehow this is different. The only difference between the sites is that this one uses DataTables, the other doesn't.

Is there a way to apply the Fancybox over the result set of DataTables?

This isn't working:

[code]







$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[ 3, "desc" ]],
"sPaginationType": 'full_numbers',
"sAjaxSource": "../examples_support/server_processing_ordering.php",
"iDisplayLength": 100,
"aoColumns": [
{ "sName": "view", "bSortable": false },
{ "sName": "name" },
{ "sName": "type" },
{ "sName": "date_of_purchase"},
{ "sName": "invoice" , "sType": "numeric" },
{ "sName": "amount", "sType": "numeric" },
{ "sName": "email", "bSortable": false },
{ "sName": "customer", "bSortable": false },
{ "sName": "staff", "bSortable": false }
]
} );
});

$(document).ready(function() {
$(".orderhistory").fancybox({
'width' : '80%',
'height' : '60%',
'autoScale' : false,
'type' : 'iframe'
});
});


[/code]

Then in server_processing_ordering.php:
[code]
$sOutput .= '"View",';
[/code]

allan

Please see the FAQ here in red: http://datatables.net/faqs#ss_events . Easiest way is to stick your fancybox initialisation in fnDrawCallback.

Allan

smsorensen

Allan can you post an example of sticking the fancybox init in the fnDrawCallBack. What are the not so easy solutions?

allan

modifying your code above:

[code]

$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[ 3, "desc" ]],
"sPaginationType": 'full_numbers',
"sAjaxSource": "../examples_support/server_processing_ordering.php",
"iDisplayLength": 100,
"aoColumns": [
{ "sName": "view", "bSortable": false },
{ "sName": "name" },
{ "sName": "type" },
{ "sName": "date_of_purchase"},
{ "sName": "invoice" , "sType": "numeric" },
{ "sName": "amount", "sType": "numeric" },
{ "sName": "email", "bSortable": false },
{ "sName": "customer", "bSortable": false },
{ "sName": "staff", "bSortable": false }
],
"fnDrawCallback": function () {
$(".orderhistory").fancybox({
'width' : '80%',
'height' : '60%',
'autoScale' : false,
'type' : 'iframe'
});
}
} );
});

[/code]
The not so easy option is to alter Fancybox to use live events. more efficient, and probably not all that hard to do - you just need to alter the Fancybox source.

Allan

robbiesmith79

Brilliant! That worked Allen. Might want to update your line of code on line 21 from "fnDrawCallback: function () { to "fnDrawCallback": function () {

allan

Good shout - now done :-)

Allan

robbiesmith79

Allan, send me an email from your business/personal account to robbiesmith79 at gmail dot com and I'll reply back with the finished version using fancy box.

Thanks. As soon as I get some money from this project, I'll send back a $20. Thanks again for making this a success!

fbas

[quote]allan said: modifying your code above:[/quote]

THANK YOU for this code. I was having the hardest time with Fancybox and .live() for links in my cells - in short, it doesn't work well, not more than once, anyway, then I get strange errors.

the fnDrawCallback method works perfectly.