我想使用jQuery dataTables来展示一些内容。
当我在一个页面上只放置一个dataTable时,它运行良好。但当我增加了另一个dataTable时,它们几乎占据了相同的位置,并且其中一个不能正常工作。
你知道如何处理这个问题吗?
我想使用jQuery dataTables来展示一些内容。
当我在一个页面上只放置一个dataTable时,它运行良好。但当我增加了另一个dataTable时,它们几乎占据了相同的位置,并且其中一个不能正常工作。
你知道如何处理这个问题吗?
<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 -->
使用服务器端处理是可能的。我在我的应用程序中的许多位置都已经使其工作。您只需要多次遵循服务器端处理的示例代码即可...
$(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类的表格。虽然我来晚了,但这是我最终采用的方法来解决你所描述的问题...
$('.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()
});
});
"fnServerData": fnDataTablesPipeline
这将缓存第一次调用的数据;如果第二个数据表使用相同的函数,它将看到数据已经被获取并且不会进行Ajax调用以检索其数据。因此,您将无法收到第二个(第n个)数据表的数据。
按类选择器选择 我有两个或更多的表格,我希望可以用一个配置文件来初始化它们 你可以为所有表格设置一个类,例如:
<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": "قبلی"
},
},
})
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();
});
});
new $.fn.dataTable.Api("#tableSelector")
来管理/获取每个dataTable实例会更好,而不是使用数组来存储它们。 - Hicham O-Sfh仍在努力中...但这可能会有所帮助
<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
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... */});