Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2018

  These examples might help you get started.

  https://datatables.net/examples/api/multi_filter.html
  https://datatables.net/examples/api/multi_filter_select.html

  Since you aren't putting these in the footer or header you will need to use the column() api with a column selector.

  Please post any questions.

  Kevin
• just10minutes Posts: 6Questions: 1Answers: 0

  January 2018 edited January 2018

  @kthorngren Thank you for your input.

  I have applied both the examples before on my table both works fine as long they are for all columns and placed either on header or footer.

  Let me admit I am a beginner in Jquery.

  Below is what I have which will put dropdown for all columns in footer, how can I convert this into for single column lets say "age" and put inside a id="Age_filter" on my html?

  Any help is much appreciated

          initComplete: function () {
             this.api().columns().every( function () {
                   var column = this;
                   var select = $('<select><option value=""></option></select>')
                       .appendTo( $(column.footer()).empty() )
                       .on( 'change', function () {
                           var val = $.fn.dataTable.util.escapeRegex(
                               $(this).val()
                           );
  
                           column.search( this.value ).draw();
                       } );
  
                   column.data().unique().sort().each( function ( d, j ) {
                       select.append( '<option value="'+d+'">'+d+'</option>' )
                   } );
               } );
             },
  
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2018 Answer ✓

  See if this example helps:
  http://live.datatables.net/voseluna/1/edit

  It shows both a text input column search and a drop down (based on the above example) column search.

  Kevin
• just10minutes Posts: 6Questions: 1Answers: 0

  January 2018

  @kthorngren Thanks a lot, Now i understand how this can be applied in my case.

  I didn't observe one thing earlier. i observed now when i applied this. my use case is server side data retrieval.

  The drop down does not bring all possible values from server. It just has the values which is shown on the table at presentation layer.

  For eg:
  Available Office : 12 unique values
  Presentation layer shows only 4 unique office location in the first 10 results.

  So the drop down will have only 4 values instead of 12.

  Do you think this can be achieved?

  I am accepting your answer for my initial question.

  Thanks
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2018

  As you mentioned, server side does not work well with the example drop down search as it pulls data from the client side data.

  Probably what I would do is create an ajax request to get the desired data before initializing DT. Store that in a variable. Then change the loop that builds the options from the column data to build from the ajax response variable.

  Kevin
• just10minutes Posts: 6Questions: 1Answers: 0

  January 2018

  Thank you Kevin.

  I will look into this option.

  Thanks a lot for all your help.

  one last thing

  var column = this.api().column(2);

  What selector I should use to avoid index and put actual column name?

  Something like below, was going through this but didn't quite get proper answer https://datatables.net/reference/type/column-selector

  var column = this.api().column('office');
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2018

  You can define columns.name and use that as the column selector, like this example:

  https://datatables.net/reference/type/column-selector#{string}:name

  Kevin
• just10minutes Posts: 6Questions: 1Answers: 0

  January 2018

  @kthorngren Thank you for your input.

  I am stuck at the point where i want two columns as drop down.

  I tried repeating the same code twice for eg: Office and position. But only the second option works. I think It should be handled separately , can i get some hint on this?

  I tried writing my code in this way

  this.api().columns([1,2]).every( function () {
  #Here i am not getting how to pass the id of the html template, 
  as it differs per column.
  }
  

  Thanks,
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2018 Answer ✓

  Yes, I see. It seems the column variable is within the scope of all the search events, so the last one assigned is used for all columns. Not sure why though.

  I updated the example to include the use of data attributes to track the column id. There might be better alternatives but this seems to work.

  Kevin
• just10minutes Posts: 6Questions: 1Answers: 0

  January 2018

  Thank you for this updated answer, you have been very helpful.

  Thank you very much