对于我的页面,我对dataTables插件进行了以下初始化:
$(document).ready(function() {
var method = getUrlVars()["method"];
var sortFirst = getUrlVars()["sortFirst"];
initCustomers('#{id:tblDataTables}', method, sortFirst);
});
function initCustomers(id, method, sort) {
var max_rows = parseInt("#{javascript: application['rows_repeat']}");
var btn_create_label = "#{javascript: datatable['gen_btnCreateAgenda']}";
var btnExcel = "#{javascript: datatable['gen_btnExcel']}";
var btnPrint = "#{javascript: datatable['gen_btnPrint']}";
var lbl_ExcelFileName = "#{javascript: datatable['gen_MeetingUpcoming']}";
var element = $(document.getElementById(id));
var table = element.DataTable();
table.destroy();
localStorage.clear();
element.DataTable({
"ajax": "api.xsp/customersAll?method=" + method,
language: {
url: getLanguage()
},
'processing': true,
'language': {
'loadingRecords': ' ',
'processing': '<div class="spinner"><i class="fa fa-spinner fa-pulse"></i></div>'
},
"paging":true,
"pageLength":max_rows,
responsive: true,
'order': [
[1, 'asc']
],
"columns": [
{
data: "cust",
"render": function(data) {
return "<a href='customer.xsp?unid=" + data.UNID + "&type=customer'>" + data.custId + "</a>"
return data.custId;
}
},{
data: "cust.name",
"render": function(data) {
return data;
}
},{
data: "cust.risk",
"render": function(data) {
return data;
}
}, {
data: "cust.office",
"render": function(data) {
return data;
}
}, {
data: "cust.resp",
"render": function(data) {
return data
}
}, {
data: "cust",
"render": function(data) {
return data.SammandragsNr;
}
}],
dom: 'Bfrtip',
buttons: [{
extend: 'excelHtml5',
title: 'KKOM Kunder',
text: '<i class="fa fa-file-excel-o"></i> ' + btnExcel,
titleAttr: 'Excel'
},
{
extend: 'print',
text: ' <i class = "fa fa-print " aria-hidden= "true "></i> ' + btnPrint
}
],
colReorder: {
reorderCallback: function() {
console.log('callback');
}
},
initComplete: function(data) {
this.api().columns([2, 3, 4]).every(function() {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.addClass('dataTableFilter');
select.append('<option value="' + d + '">' + d + '</option>')
});
});
$('.dataTableFilter option').val(function(idx, val) {
$(this).siblings('[value="'+ val +'"]').remove();
});
}
});
//$('tfoot').remove();
}
JSON数据如下:
{
"data": [{
"cust": {
"reason": "",
"systemID": "A0\u00A0",
"mailFirst": "",
"mailSecond": "",
"resp": "",
"privateOrCompany": "PRIVATE",
"office": "52770",
"extend": "",
"mailLast": "",
"UNID": "35EBC99851F3DF51C12583CA002FFD80",
"SammandragsNr": "committee C & PC",
"name": "BRITA BLOM",
"custId": "23090502610009",
"risk": ""
}
}, {
"cust": {
"reason": "",
"systemID": "A0\u00A0",
"mailFirst": "",
"mailSecond": "",
"resp": "",
"privateOrCompany": "PRIVATE",
"office": "52770",
"extend": "",
"mailLast": "",
"UNID": "AA23069A275A49FCC12583CA002FFD89",
"SammandragsNr": "committee H & R",
"name": "JENS ANDERS",
"custId": "25090502610009",
"risk": ""
}
}]
}
对于columns([2,3,4])我得到选择输入。但是,如果我在选择项中选择一个选项,则该表将完全无响应。
有人知道如何使列搜索正常工作吗?