一页上有多个表的数据表

Question

我正在 datatables.net 网站上寻找一些说明或文档，而不是关于如果您在单个页面上有多个表并希望以不同方式处理每个表时该怎么做。

我尝试了显而易见的方法。将每个分配给不同的 id，然后在我的 js 中为每个执行代码，但由于某种原因它不允许这样做。我没有收到错误，但数据表本身会中断并且不执行任何操作。

$(document).ready(function() {

var oTable = $('#inbox').dataTable( {
    "bAutoWidth": false, 
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0, -1 ] },
        { "sWidth": "20px", "aTargets": [ 0, -1 ] },
        { "sWidth": "100px", "aTargets": [ 1 ] },
        { "sWidth": "150px", "aTargets": [ 3 ] }
    ]
} );

var oTable = $('#sent').dataTable( {
    "bAutoWidth": false, 
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0, -1 ] },
        { "sWidth": "20px", "aTargets": [ 0, -1 ] },
        { "sWidth": "100px", "aTargets": [ 1 ] },
        { "sWidth": "150px", "aTargets": [ 3 ] }
    ]
} );

});

更新

http://pastebin.com/4d3kPmk0

$(document).ready(function() {

var oTable = $('.dataTable').dataTable( {
    "bAutoWidth": false, 
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0, -1 ] },
        { "sWidth": "20px", "aTargets": [ 0, -1 ] },
        { "sWidth": "100px", "aTargets": [ 1 ] },
        { "sWidth": "150px", "aTargets": [ 3 ] }
    ]
} );

});

$(window).load(function(){
/*
 * Tabs
 */
$('#tab-panel-1').createTabs();
});

Answer 1

您正在重新声明同一个变量。

var oTable = $('#inbox').dataTable({ /* ... */ });

var oTable = $('#sent').dataTable({ /* ... */ });

其中的“oTable”部分正是 Allan（作者）在他的示例中为了符合他的惯例而碰巧使用的。小写的“o”指的是一个对象，它是一个表。但是你可以使用任何你想要的名字。

你有正确的想法，但你需要使用：

var inboxTable = $('#inbox').dataTable({ /* ... */ });

var sentTable = $('#sent').dataTable({ /* ... */  });

然后，如果您在网站上关注他的其他示例，您只需将您自己的变量名替换为“oTable”。

现场样本：http://live.datatables.net/amixis/edit#javascript,html

---

[更新]

我应该提一下，最近我将多个表存储在一个嵌套对象中；我有一个轮询机制，它迭代特定的表数组（而不是其他），所以示例对象看起来像这样：

var oTables = {
  "polling" : [
    $('#someTable').dataTable(opts),
    $('#anotherTable').dataTable(opts)
  ],
  "nonpolling" : [
    $('#staticTable').dataTable(opts)
  ]
};

最终结果还是一样。但是我现在可以在我的轮询表对象数组上调用 setTimeouts：

if(someBoolean) {
  for(var i=0; i < oTables.polling.length; i++) {
    setTimeout(pollingFunction, 5000)
  }
}

（高度简化）