jquery - jquery datatable 复杂表头重复问题

Question

我正在使用 jquery 数据表。

这是我的 JavaScript 代码。

$(document).ready(function() {
$('.withdraws').dataTable({
"sPaginationType": "bs_normal",
"aoColumns": [
  { "sTitle": "Transaction ID" },
  { "sTitle": "Receiver" },
  { "sTitle": "Receiver Phone" },
  { "sTitle": "Amount" },
  { "sTitle": "Service Fee" },
  { "sTitle": "Reference Text", "sClass": "center" },
  { "sTitle": "Date", "sClass": "center" }
    ]
}); 
$('.withdraws').each(function(){
var datatable = $(this);
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.attr('placeholder', 'Search');
search_input.addClass('form-control input-sm');
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
length_sel.addClass('form-control input-sm');
        datatable.bind('page', function(e){
            window.console && console.log('pagination event:', e)
        });
   });
});

但是我在使用 jquery 数据表时遇到了重复的标题问题。你能帮我解决这个问题吗？

标签： jquerydatatableduplicates

Answer 1

当绑定和解除绑定部分视图包含脚本文件时，我遇到了类似的问题。在 document.ready() 函数中创建数据表之前删除包含数据表的类。我希望下面的部分对你有所帮助。

$(document).ready(function() {

$('.withdraws').dataTable().destroy();  //Remove the datatable if exists and create it

$('.withdraws').dataTable({
 "sPaginationType": "bs_normal",
 "aoColumns": [
  { "sTitle": "Transaction ID" },
  { "sTitle": "Receiver" },
  { "sTitle": "Receiver Phone" },
  { "sTitle": "Amount" },
  { "sTitle": "Service Fee" },
  { "sTitle": "Reference Text", "sClass": "center" },
  { "sTitle": "Date", "sClass": "center" }
   ]
}); 
$('.withdraws').each(function(){
var datatable = $(this);
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.attr('placeholder', 'Search');
search_input.addClass('form-control input-sm');
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
length_sel.addClass('form-control input-sm');
    datatable.bind('page', function(e){
        window.console && console.log('pagination event:', e)
    });
  });
});