Answers

• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  November 2018 edited November 2018

  You can use the column-selector to choose the desired columns. Maybe use a class or an array of columns.

  Kevin
• Mert1296 Posts: 43Questions: 7Answers: 0

  November 2018

  Ok I used this but it didn't work.. I made an extra row in my thead to put the select fields into my Header and gave the rows which I want to search by options the classname "head".

  initComplete: function () {
                              var columns = table.columns('.head');
                              this.api().columns(columns)( function () {
                                  var column = this;
                                  var select = $('<select><option value=""></option></select>')
                                      .appendTo( $("#table thead tr:eq(1) th").eq(column.index()).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>' );
                                  } );
                              } );
                          },
  
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  November 2018

  Instead of this:

                              var columns = table.columns('.head');
                              this.api().columns(columns)( function () {
  

  Try this:

                              this.api().columns('.head')( function () {
  

  The var columns contains an API instance which you are trying to pass to columns() in the second line. I don't think this is supported.

  Kevin
• Mert1296 Posts: 43Questions: 7Answers: 0

  November 2018

  Tried it, doesn't work. When I'm loading the website my DataTable doesn't load..
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  November 2018

  Look at the browser's console for errors.

  Kevin
• Mert1296 Posts: 43Questions: 7Answers: 0

  November 2018

  So I made a test case here

  http://live.datatables.net/saqozowe/69/edit

  and the console shows some Errors..
• Mert1296 Posts: 43Questions: 7Answers: 0

  November 2018

  I'm also trying to make the select Inputs without the 2nd row in my thead. Do you know if ist possible like this?

   var select = $('<select><option value=""></option></select>')
                                      .appendTo( $("#table thead tr th").eq(column.index()).empty() )
  
  
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  November 2018

  Thanks for the test case. You had two issues. You didn't have the word every in this line:
  this.api().columns('.head').every( function () {

  This was causing the error message.

  The column class needs to be placed in the top header row since you have orderCellsTop: true,. This is the header row Datatables uses for its functions.

  Here is the updated working example with the above changes:
  http://live.datatables.net/ruyezofa/1/edit

  Kevin
• Mert1296 Posts: 43Questions: 7Answers: 0

  November 2018

  Ok now my select boxex appear! Thank you! But now I have the problem, that the selects are under my thead, means I see the two headers und under them are my select Inputs.. Don't know why
• Mert1296 Posts: 43Questions: 7Answers: 0

  November 2018

  And also when I want to search via select, the select-box disappears after I click on a value..
• Mert1296 Posts: 43Questions: 7Answers: 0

  November 2018

  Ok, found out, that when I'm removing scrollX:true and ScrollY:"100%", that it works propperly. but I need the scrolling