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

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

});

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

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

(高度简化)