我在使用另一页的第二个DataTables对象时遇到了问题。我已经成功地创建了一个DataTable,它位于我的Web应用程序中的一个页面上。它看起来很好,功能也正确。然而,我随后复制了完全相同的代码并将其粘贴到第二个页面上,尽管我的DataTable正确填充,但我得到了第二个分页和搜索控件的实例(如下所示)。我已经阅读了一些关于销毁表格的信息,因为可以检测到第二个实例,但我甚至尝试关闭我创建的第一个DataTable,但似乎没有关系。
我的DataTable是通过$(document).ready调用加载的,尽管我不确定这是否正确,因为我想在同一页上加载不同的DataTable,但在不同的选项卡控件中。
我的代码如下:
<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()
命令,但似乎没有起作用。
任何帮助将不胜感激。谢谢。