fnDraw() has no effect

fnDraw() has no effect

kstoverkstover Posts: 16Questions: 0Answers: 0
edited December 2009 in General
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

  • kstoverkstover Posts: 16Questions: 0Answers: 0
    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
  • allanallan Posts: 23,524Questions: 0Answers: 692
    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
  • kstoverkstover Posts: 16Questions: 0Answers: 0
    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
  • kstoverkstover Posts: 16Questions: 0Answers: 0
    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
  • allanallan Posts: 23,524Questions: 0Answers: 692
    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
  • kstoverkstover Posts: 16Questions: 0Answers: 0
    Lol. Thanks Allan. Sorry to take up your time with such trivial problems :)
  • yep91yep91 Posts: 2Questions: 0Answers: 0
    edited October 2011
    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...
  • allanallan Posts: 23,524Questions: 0Answers: 692
    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
  • yep91yep91 Posts: 2Questions: 0Answers: 0
    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 !
  • allanallan Posts: 23,524Questions: 0Answers: 692
    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
  • darkhornetdarkhornet Posts: 4Questions: 0Answers: 0
    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.
  • darkhornetdarkhornet Posts: 4Questions: 0Answers: 0
    Nevermind. Of course, after I look at it on this screen, I notice I used "bServiceSide" instead of "bServerSide". Thanks!
  • vipinvipin Posts: 1Questions: 0Answers: 0
    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.
  • allanallan Posts: 23,524Questions: 0Answers: 692
    Are you using server-side processing? Does the XHR get fired (you will be able to see it in Firebug)?

    Allan
  • mferrodriguezmferrodriguez Posts: 1Questions: 0Answers: 0
    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.