javascript 一页上有多个表的数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9625507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables with multiple tables on one page
提问by Jeff Davidson
I'm looking on the datatables.net website for some clarification or documentation rather about what to do if you have more than 1 table on a single page and want to handle each one differently.
我正在 datatables.net 网站上查找一些说明或文档，而不是关于如果您在一个页面上有 1 个以上的表并希望以不同方式处理每个表时该怎么做。
I tried the obvious. Assigning each to a different id and then performing the code for each in my js but for some reason its not allowing it. I'm not getting an error but datatables itself breaks and doesn't perform anything.
我尝试了显而易见的。将每个分配给不同的 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
更新
$(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();
});
回答by Greg Pettit
You are redeclaring the same variable.
您正在重新声明相同的变量。
var oTable = $('#inbox').dataTable({ /* ... */ });
var oTable = $('#sent').dataTable({ /* ... */ });
The "oTable" part of this is just what Allan (the author) happens to use in his examples to fit in with his conventions. The lowercase 'o' refers to something that's an object, and it's a table. But you can use whatever name you want.
其中的“oTable”部分正是艾伦（作者）在他的例子中碰巧使用的以符合他的惯例。小写的“o”指的是一个对象，它是一个表格。但是您可以使用任何您想要的名称。
You had the right idea, but you need to use:
您的想法是正确的，但您需要使用：
var inboxTable = $('#inbox').dataTable({ /* ... */ });
var sentTable = $('#sent').dataTable({ /* ... */ });
And then if you're following his other examples on the site, you just substitute your own variable name for "oTable".
然后，如果您在网站上关注他的其他示例，只需将您自己的变量名替换为“oTable”。
Live sample: http://live.datatables.net/amixis/edit#javascript,html
实时示例：http: //live.datatables.net/amixis/edit#javascript,html
[update]
[更新]
I should mention that recently I'm storing multiple tables in a nested object; I have a polling mechanism that iterates over particular arrays of tables (and not others), so the sample object looks something like this:
我应该提到最近我在一个嵌套对象中存储了多个表；我有一个轮询机制，可以遍历特定的表数组（而不是其他），因此示例对象看起来像这样：
var oTables = {
"polling" : [
$('#someTable').dataTable(opts),
$('#anotherTable').dataTable(opts)
],
"nonpolling" : [
$('#staticTable').dataTable(opts)
]
};
The net result is still the same. But I can now call setTimeouts over my array of polling table objects:
最终结果还是一样。但我现在可以在我的轮询表对象数组上调用 setTimeouts：
if(someBoolean) {
for(var i=0; i < oTables.polling.length; i++) {
setTimeout(pollingFunction, 5000)
}
}
(highly simplified)
（高度简化）
