Using a dropdown list to filter a table (dataTables)

Question

I'm using the dataTables jQuery plugin (which is totally awesome), but I'm having trouble getting my table to filter based on the change of my select box.

Function:

  $(document).ready(function() {
      $("#msds-table").dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": false
       });

      var oTable;
      oTable = $('#msds-table').dataTable();

      $('#msds-select').change( function() { 
            oTable.fnFilter( $(this).val() ); 
       });
   });

HTML:

  <table border="0" cellpadding="0" cellspacing="0" id="msds-table">
                    <thead>
                      <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>etc</th>
                      </tr>
                    </thead>
                    <tbody>
                    <select id="#msds-select">
                    <option>All</option>
                    <option>Group 1</option>
                    <option>Group 2</option>
                    <option>Group 3</option>
                    <option>Group 4</option>
                    <option>Group 5</option>
                    <option>Group 6</option>
                    </select>
                    <tr class="odd">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
                    <tr class="even">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
                    <tr class="odd">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
     </tbody>
 </table>

Table goes on to display a bunch of items, up to "Group 6", but you get the idea. Anyone ever tried to do this before?

Can you give us a little more information about what your actual problem is? Or could you post some code of what you have attempted and what isn't working for you? — Chris
– Chris, Commented Aug 12, 2011 at 21:05
It took me about a week to get this working for me. I wish I still had access to the source I used. Fundamentally, there was a problem in the source code for it which I had to go in and change. Unfortunately, the website for datatables wasn't too descriptive when it came to this functionality. I would check their forums, I posted about it a few times there. — Chad La Guardia
– Chad La Guardia, Commented Aug 12, 2011 at 21:12

DefyGravity · Accepted Answer · 2011-08-12 21:33:06Z

12

dataTables features

I knew I had done this before, and you have to watch this little piece of information:

Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use sDom.

you need to set {bFilter:true}, and move your <select></select> into a custom element registered through sDom. I can guess your code will look like this:

$(document).ready(function() {
      $("#msds-table").dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": true,
        "sDom":"lrtip" // default is lfrtip, where the f is the filter
       });
      var oTable;
      oTable = $('#msds-table').dataTable();

      $('#msds-select').change( function() { 
            oTable.fnFilter( $(this).val() ); 
       });
   });

your code for oTable.fnFilter( $(this).val() ); will not fire while {bFilter:false}; according to the documentation

answered Aug 12, 2011 at 21:33

DefyGravity

6,0915 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

collin Over a year ago

Ah, the filter makes sense, but I still can't get it to fire; It's got to be something with the sDom no? The documentation on it isn't to clear.

collin Over a year ago

Ok, just read up on the sDom. Your code should totally work! No dice though. The only other thing I can think of is where in the HTML the <select> is located?

collin Over a year ago

Wow, just looked at my select id=#msds-select...I'm attributing that one to Friday evening fried brain. Thanks for your help, cheers.

DefyGravity Over a year ago

glad i could help ;) . that filtering tidbit caught me the first time through, and sucked to find.

Imran · Accepted Answer · 2017-08-28 07:39:47Z

   $.extend( true, $.fn.dataTable.defaults, {
            "bFilter": true,
                initComplete: function () {
                    this.api().column(1).every( function () {
                        var column = this;
                        var select = $('<select><option value="">All Subjects</option></select>')
                            .appendTo( $(column.header()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );
                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                },
        } );

Sapna · Accepted Answer · 2018-10-25 05:43:11Z

-1

Use this code:

 $('.btn-success').on('click',function (e) {
               //to prevent the form from submitting use e.preventDefault()
                e.preventDefault();
                var res = $("#userid").val();  
                var  sNewSource = "<?php echo base_url(); ?>myaccount/MyData_select?userid=" + res + "";
                var oSettings = ETable.fnSettings();
                oSettings.sAjaxSource  = sNewSource;
                ETable.fnDraw();
            });

answered Oct 25, 2018 at 5:43

Sapna

71 bronze badge

Collectives™ on Stack Overflow

Using a dropdown list to filter a table (dataTables)

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related