显示重复的分页和搜索控件的数据表 [英] DataTables Showing Duplicate Pagination And Search Controls
问题描述
在另一个页面上使用第二个DataTables对象时遇到问题.我已经成功创建了一个DataTable,该数据表位于Web应用程序内的页面上.一切看起来都很好并且可以正常运行.但是,然后我复制了准确的代码并将其粘贴到第二页上,尽管我的DataTable正确填充,但我正在获得Pagination和Search控件的第二个实例(如下所示).我已经阅读了一些有关销毁表的信息,因为可以检测到第二个实例,但是我什至尝试关闭我创建的第一个DataTable,但这似乎并不重要.
I am having issues with using a second DataTables object on a different page. I have successfully created a DataTable that sits on a page within my Web App. It all looks fine and functions correctly. However, I then copied the exact code and pasted it onto a second page and although my DataTable populates correctly, I am getting a second instance of the Pagination and Search controls (as shown below). I have read some information on destroying the table as a second instance can be detected, but I have even tried turning off the first DataTable that I created and it doesn't seem to matter.
通过$(document).ready调用在两个页面上完成我的DataTable的加载,尽管我不确定这是否正确,因为我想在同一页面上但在不同的选项卡控件中加载各种DataTable.
Loading my DataTable is done through the $(document).ready call on both pages although I'm not sure if this is correct as I want to load various DataTables on the same page but within different tab controls.
我的代码如下:
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var siteTickets = $('#ticketsTable').DataTable( {
"bProcessing": true,
"bServerSide": false,
"bDestroy": true,
"ajax":{
url :"framework/get_tickets_by_site.php"
},
aoColumns: [
{ mData: 'id', sClass: "dt-body-center" },
{ mData: 'summary',
"render" : function(data, type, row, meta){
return $('<a>')
.attr('href', data)
.text(data)
.wrap('<div></div>')
.parent()
.html();
}
},
{ mData: 'c_location', sClass: "dt-body-center",
"render" : function(data, type, row, meta){
return $('<a>')
.attr('href', data)
.text(data)
.wrap('<div></div>')
.parent()
.html();
}
},
{ mData: 'priority', sClass: "dt-body-center" },
{ mData: 'first_name', sClass: "dt-body-center" },
{ mData: 'created_at' },
{ mData: 'due_at' },
{ mData: 'status', sClass: "dt-body-center" },
{ mData: 'last_updated' }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
switch( aData["priority"] ) {
case "1":
$("td:eq(3)", nRow).text( "High" );
break;
case "2":
$("td:eq(3)", nRow).text( "Medium" );
break;
case "3":
$("td:eq(3)", nRow).text( "Low" );
break;
default:
break;
}
return nRow;
},
"order": [[0, 'asc']],
"lengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]]
} );
} );
</script>
我也尝试过使用DataTables.Destroy()
命令,但似乎没有解决办法.
I have also tried using the DataTables.Destroy()
command but nothing seems to do the trick.
任何帮助将不胜感激.谢谢.
Any help would be appreciated. Thanks.
推荐答案
DataTable实例化中有一个小错误.实例化DataTables的正确方法是使用小写selector.dataTable
,如下所示:
There's a slight error in the DataTable instantiation. The correct way to instantiate DataTables is using the lowercase selector.dataTable
like this:
$('#ticketsTable').dataTable(...)
$('#ticketsTable').dataTable(...)
语法selector.DataTable()
用于DataTable API调用,例如:
The syntax selector.DataTable()
is used for DataTable API calls e.g:
$('#ticketsTable').DataTable().rows('.modified').invalidate().draw();
这篇关于显示重复的分页和搜索控件的数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!