jQuery DataTables多个选择列过滤器

Question

我想得到的是针对单个DataTables列的类似于excel的多条件过滤。 我在这里遇到了一些与该主题相关的关于stackoverflow的主题，但是这些主题似乎都没有实现我想要的东西。

到目前为止，我只有样本表，并且不胜感激任何（甚至是最高级的）指导，说明下一步要去哪里。

  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>

Answer 1

您可以在DataTables插件之后找到使用方法。 我已经出于示例目的扩展了您的示例（由于从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>

jQuery DataTables多个选择列过滤器

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-07 09:41:54

jQuery DataTables多个选择列过滤器

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-07 09:41:54

解决方案1
0 已采纳 2019-02-07 09:41:54