javascript - 如何在 jquery 数据表中使用多列过滤器
问题描述
我正在使用 Jquery 数据表将我的文件从 sql 数据库导出到 excel 中。我的数据表上有 3 个列过滤器,它们可以独立工作。我希望他们以某种方式使用或设置条件,即从满足过滤器条件的数据表中获取所有数据。下面是我的代码示例。
$(document).ready(function () {
var table = $('#studentTable').DataTable({
"ajax": {
"url": "/StructuredImportTgts/GetData",
"type": "GET",
"datatype": "json"
},
responsive: 'true',
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
],
"columns": [
{ "data": "PART_NO" },
{ "data": "LEVEL" },
{ "data": "PART_NO" },
{ "data": "PART_NAME" },
{ "data": "L1QTY" },
{ "data": "PL1" },
{ "data": "PL2" },
{ "data": "PL3" },
{ "data": "SupplierLocID" },
{ "data": "SupplierLocID" },
{ "data": "Discrepancies" },
{ "data": "Comments" }
],
initComplete: function () { // After DataTable initialized
this.api().columns([1, 5, 6]).every(function () {
/* use of [1,2,3] for second, third and fourth column. Leave blank - columns() - for all.
Multiples? Use columns[0,1]) for first and second, e.g. */
var column = this;
var select = $('<select><option value=""/></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.append('<option value="' + d + '">' + d + '</option>')
});
}); // this.api function
} //initComplete function
});
});
解决方案
对于陷入类似问题的人,这是我解决它的方法。
$(document).ready(function () {
$('#studentTable').DataTable({
"ajax": {
"url": "/StructuredImportTgts/GetData1",
"type": "GET",
"datatype": "json"
},
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
],
"columns": [
//{ "data": "PART_NO" },
{ "data": "LEVEL" },
{ "data": "PART_NO" },
{ "data": "PART_NAME" },
{ "data": "L1QTY" },
{ "data": "PL1" },
{ "data": "PL2" },
{ "data": "PL3" },
{ "data": "SupplierLocID" },
//{ "data": "SupplierLocID" },
{ "data": "Discrepancies" },
{ "data": "Comments" }
],
initComplete: function () {
this.api().columns([4,5,6]).every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
$('#studentTable').DataTable().draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
});
$.fn.dataTable.ext.search.push(
function (settings, searchData, index, rowData, counter) {
if (settings.nTable.id !== 'studentTable') {
return true;
}
var position = $("#position option:selected").text();
var office = $("#office option:selected").text();
var off = $("#off option:selected").text();
// Display the row if both inputs are empty
if (position.length === 0 && office.length === 0 && off.length === 0) {
return true;
}
// Display row if position matches position selection
hasPosition = true;
if (position !== searchData[4]) {
hasPosition = false; //Doesn't match - don't display
}
// Display the row if office matches the office selection
hasOffice = true;
if (office !== searchData[5]) {
hasOffice = false; //Doesn't match - don't display
}
hasOff = true;
if (off !== searchData[6]) {
hasOff = false; //Doesn't match - don't display
}
// If either position or office matched then display the row
return true ? hasPosition || hasOffice || hasOff : false;
});
推荐阅读
- c# - .Net 标准库使用 selenium/cefsharp
- r - 使用午夜列中的日期和秒数将 data.frame 转换为 xts 对象 (R)
- postman - 对讲 API (v2.0) 搜索对话不起作用
- after-effects - 能否在 Azure Batch 上运行 After Effects?
- c# - 在 WPF 中使用 Ninject 作为带有 Calburn.Micro 和 MVVM 的 DI 容器
- windows - 尝试计算PowerShell中开始和停止事件之间经过的时间
- java - 使用 Interleaved2Of5 条形码格式时出现 java.lang.NoClassDefFoundError: org/apache/batik/dom/svg/SAXSVGDocumentFactory
- html - 如何将 alpha 通道不透明度应用于 SASS 变量中的颜色值?
- iis - 您如何在 Windows 托管 iis 上将 http/www 转发到 https/non-www?
- android - Android中的广播接收器不起作用