jQuery DataTables多个选择列过滤器 [英] jQuery DataTables multiple select column filters
问题描述
我想得到的是针对单个DataTables列的类似excel的多标准过滤。我在这里遇到了与主题相关的stackoverflow的几个主题，但这些主题似乎没有实现我正在寻找的东西。
What I would like to get is excel-like multiple criteria filtering for individual DataTables columns. I have come across few topics here on stackoverflow related to the subject but none of those seem to implement what I'm looking for.
到目前为止，我只有样本表，我很欣赏任何（甚至是最高级别的）指导，以及下一步的移动。
So far, I've got only sample table and I'd appreciate any (even most high-level) guidance as of where to move next.
var tableData = [
{name: 'Clark Kent', city: 'Metropolis'},
{name: 'Bruce Wayne', city: 'Gotham'},
{name: 'Steve Rogers', city: 'New York'},
{name: 'Peter Parker', city: 'New York'},
{name: 'Thor Odinson', city: 'Asgard'}
];
var dataTable = $('#mytable').DataTable({
sDom: 't',
data: tableData,
columns: [
{data: 'name', title: 'Name'},
{data: 'city', title: 'City'}
]
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
推荐答案
您可以在 DataTables插件。我有一些扩展你的例子用于演示目的（它从github通过jsdelivr提供的非缩小文件有点慢）：
You may find of use following DataTables plug-in. I have somewhat extended your example for demonstration purposes (it works somewhat slow as non-minified files served from github through jsdelivr):
$(document).ready(function () {
//Source data definition
var tableData = [{
name: 'Clark Kent',
city: 'Metropolis',
race: 'cryptonian'
}, {
name: 'Bruce Wayne',
city: 'Gotham',
race: 'human'
}, {
name: 'Steve Rogers',
city: 'New York',
race: 'superhuman'
}, {
name: 'Peter Parker',
city: 'New York',
race: 'superhuman'
}, {
name: 'Thor Odinson',
city: 'Asgard',
race: 'god'
}, {
name: 'Jonathan Osterman',
city: 'New York',
race: 'superhuman'
}, {
name: 'Walter Kovacs',
city: 'New Jersey',
race: 'human'
}, {
name: 'Arthur Curry',
city: 'Atlantis',
race: 'superhuman'
}, {
name: 'Tony Stark',
city: 'New York',
race: 'human'
}, {
name: 'Scott Lang',
city: 'Coral Gables',
race: 'human'
}, {
name: 'Bruce Banner',
city: 'New York',
race: 'superhuman'
}
];
//DataTable definition
window.dataTable = $('#mytable').DataTable({
sDom: 'tF',
data: tableData,
columns: [{
data: 'name',
title: 'Name'
}, {
data: 'city',
title: 'City'
}, {
data: 'race',
title: 'Race'
}]
});
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.mfilter.tk/js/mfilter.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
这篇关于jQuery DataTables多个选择列过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
