Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2022

  Sorry, but I'm not clear what you want help with. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022 edited January 2022

  this is the test case link
  http://live.datatables.net/fuficeve/1/edit

  Now what i want is do display:none search box on Name and Position column. And for Age column to display a dropdown with ages value, For Salary column to let search as it is by default searchbox
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  You can use a classname to distinguish between the th that have text inputs versus select inputs. See this example from this thread.

  Kevin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022

  @kthorngren please can you do an example with my test case code

  http://live.datatables.net/fuficeve/1/edit

  I have try the code on your example but for me doesnt work
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  I added some classnames to the th in HTMl and updated the selector to include the class: $('#example tfoot th.text-search').

  http://live.datatables.net/fuficeve/2/edit

  Kevin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022 edited January 2022

  @kthorngren But I need the Age column to be a dropdown with the column values. And all the other columns just like you did.

  How should i add select option for age column?
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  But I need the Age column to be a dropdown with the column values

  See this example. Change line 4 to loop only the columns with the classname select-search.

  this.api().columns( '.select-search' ).every( function () {
  

  See the column-selector docs for more details about choosing the desired columns.

  Kevin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022

  @kthorngren now i get an error on Line 34: Missing semicolon.

  http://live.datatables.net/fuficeve/4/edit
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  That error is not the problem. You are getting this error in the browser's console:

  Uncaught TypeError: this.api is not a function

  You haven't initialized Datatables like the example I linked to. So far your test case is not using Datatables.

  Kevin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022

  If I do this all the search boxes go back to the dropdown selector, what I want is for only one column to be a dropdown selector, another to datapicker the first two columns to be displa: none. While the rest to be a normal search box
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  See this example:
  http://live.datatables.net/fuficeve/6/edit

  I mistakenly put the select-search in the footer. It needs to be in the header for the columns() API.

  Kevin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022

  @kthorngren But now other searches dont work. Work just dropdown
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2022

  Yep, you'll need to add code for the other controls, as

              this.api().columns('.select-search').every( function () {
  

  will only affect those select columns

  Colin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022

  this.api().columns('.select-search').every( function () {
  

  I have add this olumn and work jus .columns('.select-search') column with this class. How to make all searches to work? An example with my code please
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  You need to add the initComplete code from this example. As before you need to change line 12 to contain the appropriate classname, for example:

  this.api().columns( '.text-search' ).every( function () {
  

  Kevin
• uTrx Posts: 24Questions: 6Answers: 0

  January 2022 edited January 2022

  So should i add 2 initComplete code

  both this script

  initComplete: function () {
              this.api().columns('.select-search').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( val ? '^'+val+'$' : '', true, false )
                              .draw();
                      } );
   
                  column.data().unique().sort().each( function ( d, j ) {
                      select.append( '<option value="'+d+'">'+d+'</option>' )
                  } );
              } );
          }
  

  initComplete: function () {
              // Apply the search
              this.api().columns( '.text-search').every( function () {
                  var that = this;
   
                  $( 'input', this.footer() ).on( 'keyup change clear', function () {
                      if ( that.search() !== this.value ) {
                          that
                              .search( this.value )
                              .draw();
                      }
                  } );
              } );
          }
  
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022 Answer ✓

  No. Put both code snippet in one initComplete function.

  Kevin