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

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

});

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

来源

2012-03-08 Jeff Davidson

也见http://stackoverflow.com/questions/1790065/how-to-put-multiple- jquery-datatables-in-one page – 2012-03-08 21:50:35

谢谢。我一定看过每个人，找不到好的东西。 – 2012-03-08 21:51:20

由于某种原因，当我将一类dataTable应用于两个表，并改为使用（'.dataTable）.dataTabl（{...它仍然无法正常运行。 – 2012-03-08 21:56:09

你重新声明相同的变量。

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

最终的结果还是一样。但我现在可以调用一个定时器，在我的阵列轮询表对象：

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

（高度简化）

来源

2012-03-09 02:40:56

我遇到了其他问题，可以通过确认对于不同的表，oaColumn变量的命名是不同的。 – Private 2015-09-24 13:34:16

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

回答

相关问题