如何将多个 jquery 数据表放在一页中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1790065/
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
how to put multiple jquery dataTables in one page?
提问by SUN Jiangong
I want to use jquery dataTables to show something.
我想使用 jquery dataTables 来显示一些东西。
It works well when i just put one dataTable in one page, then i add one more, but they occupied almost the same position, and one of them doesn't work well.
当我只将一个 dataTable 放在一页中时，它运行良好，然后我再添加一个，但它们占据几乎相同的位置，其中一个不能正常工作。
Do you know how to deal with that?
你知道如何处理吗？
采纳答案by Eimantas
回答by Hyman Ryan
It is possible with server side processing. I have it working in a number of locations in my application. You just need to follow the example code for the server side processing multiple times...
服务器端处理是可能的。我在我的应用程序中的多个位置都使用了它。您只需要多次遵循服务器端处理的示例代码...
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php"
} );
} );
replacing #examplewith #id-of-your-tableand "sAjaxSource": "../examples_support/server_processing.php"with "sAjaxSource": "url/to/your/server/side/script".
更换#example用#id-of-your-table和"sAjaxSource": "../examples_support/server_processing.php"用"sAjaxSource": "url/to/your/server/side/script"。
My guess is that you used the .dataTableselector from the multiple tables example. Which will apply the same setup to all tables with the dataTable class.
我的猜测是您使用.dataTable了多表示例中的选择器。这将对具有 dataTable 类的所有表应用相同的设置。
回答by Anagh
<table id="table1" class="display"> </table>
<table id="table2" class="display"> </table>
<table id="table3" class="display"> </table>
$(document).ready(function() {
$('table.display').dataTable();
} );
All three tables will be displayed as long as you give the right class
只要您给出正确的类，所有三个表都会显示
回答by TinkeringTurtle
I'm late to the party but here's the method I ended up using to solve the problem you describe...
我迟到了，但这是我最终用来解决你描述的问题的方法......
$('.testDataTable').each(function() {
var dataSource = $(this).attr("data-ajaxsource");
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": dataSource
});
});
You're essentially iterating through your DataTable instances and adding the source set by a data attribute. If you're not familiar with data attributes, they're simply tags applied to an element...
您实际上是在遍历您的 DataTable 实例并添加由数据属性设置的源。如果您不熟悉数据属性，它们只是应用于元素的标签......
<div id="testDataTable" data-ajaxsource="http://myserver.com/json"></div>
Alternatively, If you don't want to use the HTML5 data attributes, you could use a hidden field within the parent which could be read directly into the sAjaxSource...
或者，如果您不想使用 HTML5 数据属性，则可以使用父项中的隐藏字段，该字段可以直接读入 sAjaxSource ...
$('.testDataTable').each(function() {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $(this).children('childElement').html()
});
});
回答by Ben
If you have multiple datatables on the single page - check if you are using the following from the examples
如果您在单个页面上有多个数据表 - 请检查您是否使用示例中的以下内容
"fnServerData": fnDataTablesPipeline
this caches the data from the first call; if the second datatable uses the same function it will see that data has already been fetched and not make the ajax call to retrieve its data. and so you will not receive data to your second(nth) datatable.
这会缓存第一次调用的数据；如果第二个数据表使用相同的函数，它将看到数据已经被获取，而不是通过 ajax 调用来检索其数据。所以你不会收到数据到你的第二个（第n个）数据表。
回答by Mwangi Thiga
Still working on it... but this could be helpful
仍在努力……但这可能会有所帮助
<div class="col-md-12">
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li>
<li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li>
<li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li>
<li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li>
<li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li>
<li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li>
<li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<b>Web Deign and development hires:</b>
<table class="table" id="webdesignTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_2">
<b>Domain Registration</b>
<table class="table" id="domainregistrationTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_3">
<b>Cloud Computing</b>
<table class="table" id="cloudcomputingTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_4">
<b>Android application Development</b>
<table class="table" id="androidappTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_5">
<b>Web Hosting</b>
<table class="table" id="webhostingTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_6">
<b>SEO and Online Marketing</b>
<table class="table" id="seoTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<!-- nav-tabs-custom -->
</div>
The script
剧本
// global the manage tables
var manageMemberTable;
//var tbl1 = $('#webdesignTable').DataTable( );
$(document).ready(function() {
$('table.display').dataTable(); //focus here
manageMemberTable = $("#webdesignTable").DataTable({
"ajax": "webdesign_action/retrieve.php", //get data for your tables
"order": []
});
domainregistrationTable = $("#domainregistrationTable").DataTable({
"ajax": "domainregistration_action/retrieve.php", //get data for your tables
"order": []
});
//It continues
回答by Omid Ahmadyani
select selector by class i have two or more table and i want init all off theme with one config you can set for all table a class such as:
按类选择选择器我有两个或多个表，我想用一个配置初始化所有主题，您可以为所有表设置一个类，例如：
<table class="mytable">
<table class="mytable">
...
...
...
and init theme such as:
和 init 主题，例如：
$('.mytable').DataTable({
order: [[0, "desc"]],
language: {
"lengthMenu": "????? _MENU_ ???? ?? ?? ????",
"zeroRecords": "??????? ??? ?????? ????? ?? ??????? ??????? ??? ???? ???",
"info": "????? ???? _PAGE_ ?? _PAGES_ ?? _TOTAL_ ?????",
"infoEmpty": "??? ???????? ???? ???",
"infoFiltered": "(????? ??? ?? _MAX_ ?????)",
"search": "?????:",
"paginate": {
"first": "????",
"last": "?????",
"next": "????",
"previous": "????"
},
},
})
回答by L.lg
HTML such as:
HTML 如：
<table id="Table01" class="table"></table>
<table id="Table02" class="table"></table>
<table id="Table03" class="table"></table>
<table id="Table04" class="table"></table>
script such as:
脚本如：
table01 = $("#Table01").DataTable({/* to do somthing... */});
table02 = $("#Table02").DataTable({/* to do somthing... */});
table03 = $("#Table03").DataTable({/* to do somthing... */});
table04 = $("#Table04").DataTable({/* to do somthing... */});
回答by Virendra Yadav
This answered is inspired from(@TinkeringTurtle) one of the answers in this thread.
这个答案的灵感来自（@TinkeringTurtle）这个线程中的一个答案。
let dt_columns = ["columns for table1", "columns for table2", "etc"];
let tables = [];
$('.table').each(function(i, el) {
var dataSource = $(this).attr("data-ajaxsource");
var columns = dt_columns[i];
tables[i] = $(this).DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": dataSource,
"type": "POST",
"data":{
"month": function(){return $("#select_month").val()},
"year": function(){return $("#select_year").val()},
}
},
"columns": columns
});
});
/* reload datatable */
$("#select_month, #select_year").change(function(){
console.log(tables);
tables.forEach(function(el, i){
el.ajax.reload();
});
});
