Datatable search is not working on list type of column

Question

I have datatable on html page.In my Datatable I have column wise search at footer. This search is working for all column but one column have select- option element (dropdown) for this it is not working. every time when it start searching instead of selected value of list, it is searching on all list value.

This my table looks like :-

here you can see position search is working fine. its draw match value correctly.

Salary column having list value that contains :- Adapter,Adater1,capacitor, diode but here when i try to search it will not search on selected value, it search on whole list for each rows, thats why when i type Adapter1 it will not able to segregate because every row having Adapter1 as a value. ideally it should show only one row but here is my output :-

But when i type any value which is not present in list then it show correctly, So search is working but it takes all value instead of selected value :-

can you please help me on this.

Below is my Code





BootStrap




















   Demo  

  
    
    


           
           
                Name
                Position
                Office
                Age
                Start date
                Salary
            


            
            
                Tiger Nixon
                Developer
                Edinburgh
                61
                2011/04/25
                
                
                
            
                        
            
                Tiger Nixon1
                System Architect1
                Edinburgh1
                611
                2011/04/25
                
                
                
            
                        
            
                Tiger Nixon2
                System Architect2
                Edinburgh2
                61
                2011/04/25
                
                
                
                               

            
            
                Name
                Position
                Office
                Age
                Start date
                Salary
            
        
        

  



 


  HTML Table Edits/Upates 

  
    
    All the changes will be displayed below

user_12567365 · Answer

When you use the search(...) API call in this way, you are limited to searching all content in each column. In your case, there are two problems with this:

(1) Each cell containing a select list actually contains the full HTML text of the element - including all the options used by the select. This is why the search does not appear to work. It is, in fact, working correctly. It will always find every select option, regardless of whether it is the selected option.

(2) A user can choose any select option at any time - and all such changes are only captured in the DOM. The underlying DataTable (i.e. the JavaScript object) does not know anything about such changes. So, there is no straightforward way to tell the DataTables search() function about such changes.

Solution

One solution is to create a custom DataTables search function using $.fn.dataTable.ext.search. You can see a basic example here.

Below is a runnable snippet based on a simplified version of the code in your question, showing how to adapt $.fn.dataTable.ext.search to also handle a column containing select lists:

// remove the default global filter function:
while($.fn.dataTable.ext.search.length > 0) {
  $.fn.dataTable.ext.search.pop();
}

// add our custom filter function:
$.fn.dataTable.ext.search.push(
  function( settings, data, rowIdx ) {
    // get the TD node containing the drop-down list:
    var selectListTdNode = $('#example').DataTable().rows(rowIdx).nodes().to$().find( 'td' )[5]
    // get the selected value:
    var selection = $( selectListTdNode ).find(":selected").text();
    
    // process each field in the row:
    var displayRow = true; // start by assuming the row should be displayed
    data.forEach(function (item, idx) {
      // for the 6th column (idx = 5), we need to use the selected drop-down
      //  value, and not the contents of the cell:
      item = (idx === 5) ? selection : item;
      
      var searchField = $('#example').DataTable().columns(idx).footer();
      var searchValue = $(searchField).find( 'input' ).val();
      // should the row be displayed? 'false' means 'do not display':
      if (searchValue !== '' & !item.toLowerCase().includes(searchValue.toLowerCase())) {
        displayRow = false;
      }
    });
    return displayRow;
  }
);

$(document).ready(function() {

  // create an input field in each footer cell:
  $('#example tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '' );
  } );

  var table = $('#example').DataTable({
    dom: 'lrtip' // hide the global filter box ('f')
  });

  // create change events to trigger a re-draw, which also calls the filter function:
  $('#example tfoot th input').keyup( function() {
    table.draw();
  } );
  $('#example td select').change( function() {
    table.draw();
  } );
    
} );



  
  Demo
  
  
  
  







    
        
            
                Name
                Position
                Office
                Age
                Start date
                Salary
            
        
        
            
                Tiger Nixon
                System Architect
                Edinburgh
                61
                2011/04/25
                
                    
                
            
            
                Garrett Winters
                Accountant
                Tokyo
                63
                2011/07/25
                
                    
                
            
            
                Ashton Cox
                Junior "Technical" Author
                San Francisco
                66
                2009/01/12
                
                    
                
            
            
                Cedric Kelly
                Senior Javascript Developer
                Edinburgh
                22
                2012/03/29
                
                    
                
            
            
                Airi Satou
                Accountant
                Tokyo
                33
                2008/11/28
                
                    
                
            
            
                Brielle Williamson
                Integration Specialist
                New York
                61
                2012/12/02
                
                    
                
            
            
                Herrod Chandler
                Sales Assistant
                San Francisco
                59
                2012/08/06
                
                    
                
            
            
                Rhona Davidson
                Integration Specialist
                Tokyo
                55
                2010/10/14
                
                    
                
            
            
                Colleen Hurst
                Javascript Developer
                San Francisco
                39
                2009/09/15
                
                    
                
            
            
                Sonya Frost
                Software Engineer
                Edinburgh
                23
                2008/12/13
                
                    
                
            
        
        
            
                Name
                Position
                Office
                Age
                Start date
                Salary

Explanation

I have added comments in the code to explain detailed steps, but overall, this works as follows:

First, we remove the default searching function (this is used by the global search box) - and we also hide the global search box itself, using the DataTables dom option.

We then define our replacement search function.

This function needs to access the DOM, to extract all the selected values for each select list - which is what find(":selected").text() does.

(We only need this for the final column in the table, so all the other columns can just use their cell contents without needing this extra step.)

The search function is triggered every time we perform a draw(). When it fires, it is executed for each separate row in the table, and it determines whether each row should be displayed or hidden. It does this by returning a true or false value, based on comparing each field's value against the column's search term.

If any search term fails to match the relevant field's data, then that row is hidden. This is how we ensure all of the column filter instructions are evaluated in combination with each other. The solution uses the displayRow boolean to track the overall "displayable" status of each row.

Finally, at the end of the script, we need to create event handlers which will force a DataTables re-draw, and which also cause our custom filter function to be invoked again. Note that we create these event handlers not only for the input fields in the footer, but also for each of the select lists - because a user can change a select list value, and filtering needs to immediately take such changes into account.

Final Note

With DataTables, there is often more than one way to accomplish a task. But in this case, I would definitely recommend using a custom function, for greatest flexibility.

Datatable search is not working on list type of column

1 Answers