Question

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

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

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

（高度简化）

在一个页面上具有多个表的数据表

1 个答案: