如何像 Excel 列过滤器一样过滤列
18
0
当下面的代码运行时，它将显示一个带有值的数据表。每个标题列上都有一个过滤器图标。单击标题列上的过滤器图标，它将下拉一个过滤器菜单...
当下面的代码运行时，它将显示一个带有值的数据表。每个标题列上都有一个过滤器图标。单击标题列上的过滤器图标，它将下拉一个带有复选框的过滤器菜单。此过滤器下拉菜单将显示相应列中的所有值。过滤第一列后，数据表中的数据被过滤，其中的记录较少。然后，当我们第二次单击其标题列上的“位置”过滤器图标时，它将显示过滤器下拉列表中不在该“位置”列中的所有值。
我希望在显示该列的过滤菜单下拉菜单时，仅显示相应列中的可见列数据。该怎么做？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery DataTable with Custom Filter</title>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"
type="text/css" rel="stylesheet" media="screen,projection" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js">
</script>
<style>
table.dataTable th {
border-bottom: 1px solid #333;
border-right: 1px solid #333;
}
table.dataTable td {
border-bottom: 1px solid #333;
border-right: 1px solid #333;
}
.filterIcon {
height: 16px;
width: 16px;
}
.modalFilter {
display: none;
height: auto;
background: #FFF;
border: solid 1px #ccc;
padding: 8px;
position: absolute;
z-index: 1001;
}
.modalFilter .modal-content {
max-height: 250px;
overflow-y: auto;
}
.modalFilter .modal-footer {
background: #FFF;
height: 35px;
padding-top: 6px;
}
.modalFilter .btn {
padding: 0 1em;
height: 28px;
line-height: 28px;
text-transform: none;
}
#mask {
display: none;
background: transparent;
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 1000;
}
</style>
<script>
$(document).ready(function () {
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"]
];
$('#example').DataTable({
data: dataSet,
"lengthMenu": [[5, 10, 50, -1], [5, 10, 50, "All"]],
"pageLength": 10,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
initComplete: function () {
configFilter(this, [0, 1, 2, 4]);
}
});
$('#example_length,#example_filter').hide();
});
//This function initializes the content inside the filter modal
function configFilter($this, colArray) {
setTimeout(function () {
var tableName = $this[0].id;
var columns = $this.api().columns();
$.each(colArray, function (i, arg) {
$('#' + tableName + ' th:eq(' + arg + ')').append('<img src="http://www.icone-png.com/png/39/38556.png" class="filterIcon" onclick="showFilter(event,\'' + tableName + '_' + arg + '\')" />');
});
var template = '<div class="modalFilter">' +
'<div class="modal-content">' +
'{0}</div>' +
'<div class="modal-footer">' +
'<a href="#!" onclick="clearFilter(this, {1}, \'{2}\');" class=" btn left waves-effect waves-light">Clear</a>' +
'<a href="#!" onclick="performFilter(this, {1}, \'{2}\');" class=" btn right waves-effect waves-light">Ok</a>' +
'</div>' +
'</div>';
$.each(colArray, function (index, value) {
columns.every(function (i) {
if (value === i) {
var column = this, content = '<input type="text" class="filterSearchText" onkeyup="filterValues(this)" /> <br/>';
var columnName = $(this.header()).text().replace(/\s+/g, "_");
var distinctArray = [];
column.data().each(function (d, j) {
if (distinctArray.indexOf(d) == -1) {
var id = tableName + "_" + columnName + "_" + j; // onchange="formatValues(this,' + value + ');
content += '<div><input type="checkbox" value="' + d + '" id="' + id + '"/><label for="' + id + '"> ' + d + '</label></div>';
distinctArray.push(d);
}
});
var newTemplate = $(template.replace('{0}', content).replace('{1}', value).replace('{1}', value).replace('{2}', tableName).replace('{2}', tableName));
$('body').append(newTemplate);
modalFilterArray[tableName + "_" + value] = newTemplate;
content = '';
}
});
});
}, 50);
}
var modalFilterArray = {};
//User to show the filter modal
function showFilter(e, index) {
$('.modalFilter').hide();
$(modalFilterArray[index]).css({ left: 0, top: 0 });
var th = $(e.target).parent();
var pos = th.offset();
console.log(th);
$(modalFilterArray[index]).width(th.width() * 0.75);
$(modalFilterArray[index]).css({ 'left': pos.left, 'top': pos.top });
$(modalFilterArray[index]).show();
$('#mask').show();
e.stopPropagation();
}
//This function is to use the searchbox to filter the checkbox
function filterValues(node) {
var searchString = $(node).val().toUpperCase().trim();
var rootNode = $(node).parent();
if (searchString == '') {
rootNode.find('div').show();
} else {
rootNode.find("div").hide();
rootNode.find("div:contains('" + searchString + "')").show();
}
}
//Execute the filter on the table for a given column
function performFilter(node, i, tableId) {
var rootNode = $(node).parent().parent();
var searchString = '', counter = 0;
rootNode.find('input:checkbox').each(function (index, checkbox) {
if (checkbox.checked) {
searchString += (counter == 0) ? checkbox.value : '|' + checkbox.value;
counter++;
}
});
$('#' + tableId).DataTable().column(i).search(
searchString,
true, false
).draw();
rootNode.hide();
$('#mask').hide();
}
//Removes the filter from the table for a given column
function clearFilter(node, i, tableId) {
var rootNode = $(node).parent().parent();
rootNode.find(".filterSearchText").val('');
rootNode.find('input:checkbox').each(function (index, checkbox) {
checkbox.checked = false;
$(checkbox).parent().show();
});
$('#' + tableId).DataTable().column(i).search(
'',
true, false
).draw();
rootNode.hide();
$('#mask').hide();
}
</script>
</head>
<body>
<div id="mask"></div>
<h3>Jquery DataTable with custom filter</h3>
<table id="example" class="bordered material-table centered striped green lighten-
1"></table>
</body>
</html>