在一个页面上使用多个表的Datatables

Question

在一个页面上使用多个表的Datatables

5

我在datatables.net网站上寻找一些关于如何处理单个页面上有多个表格并且想要分别处理每个表格的澄清或文档。我尝试了显而易见的方法，将每个表格分配给不同的ID，然后在我的js中为每个表格执行代码，但由于某种原因它不允许这样做。我没有收到错误消息，但datatables本身会崩溃并且不执行任何操作。

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

});

UPDATE

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

- Jeff Davidson

请参见https://dev59.com/XXI-5IYBdhLWcg3wkJMA。 - The Nail

谢谢。我一定找遍了所有地方，但没找到好的东西。 - Jeff Davidson

由于某种原因，当我将dataTable类应用于两个表格并使用('.dataTable).dataTabl({ ...时，它仍然无法正常运行。 - Jeff Davidson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg Pettit · Accepted Answer

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

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

结果仍然是一样的。但是我现在可以在我的轮询表对象数组上调用setTimeout：

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

(highly simplified)