在一個頁面上有多個表格的數據表

我在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

在一個頁面上有多個表格的數據表

回答

相關問題