JQuery DataTables - AJAX 重新加载不起作用

Question

我正在使用DataTables来展示一些数据。当通过AJAX添加新记录时，我试图在成功后重新加载表格。每当我尝试调用oTable.fnDraw()或oTable.fnReloadAjax()时，都会出现“oTable未定义”的错误。我做错了什么？

我已经尝试过fnDraw()和fnReloadAjax()，但两者都返回相同的错误。

$(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();

手动重绘按钮：

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

- JimmyJammed

Answer 1

oTable是对数据表的本地变量引用，其在文档就绪函数之外无效。

请改为这样操作：

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

- Larry Lustig

---

你确定在click()函数中的dataTable()调用中没有传递任何参数吗？这似乎是错误消息的要点。无论如何，我使用相同的技术没有问题 - 我对表格的初始化略有不同（paginate、processing和state_save都为false）。 - Larry Lustig

嗯，你可以尝试按照提示所述指定 { bRetrieve: True }。 - Larry Lustig

好的，我解决了。 我只是从整个脚本中删除了document.ready，现在一切正常工作。 - JimmyJammed

很高兴它能够工作；个人认为我会用不同的方式解决作用域问题；例如使用对象字面量进行命名空间。 - Greg Pettit

$('#click_me').click( function () { $('.admin_users').dataTable().fnDestroy(); $('.admin_users').dataTable().fnReloadAjax(); } ); - Mahesh Gaikwad

Answer 2

这段代码对我来说是有效的...

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

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

- PakoAlanis

Answer 3

作用域问题总是很棘手。我不敢说自己是专家，但这种方式似乎对我来说相当一致：

1. 在全局范围内创建一个新对象。
2. 所有其他特定于我的应用程序的函数和变量都驻留在此对象中。该技术只是通过对象进行命名空间管理。
3. 确保脚本的合理顺序：首先是jQuery，然后是任何其他第三方插件，最后是应用程序脚本；仅在所有这些操作结束后调用文档就绪函数（如果正在使用）。

创建带有对象的命名空间示例：

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) };

顺便提一下，在上面的例子中，您可以看到我正在使用一个ID来命名我的dataTable。选择器就是选择器，所以你的也能用，但总归它是一个独特的表格，所以ID选择器更有效率一些。我也不确定 dataTable() 是否只在选择器返回的第一个节点上操作（希望如此！），这是一个潜在的问题。

有了这个设置，您可以在文档准备就绪时放心地绑定您的点击事件：

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

作为另一个附言，如果 #click_me 有被销毁的危险（例如，它在被重绘的表格内），您最好使用 .delegate()（jQuery 1.6.x）或 .on()（1.7及以上版本）。

- Greg Pettit

Answer 4

您可以使用datatable的ajax.reload方法重新加载数据表，请尝试以下操作。

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

- Harsh Sanghani

Answer 5

oTable是一个本地变量引用datatable，它在文档准备函数之外无效。

可以的。

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

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

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

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

- critic

Answer 6

如果您只想重新加载数据以获取最新记录，只需在关键列上调用单击事件即可。

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

你可以更改eq(0)的值，其中0是表格内tbody的第一列的索引。

简单易懂 :)

- Vaimeo