javascript 数据表高级筛选菜单，如 Excel 或 Kendo UI Grid？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27152299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 07:02:03 来源:igfitidea点击:
Datatables advanced filter menu like Excel or Kendo UI Grid?
提问by triplethreat77
I'm surprised not to find Excel like filtering in DataTables (since it is such a widely used and advanced plugin). Does this exist, or is there an easy way to implement it? Examples of advanced menu filter (like Excel) below. Thanks!
我很惊讶没有在 DataTables 中发现 Excel 之类的过滤器（因为它是如此广泛使用和高级插件）。这是否存在，或者是否有一种简单的方法来实现它？下面是高级菜单过滤器（如 Excel）的示例。谢谢！
Kendo UI: http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
剑道用户界面：http: //demos.telerik.com/kendo-ui/grid/filter-menu-customization
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html
回答by Gyrocode.com
Yet Another DataTables Column Filter (yadcf)for jQuery DataTables
See this examplefor demonstration or the demo below.
$(document).ready( function () { var table = $('#example').DataTable(); yadcf.init(table, [{ column_number: 0 }, { column_number: 1, filter_type: "range_number_slider" }, { column_number: 2, filter_type: "date" }, { column_number: 3, filter_type: "auto_complete", text_data_delimiter: "," }, { column_number: 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag" }]); // BOOTSTRAP: Tweaks $('.yadcf-filter-wrapper').addClass('input-group'); $('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm'); $('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>'); });table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc_disabled::after { top: 8px; } .yadcf-number-slider-filter-wrapper-inner { width:100px !important; }<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>jQuery DataTables</title> <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css" rel="stylesheet" type="text/css" /> <link href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.js"></script> <script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script> </head> <body> <table cellpadding="0" cellspacing="0" border="0" class="table table-stripped table-bordered" id="example"> <thead> <tr> <th>Some Data</th> <th>Numbers</th> <th>Dates</th> <th>Values</th> <th>Tags</th> </tr> </thead> <tbody> <tr> <td>Some Data 1</td> <td>1000</td> <td>01/24/2014</td> <td>a_value,b_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 2</td> <td>22</td> <td>02/20/2014</td> <td>b_value,c_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td> </tr> <tr> <td>Some Data 3</td> <td>33</td> <td>02/26/2014</td> <td>a_value</td> <td><span class="label label-primary">Tag2</span> <span class="label label-primary">Tag3</span></td> </tr> <tr> <td>Some Data 4</td> <td>44</td> <td>02/11/2014</td> <td>b_value</td> <td><span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 5</td> <td>55</td> <td>02/29/2014</td> <td>a_value,b_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 1</td> <td>111</td> <td>11/24/2014</td> <td>c_value,d_value</td> <td><span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 2</td> <td>222</td> <td>02/03/2014</td> <td>e_value,f_value</td> <td><span class="label label-primary">Tag3</span> <span class="label label-primary">Tag4</span> <span class="label label-primary">Tag5</span></td> </tr> <tr> <td>Some Data 3</td> <td>33</td> <td>02/03/2014</td> <td>a_value,bb_value</td> <td><span class="label label-primary">Tag5</span></td> </tr> <tr> <td>Some Data 4</td> <td>444</td> <td>03/24/2014</td> <td>a_value,f_value</td> <td><span class="label label-primary">Tag4</span></td> </tr> <tr> <td>Some Data 5</td> <td>55</td> <td>03/22/2014</td> <td>a_value,c_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 1</td> <td>300</td> <td>02/20/2014</td> <td>a_value,b_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td> </tr> <tr> <td>Some Data 2</td> <td>242</td> <td>02/04/2014</td> <td>d_value,aa_value</td> <td><span class="label label-primary">Tag1</span></td> </tr> <tr> <td>Some Data 3</td> <td>703</td> <td>02/05/2014</td> <td>a_value,c_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 4</td> <td>604</td> <td>02/25/2014</td> <td>a_value,bb_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 5</td> <td>550</td> <td>02/01/2014</td> <td>c_value,e_value</td> <td><span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 1</td> <td>901</td> <td>02/02/2014</td> <td>a_value,e_value</td> <td><span class="label label-primary">Tag1</span></td> </tr> <tr> <td>Some Data 11</td> <td>911</td> <td>02/22/2014</td> <td>a_value,e_value</td> <td><span class="label label-primary">Tag11</span></td> </tr> </tbody> </table> </body> </html>
jQuery DataTables 的另一个 DataTables 列过滤器 (yadcf)
请参阅此示例以进行演示或下面的演示。
$(document).ready( function () { var table = $('#example').DataTable(); yadcf.init(table, [{ column_number: 0 }, { column_number: 1, filter_type: "range_number_slider" }, { column_number: 2, filter_type: "date" }, { column_number: 3, filter_type: "auto_complete", text_data_delimiter: "," }, { column_number: 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag" }]); // BOOTSTRAP: Tweaks $('.yadcf-filter-wrapper').addClass('input-group'); $('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm'); $('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>'); });table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc_disabled::after { top: 8px; } .yadcf-number-slider-filter-wrapper-inner { width:100px !important; }<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>jQuery DataTables</title> <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css" rel="stylesheet" type="text/css" /> <link href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.js"></script> <script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script> </head> <body> <table cellpadding="0" cellspacing="0" border="0" class="table table-stripped table-bordered" id="example"> <thead> <tr> <th>Some Data</th> <th>Numbers</th> <th>Dates</th> <th>Values</th> <th>Tags</th> </tr> </thead> <tbody> <tr> <td>Some Data 1</td> <td>1000</td> <td>01/24/2014</td> <td>a_value,b_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 2</td> <td>22</td> <td>02/20/2014</td> <td>b_value,c_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td> </tr> <tr> <td>Some Data 3</td> <td>33</td> <td>02/26/2014</td> <td>a_value</td> <td><span class="label label-primary">Tag2</span> <span class="label label-primary">Tag3</span></td> </tr> <tr> <td>Some Data 4</td> <td>44</td> <td>02/11/2014</td> <td>b_value</td> <td><span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 5</td> <td>55</td> <td>02/29/2014</td> <td>a_value,b_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 1</td> <td>111</td> <td>11/24/2014</td> <td>c_value,d_value</td> <td><span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 2</td> <td>222</td> <td>02/03/2014</td> <td>e_value,f_value</td> <td><span class="label label-primary">Tag3</span> <span class="label label-primary">Tag4</span> <span class="label label-primary">Tag5</span></td> </tr> <tr> <td>Some Data 3</td> <td>33</td> <td>02/03/2014</td> <td>a_value,bb_value</td> <td><span class="label label-primary">Tag5</span></td> </tr> <tr> <td>Some Data 4</td> <td>444</td> <td>03/24/2014</td> <td>a_value,f_value</td> <td><span class="label label-primary">Tag4</span></td> </tr> <tr> <td>Some Data 5</td> <td>55</td> <td>03/22/2014</td> <td>a_value,c_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 1</td> <td>300</td> <td>02/20/2014</td> <td>a_value,b_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td> </tr> <tr> <td>Some Data 2</td> <td>242</td> <td>02/04/2014</td> <td>d_value,aa_value</td> <td><span class="label label-primary">Tag1</span></td> </tr> <tr> <td>Some Data 3</td> <td>703</td> <td>02/05/2014</td> <td>a_value,c_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 4</td> <td>604</td> <td>02/25/2014</td> <td>a_value,bb_value</td> <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 5</td> <td>550</td> <td>02/01/2014</td> <td>c_value,e_value</td> <td><span class="label label-primary">Tag2</span></td> </tr> <tr> <td>Some Data 1</td> <td>901</td> <td>02/02/2014</td> <td>a_value,e_value</td> <td><span class="label label-primary">Tag1</span></td> </tr> <tr> <td>Some Data 11</td> <td>911</td> <td>02/22/2014</td> <td>a_value,e_value</td> <td><span class="label label-primary">Tag11</span></td> </tr> </tbody> </table> </body> </html>
