9

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!

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

7
  • The default filtering mechanism with the column menu is very similar to that second example you gave. demos.telerik.com/kendo-ui/grid/column-menu alternatively you can also now use the new filter row feature and then pre-set this to a specific filter action eg contains, equals etc. Alternatively you can add your own custom filter for the column e.g. you want to filter based on a discreet list of items like Country, city etc. Nov 26, 2014 at 18:36
  • This is an awesome example, but how can I implement this with DataTables? Nov 26, 2014 at 18:50
  • So are you saying you want to bind the grid to a DataTable collection rather than an IEnumerable<T> Collection? Nov 26, 2014 at 18:51
  • I'm saying that I want the filter icon in my table headers for more in depth filtering ability. Nov 26, 2014 at 19:36
  • So are you not using a kendo grid for displaying this data? If you have a pro-license then you can just bind your datasource/ datatable to the grid and then implement the features. If you don't have this then a jsfiddle of what you are trying to achieve would be great. Nov 26, 2014 at 19:39

1 Answer 1

6
  • Yet Another DataTables Column Filter (yadcf) for jQuery DataTables

    See this example for 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.