3

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();
});
Improve this question

6 Answers 6

Reset to default
4

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();
    } );
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Got this error: DataTables warning: Cannot reinitialise DataTable. To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).
Are you sure you're not passing any parameters in the dataTable() call in the click() function? That seems to be the gist of the error message. In any event, I use this same technique without trouble — my initialization of the table is somewhat different (paginate, processing, and state_save are all false), however.
yeah i copied your code exactly. Tried placing it in both the $(document).ready block as well as outside that block. No luck.
Well, you can try specifying { bRetrieve: True } as the message suggests.
Also, I assume you've linked the script with fnReloadAjax in it. It's not part of the base implementation of dataTables.
|
2

` This code works for me...

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

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

Comments

1

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)

Improve this answer

Comments

0

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;
});
Improve this answer

Comments

0

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

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

Comments

-1

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 :)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.