单击按钮时，我需要初始化一个数据表并加载数据。它可以工作，但是会在过滤器列下创建重复的标题。我试图破坏数据表，但仍然没有运气。希望有人能提供帮助。
我尝试检查数据表是否存在，然后使用以下命令销毁DT：还添加了destroy:true;
var table = $('#kt_table_1').DataTable().clear().destroy();
$('#kt_table_1 tbody').empty();
$('#kt_table_1 thead th').empty();
$("thead", table).remove();
$("thead .filter", table).empty();
var KTDatatablesSearchOptionsColumnSearch = function() {
$.fn.dataTable.Api.register('column().title()', function() {
return $(this.header()).text().trim();
});
var initTable1 = function() {
if ($.fn.dataTable.isDataTable('#kt_table_1')) {
console.log("yes exists");
}
// begin first table
var table = $('#kt_table_1').DataTable({
responsive: true,
select: {
style: 'multi',
selector: 'td:first-child .kt-checkable',
},
headerCallback: function(thead, data, start, end, display) {
thead.getElementsByTagName('th')[0].innerHTML = `
<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand">
<input type="checkbox" value="" class="kt-group-checkable">
<span></span>
</label>`;
},
buttons: [
'print',
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5',
],
// Pagination settings
dom: `<'row'<'col-sm-12'tr>>
<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
// read more: https://datatables.net/examples/basic_init/dom.html
lengthMenu: [5, 10, 25, 50],
pageLength: 10,
language: {
'lengthMenu': 'Display _MENU_',
},
searchDelay: 500,
processing: true,
serverSide: true,
destroy: true,
ajax: {
url: './demo2/contents/encargos/server.php',
type: 'POST',
data: {
// parameters for custom backend script demo
columnsDef: [
'RecordID', 'OrderID', 'Country', 'ShipCity', 'CompanyAgent', 'ShipDate', 'Status', 'Type', 'Actions', 'url'
],
},
},
columns: [{
data: 'RecordID'
},
{
data: 'OrderID'
},
{
data: 'Country'
},
{
data: 'ShipCity'
},
{
data: 'CompanyAgent'
},
{
data: 'ShipDate'
},
{
data: 'Status'
},
{
data: 'Type'
},
{
data: 'Actions',
responsivePriority: -1
},
],
initComplete: function() {
var thisTable = this;
var rowFilter = $('<tr class="filter"></tr>').appendTo($(table.table().header()));
this.api().columns().every(function() {
var column = this;
var input;
switch (column.title()) {
case 'Record ID':
case 'Order ID':
case 'Ship City':
case 'Company Agent':
input = $(`<input type="text" class="form-control form-control-sm form-filter kt-input" data-col-index="` + column.index() + `"/>`);
break;
case 'Country':
input = $(`<select class="form-control form-control-sm form-filter kt-input" title="Select" data-col-index="` + column.index() + `">
<option value="">Select</option></select>`);
column.data().unique().sort().each(function(d, j) {
$(input).append('<option value="' + d + '">' + d + '</option>');
});
break;
case 'Status':
var status = {
1: {
'title': 'Pending',
'class': 'kt-badge--brand'
},
2: {
'title': 'Delivered',
'class': ' kt-badge--danger'
},
3: {
'title': 'Canceled',
'class': ' kt-badge--primary'
},
4: {
'title': 'Success',
'class': ' kt-badge--success'
},
5: {
'title': 'Info',
'class': ' kt-badge--info'
},
6: {
'title': 'Danger',
'class': ' kt-badge--danger'
},
7: {
'title': 'Warning',
'class': ' kt-badge--warning'
},
};
input = $(`<select class="form-control form-control-sm form-filter kt-input" title="Select" data-col-index="` + column.index() + `">
<option value="">Select</option></select>`);
column.data().unique().sort().each(function(d, j) {
$(input).append('<option value="' + d + '">' + status[d].title + '</option>');
});
break;
case 'Type':
var status = {
1: {
'title': 'Online',
'state': 'danger'
},
2: {
'title': 'Retail',
'state': 'primary'
},
3: {
'title': 'Direct',
'state': 'success'
},
};
input = $(`<select class="form-control form-control-sm form-filter kt-input" title="Select" data-col-index="` + column.index() + `">
<option value="">Select</option></select>`);
column.data().unique().sort().each(function(d, j) {
$(input).append('<option value="' + d + '">' + status[d].title + '</option>');
});
break;
case 'Ship Date':
input = $(`
<div class="input-group date">
<input type="text" class="form-control form-control-sm kt-input" readonly placeholder="From" data-date-format="dd-mm-yyyy" id="kt_datepicker_1"
data-col-index="` + column.index() + `"/>
<div class="input-group-append">
<span class="input-group-text"><i class="la la-calendar-o glyphicon-th"></i></span>
</div>
</div>
<div class="input-group date">
<input type="text" class="form-control form-control-sm kt-input" readonly placeholder="To" data-date-format="dd-mm-yyyy" id="kt_datepicker_2"
data-col-index="` + column.index() + `"/>
<div class="input-group-append">
<span class="input-group-text"><i class="la la-calendar-o glyphicon-th"></i></span>
</div>
</div>`);
break;
case 'Actions':
var search = $(`<button class="btn btn-brand kt-btn btn-sm kt-btn--icon">
<span>
<i class="la la-search"></i>
<span>Search</span>
</span>
</button>`);
var reset = $(`<button class="btn btn-secondary kt-btn btn-sm kt-btn--icon">
<span>
<i class="la la-close"></i>
<span>Reset</span>
</span>
</button>`);
$('<th>').append(search).append(reset).appendTo(rowFilter);
$(search).on('click', function(e) {
e.preventDefault();
var params = {};
$(rowFilter).find('.kt-input').each(function() {
var i = $(this).data('col-index');
if (params[i]) {
params[i] += '|' + $(this).val();
} else {
params[i] = $(this).val();
}
});
$.each(params, function(i, val) {
// apply search params to datatable
table.column(i).search(val ? val : '', false, false);
});
table.table().draw();
});
$(reset).on('click', function(e) {
e.preventDefault();
$(rowFilter).find('.kt-input').each(function(i) {
$(this).val('');
table.column($(this).data('col-index')).search('', false, false);
});
table.table().draw();
});
break;
}
if (column.title() !== 'Actions') {
$(input).appendTo($('<th>').appendTo(rowFilter));
}
});
// hide search column for responsive table
var hideSearchColumnResponsive = function() {
thisTable.api().columns().every(function() {
var column = this
if (column.responsiveHidden()) {
$(rowFilter).find('th').eq(column.index()).show();
} else {
$(rowFilter).find('th').eq(column.index()).hide();
}
})
};
// init on datatable load
hideSearchColumnResponsive();
// recheck on window resize
window.onresize = hideSearchColumnResponsive;
$('#kt_datepicker_1,#kt_datepicker_2').datepicker({
autoclose: true
});
},
columnDefs: [{
targets: 0,
orderable: false,
render: function(data, type, full, meta) {
return '<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand"><input type="checkbox" value="' + data + '" class="kt-checkable"><span></span></label>';
},
},
{
targets: -1,
title: 'Actions',
orderable: false,
render: function(data, type, full, meta) {
console.log(full);
var id = full['RecordID'];
var url = full['url'];
return `
<span class="dropdown">
<a href="#" class="btn btn-sm btn-clean btn-icon btn-icon-md" data-toggle="dropdown" aria-expanded="true">
<i class="la la-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="` + url + `/edit.php"><i class="la la-edit"></i> Edit Details</a>
<a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>
<a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>
</div>
</span>
<a href="#" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="View">
<i class="la la-edit"></i>
</a>`;
},
},
{
targets: 5,
width: '150px',
},
{
targets: 6,
render: function(data, type, full, meta) {
var status = {
1: {
'title': 'Pending',
'class': 'kt-badge--brand'
},
2: {
'title': 'Delivered',
'class': ' kt-badge--danger'
},
3: {
'title': 'Canceled',
'class': ' kt-badge--primary'
},
4: {
'title': 'Success',
'class': ' kt-badge--success'
},
5: {
'title': 'Info',
'class': ' kt-badge--info'
},
6: {
'title': 'Danger',
'class': ' kt-badge--danger'
},
7: {
'title': 'Warning',
'class': ' kt-badge--warning'
},
};
if (typeof status[data] === 'undefined') {
return data;
}
return '<span class="kt-badge ' + status[data].class + ' kt-badge--inline kt-badge--pill">' + status[data].title + '</span>';
},
},
{
targets: 7,
render: function(data, type, full, meta) {
var status = {
1: {
'title': 'Online',
'state': 'danger'
},
2: {
'title': 'Retail',
'state': 'primary'
},
3: {
'title': 'Direct',
'state': 'success'
},
};
if (typeof status[data] === 'undefined') {
return data;
}
return '<span class="kt-badge kt-badge--' + status[data].state + ' kt-badge--dot"></span> ' +
'<span class="kt-font-bold kt-font-' + status[data].state + '">' + status[data].title + '</span>';
},
},
{
targets: 8,
orderable: false,
},
],
});
table.on('change', '.kt-group-checkable', function() {
var set = $(this).closest('table').find('td:first-child .kt-checkable');
var checked = $(this).is(':checked');
$(set).each(function() {
if (checked) {
$(this).prop('checked', true);
table.rows($(this).closest('tr')).select();
} else {
$(this).prop('checked', false);
table.rows($(this).closest('tr')).deselect();
}
});
});
$('#export_print').on('click', function(e) {
e.preventDefault();
table.button(0).trigger();
});
$('#export_copy').on('click', function(e) {
e.preventDefault();
table.button(1).trigger();
});
$('#export_excel').on('click', function(e) {
e.preventDefault();
table.button(2).trigger();
});
$('#export_csv').on('click', function(e) {
e.preventDefault();
table.button(3).trigger();
});
$('#export_pdf').on('click', function(e) {
e.preventDefault();
table.button(4).trigger();
});
$('#action_delete').on('click', function(e) {
e.preventDefault();
var count = table.rows({
selected: true
}).count();
if (count > 0) { // at-least one checkbox checked
var ids = [];
$('.kt-checkable').each(function() {
if ($(this).is(':checked')) {
ids.push($(this).val());
}
});
var ids_string = ids.toString(); // array to string conversion
if (confirm("Eliminar " + ids_string + " ?")) {
$.ajax({
type: "POST",
url: "./demo2/modules/production/encargos/delete_group.php",
data: {
data_ids: ids_string
},
dataType: "json",
success: function(result) {
console.log(result);
table.ajax.reload();
NotifyPage('Eliminado correctamente', 'danger');
},
async: false
});
}
}
});
};
return {
//main function to initiate the module
init: function() {
initTable1();
},
};
}();
jQuery(document).ready(function() {
KTDatatablesSearchOptionsColumnSearch.init();
});