jQuery DataTables多选列筛选器
jQuery DataTables多选列筛选器
提问于 2019-01-15 18:32:37
我想要得到的是对单个DataTables列进行类似于excel的多条件筛选。我在这里遇到了一些与堆栈溢出相关的主题，但这些主题似乎都没有实现我正在寻找的东西。
到目前为止，我只得到了示例表，我希望得到任何(甚至是最高级别的)指导，告诉我下一步该怎么做。
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-07 17:41:54
你可以在DataTables plug-in下面找到它的用处。出于演示的目的，我对您的示例进行了一定程度的扩展(由于从github通过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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54197080
复制相关文章
相似问题
腾讯云开发者
