CODEWITHSUNDEEP
jqueryajaxdatatablesreload
JimmyJammed
JimmyJammed

Reputation: 9698

JQuery DataTables - AJAX Reloading Not Working

I am using DataTables to display some data. When a new record is added (via AJAX), I am trying to reload the table on success. I get the error "oTable is not defined" whenever I try to call either oTable.fnDraw() or oTable.fnReloadAjax(). What am I doing wrong?

I have tried both fnDraw() and fnReloadAjax() and both return the same error.

$(document).ready(function(){
    var oTable = $('.admin_users').dataTable({
        "bProcessing": true,
        "sAjaxSource": 'sql/admin_users.php',       
        "aaSorting": [[ 0, "asc" ]],
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        // "sAjaxSource": 'SQL/dataTable.php',
        "bStateSave": true, //Use a cookie to save current display of items
        "aoColumns": [
            null,
            null,
            null,
            null,
            { "sType": "date", "sClass":"center" }
        ],
        "bScrollCollapse": true,
        "sScrollX": "100%"
        });
    oTable.fnAdjustColumnSizing();

Manual Re-Draw Button:

$('#click_me').click( function () {
    oTable.fnDraw();
    //oTables.fnReloadAjax();
});

Upvotes: 3

Views: 22511

Answers (6)

PakoAlanis
PakoAlanis

Reputation: 21

` This code works for me...

$(document).ready(function(){
    var oTable = $('#MyTab').dataTable({....});

    $('#btnRefresh').click( function () {
       oTable.fnDraw();
    } );
}`

Upvotes: 2

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

You can reload data table using ajax.reload method of datatable, Please try these.

$('#click_me').click( function () {
    oTable.ajax.reload();
});

Upvotes: 0

Vaimeo
Vaimeo

Reputation: 1128

if you just want to reload data to get latest record just call click event on key coumn

 - $("#tableToCallEvent").find('.sorting').eq(0).click();

you can change the value of eq(0) where 0 is the index of first column of tbody inside table

Simple and easy :)

Upvotes: -1

critic
critic

Reputation: 1

oTable is a local variable reference to the datatable that is not valid outside the document ready function.

Yes, you can.

var oTable;
$(document).ready(function() {

    oTable = $('.admin_users').dataTable({
    });
});

$('[name=insert]').live('click', function(){

    $DT.RowInsert(this);
    oTable.fnReloadAjax();
    return false;
});

Upvotes: 0

Greg Pettit
Greg Pettit

Reputation: 10830

Scope issues are always tricky. I'm not claiming to be an expert, but this way seems to work fairly consistently for me:

  1. Create a new object in the global scope.
  2. All other functions and variables specific to my application reside in this object. The technique is simply namespacing via an object
  3. Ensure sane ordering of scripts: first jQuery, then any other 3rd-party plugins, then application script(s); call the document ready function (if it is being used) only at the end of all that.

Example of creating a namespace with an object:

var myApp = myApp || {}; // create it if the variable isn't already being used

myApp.oTable = $('#admin_users').dataTable({ parameters });

myApp.someUtilityFunction = function(foo) { alert(foo) };

As an aside, you can see that I'm using an ID for my dataTable in the above example. A selector is a selector, so yours will work, but it's always going to be a unique table anyhow, so the ID selector is a bit more efficient. I'm also not 100% sure if dataTable() only operates on the first node returned by the selector or not (I hope so!), which is a potential issue.

With that in place, you could bind your click in the document ready without fear:

$(function() {
  $('#click_me').click( function () {
    myApp.oTable.fnReloadAjax(); // if script is available
  });
});

As an additional aside, if #click_me is ever in danger of being destroyed (for example, being inside the table that's being redrawn!) you would be better off using .delegate() (jQuery 1.6.x) or .on() (1.7 and beyond)

Upvotes: 1

Larry Lustig
Larry Lustig

Reputation: 50970

oTable is a local variable reference to the datatable that is not valid outside the document ready function.

Do this instead:

  $('#click_me').click( function () {
        $('.admin_users').dataTable().fnReloadAjax();
    } );

Upvotes: 4

Related Questions