javascript – Datatables高级过滤器菜单,如Excel或Kendo UI Grid？

我很惊讶在DataTables中找不到类似过滤的Excel(因为它是一个广泛使用的高级插件).这是存在的,还是有一种简单的方法来实现它？下面的高级菜单过滤器(如Excel)的示例.谢谢！

Kendo UI：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) for jQuery DataTables

有关演示或以下演示,请参阅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？

解决方法

相关推荐