我想使用jQuery dataTables来展示一些内容。
当我在一个页面上只放置一个dataTable时，它运行良好。但当我增加了另一个dataTable时，它们几乎占据了相同的位置，并且其中一个不能正常工作。
你知道如何处理这个问题吗？
8个回答
12
<table id="table1" class="display"> </table>
<table id="table2" class="display"> </table>
<table id="table3" class="display"> </table>
$(document).ready(function() {
$('table.display').DataTable();
} );
只要您正确使用类名称，三个表格都会显示出来。
<-- 您写的是dataTable而不是DataTable -->
- Anagh
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类的表格。- Jack Ryan
5
虽然我来晚了，但这是我最终采用的方法来解决你所描述的问题...
$('.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()
});
});
- TinkeringTurtle
1
我喜欢你的想法并尝试了一下，发现在没有 "bProcessing": true, "bServerSide": true 的情况下效果更好。 - Ad Kahn
2
如果您在单个页面上有多个数据表 - 请检查是否使用了以下示例中的内容。
"fnServerData": fnDataTablesPipeline
这将缓存第一次调用的数据；如果第二个数据表使用相同的函数，它将看到数据已经被获取并且不会进行Ajax调用以检索其数据。因此，您将无法收到第二个（第n个）数据表的数据。
- Ben
2
按类选择器选择 我有两个或更多的表格，我希望可以用一个配置文件来初始化它们 你可以为所有表格设置一个类，例如：
<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": "قبلی"
},
},
})
- Omid Ahmadyani
2
这个回答的灵感来自于(@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();
});
});
- Virendra Yadav
3
在数组中管理数据表格，就像您所做的那样：let tables = []...对我来说不起作用。 - Hicham O-Sfh
我总是获取到数组tables[]中最后一个dataTable实例..不过我认为使用
new $.fn.dataTable.Api("#tableSelector")来管理/获取每个dataTable实例会更好，而不是使用数组来存储它们。 - Hicham O-Sfh这帮了我大忙，你不知道。非常感谢你。 - Alejandro Maliachi Quintana
1
仍在努力中...但这可能会有所帮助
<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
- Mwangi Thiga
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... */});
- L.lg
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接