我很惊讶没有在 DataTables 中找到类似过滤的 Excel(因为它是如此广泛使用和先进的插件)。这是否存在，或者是否有一种简单的方法来实现它？下面是高级菜单过滤器(如 Excel)的示例。谢谢!
剑道用户界面: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
最佳答案
Yet Another DataTables Column Filter (yadcf)对于 jQuery 数据表
参见 this example用于演示或下面的演示。
$(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>
关于javascript - Datatables 高级过滤器菜单，如 Excel 或 Kendo UI Grid？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27152299/