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