fnDraw() has no effect

fnDraw() has no effect

edited December 2009 in General Posts: 16
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:
oTable = $('#people').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "bProcessing": false, "bServerSide": true, "sAjaxSource": "../include/php/people_table.php", "aaSorting": [[ 2, 'ASC' ]] });
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

Replies

  • 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
  • Posts: 22,642
    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
  • 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
  • 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
  • Posts: 22,642
    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
  • Lol. Thanks Allan. Sorry to take up your time with such trivial problems :)
  • edited October 2011 Posts: 2
    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 :
    $(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 } ); }, } ); }
    and the json string returned by json.php file :
    {"aaData":[[3,"test1",1],[2,"test2",1],[1,"test3,2]]}

    Thanks a lot.
    Jimmy

    ps : Sorry for my english wich is not good...
  • Posts: 22,642
    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
  • Posts: 2
    Yes, Thank you !

    I forgot to put "bServerSide": true, But now the colon sorting is not automatic... i must to make it with ajax request !
  • Posts: 22,642
    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
  • I seem to be having a similiar issue.
    table = $('#listing_table').dataTable({ "bProcessing": true, "bServiceSide": true, "sAjaxSource": "orders/filter_listing" }); $('#search_form').submit(function(e){ e.preventDefault(); alert('true'); table.fnDraw(); }); 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.
  • Nevermind. Of course, after I look at it on this screen, I notice I used "bServiceSide" instead of "bServerSide". Thanks!
  • Posts: 1
    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.
  • Posts: 22,642
    Are you using server-side processing? Does the XHR get fired (you will be able to see it in Firebug)?

    Allan
  • 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.
This discussion has been closed.