我想使用jquery dataTables来展示一些东西。
当我只将一个dataTable放在一个页面中时，它可以正常工作，然后我再添加一个，但它们占据了几乎相同的位置，其中一个不能很好地工作。
你知道怎么处理吗？
答案 0 :(得分：15)
答案 1 :(得分：7)
可以通过服务器端处理。我在我的应用程序中的许多位置工作。您只需要多次遵循服务器端处理的示例代码......
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php"
} );
} );
将#example替换为#id-of-your-table，将"sAjaxSource": "../examples_support/server_processing.php"替换为"sAjaxSource": "url/to/your/server/side/script"。
我的猜测是您使用了多个表示例中的.dataTable选择器。这将使用dataTable类对所有表应用相同的设置。
答案 2 :(得分：4)
我迟到了，但这是我最终用来解决你描述的问题的方法......
$('.testDataTable').each(function() {
var dataSource = $(this).attr("data-ajaxsource");
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": dataSource
});
});
您实际上是在遍历DataTable实例并通过数据属性添加源集。如果您不熟悉数据属性，那么它们只是应用于元素的标签......
<div id="testDataTable" data-ajaxsource="http://myserver.com/json"></div>
或者，如果您不想使用HTML5数据属性，可以在父级中使用隐藏字段，该字段可以直接读入sAjaxSource ...
$('.testDataTable').each(function() {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $(this).children('childElement').html()
});
});
答案 3 :(得分：4)
<table id="table1" class="display"> </table>
<table id="table2" class="display"> </table>
<table id="table3" class="display"> </table>
$(document).ready(function() {
$('table.display').dataTable();
} );
只要您提供正确的课程
，就会显示所有三个表格答案 4 :(得分：2)
如果单页上有多个数据表 - 请检查您是否使用了示例中的以下内容
"fnServerData": fnDataTablesPipeline
这会缓存第一次调用的数据;如果第二个数据表使用相同的函数，它将看到数据已被提取，并且不进行ajax调用以检索其数据。所以你不会收到第二个（第n个）数据表的数据。
答案 5 :(得分：0)
仍在努力......但这可能会有所帮助
<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>
脚本
// 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
答案 6 :(得分：0)
按类别选择选择器 我有两个或多个表，我想用一个配置初始化所有主题 您可以为所有表格设置一个类，例如：
<table class="mytable">
<table class="mytable">
...
...
...
和初始化主题，例如：
$('.mytable').DataTable({
order: [[0, "desc"]],
language: {
"lengthMenu": "نمایش _MENU_ ردیف در هر صفحه",
"zeroRecords": "متاسفیم هیچ کاربری مطابق با اطلاعات درخواست شده یافت نشد",
"info": "نمایش برگه _PAGE_ از _PAGES_ از _TOTAL_ کاربر",
"infoEmpty": "هیچ اطلاعاتی یافت نشد",
"infoFiltered": "(فیلتر شده از _MAX_ کاربر)",
"search": "جستجو:",
"paginate": {
"first": "نخست",
"last": "آخرین",
"next": "بعدی",
"previous": "قبلی"
},
},
})
答案 7 :(得分：0)
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>
脚本，例如：
table01 = $("#Table01").DataTable({/* to do somthing... */});
table02 = $("#Table02").DataTable({/* to do somthing... */});
table03 = $("#Table03").DataTable({/* to do somthing... */});
table04 = $("#Table04").DataTable({/* to do somthing... */});
答案 8 :(得分：0)
此答案的灵感来自（@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();
});
});