fnDraw() has no effect

kstover

Hello everyone,

The problem that I'm having is that fnDraw() doesn't do anything. Moreover, when I put a simple alert() after the fnDraw(), the alert never fires. Here's a copy of my initialization script:
[code]oTable = $('#people').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "../include/php/people_table.php",

"aaSorting": [[ 2, 'ASC' ]]

});[/code]

No matter how I call the fnDraw() function, nothing happens. Any ideas?

Thank you very much for taking the time to read this post.

Kevin

kstover

I should also note that my datatable does not sort properly on any of the columns. Not sure that is a related issue, but I suppose it could be. Thanks again.

Kevin

allan

Hi Kevin,

1. fnDraw() with no effect - if an alert isn't even showing up after a call to fnDraw(), then there is one of two things like to be happening: a. there is a Javascript or JSON error somewhere which is breaking the execution, or b. it's not actually being called. To check you could put an alert() before the fnDraw() call, and see if that works. Also worth checking your JSON return with jsonlint.com, and looking for any JS errors.

2. Sorting not working - since you are using server-side processing, the sorting is done on the server-side. If the data is unsorted, then that would suggest an issue with your server-side script. Perhaps dump the SQL query and make sure it is what you expect.

Regards,
Allan

kstover

Allan,

Thanks for your response! I'll be at home a little bit later tonight and I'll check it out. I know that the fnDraw is being called, there's an error there somewhere. When I get home from work I'll investigate it further and let you know what I come up with. Thanks again,

Kevin

kstover

I just ran a quick check with FireFox's Error Console and this is the error that fires when I call fnDraw():

oSort['string-ASC'] is not a function
jquery.dataTables.min.js Line 358

allan

Hi Kevin,

Ah - got it. Thanks for the debug trace. The issue is just that you have 'ASC' in the aaSorting initialiser rather than 'asc' :-). The associative arrays in Javascript are case sensitive, so if you just change the case it should work fine.

Regards,
Allan

kstover

Lol. Thanks Allan. Sorry to take up your time with such trivial problems :)

yep91

Hi,
I am sorry to revival this subject but i have the same problem.
My fnDraw() has not effect however i haven't error and my json tring is correct.

Here is my code :
[code]$(document).ready( function () {
$("#tab li").live('click', function (){
(...)
$.ajax({
"async": true,
"data": "&myTabulation="+$(".selectedTab a").html(),
"type": "POST",
"url": "json.php",
"success": function(data){
oTable.fnDraw();
}
}
}


var oTable = $('table.display').dataTable( {
"bFilter": false,
"bAutoWidth": false,
"bPaginate": false,
"bJQueryUI": true,
"bProcessing": true,
//"bServerSide": true,
"sAjaxSource": 'json.php',
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "myTabulation", "value": $(".selectedTab a").html() } );

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
} );
}[/code]

and the json string returned by json.php file :
[code]{"aaData":[[3,"test1",1],[2,"test2",1],[1,"test3,2]]}[/code]


Thanks a lot.
Jimmy

ps : Sorry for my english wich is not good...

allan

You are not using server-side processing in the above code, so fnDraw will not make another Ajax request to the server. If you do what to do that, have a look at the fnReloadAjax plug-in.

Allan

yep91

Yes, Thank you !

I forgot to put [code]"bServerSide": true,[/code]
But now the colon sorting is not automatic... i must to make it with ajax request !

allan

Yup - if you are using server-side processing then the server must to all filtering, sorting and paging. DataTables will tell the server what it needs - but the server has to do the hard work. There is a gallery of server-side scripts here if you want some ideas for your particular platform: http://datatables.net/development/server-side/

Allan

darkhornet

I seem to be having a similiar issue.
[code]
table = $('#listing_table').dataTable({
"bProcessing": true,
"bServiceSide": true,
"sAjaxSource": "orders/filter_listing"
});

$('#search_form').submit(function(e){
e.preventDefault();
alert('true');
table.fnDraw();
});
[/code]
With the above code, I'm not getting another call to the ajax source. My understanding from the above thread is that this should be causing another call to the server, but doesn't appear to be. Am I missing something obvious?

Thanks.

darkhornet

Nevermind. Of course, after I look at it on this screen, I notice I used "bServiceSide" instead of "bServerSide". Thanks!

vipin

HI Allan,

I am facing same issue, I have to fill datatable on change of dropdown list for that I am doing server process and getting data from there, after that I have to use fnDraw() to display the data and its working good in chrome and IE but in Firefox its not working. I need to refresh page manually to get data on grid.

Could you suggest any solution? any help would be highly appreciated.

allan

Are you using server-side processing? Does the XHR get fired (you will be able to see it in Firebug)?

Allan

mferrodriguez

I know this may sound like a "brute" solution but, the way I solved it was to put all the code to build the table in a function, and then calling such function whenever the "change" or "click" events triggered from within the table in specific columns. Hope it may help somehow.