Answers

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

  October 2022

  The filter boxes lack the clean design of the desired result;

  Not sure what you mean. The filter inputs look the same in both screenshots. These aren't controlled by Datatables so you can easily style them with standard CSS.

  There is no possibility of selecting multiple fields (filtering for an "or" condition);

  Using column().search() across multiple columns results in a AND search. You will need to create a search plugin to perform OR searching across the columns. See this example:
  http://live.datatables.net/mucevape/1/edit

  When the same initComplete function is applied to my case, there is no option to remove the applied filters.

  The example you linked ot uses table.columns([0,1,2,3]).... specifying to use columns 0, 1, 2 and 3 for the search inputs. You can define a class on the appropriate th to define which columns to use and use that class as the column-selector.

  However, I desire to have a header row that includes both these sophisticated filters for some columns, and column names for the rest.

  The example you linked has to header rows; one for sorting and the other for searching. This is to stop sorting from occurring when clicking on the search input. Possibly using e.stoppropagation() in the search input event handler would stop the sorting but I'm not sure. You might be able to find a working solution on the forum if you want to do this.

  Kevin
• duzher Posts: 1Questions: 0Answers: 0

  September 6

  @kthorngren the example is too tricky, you added filter to footer, but poster asked to add into header, which make table weird, here: https://live.datatables.net/mucevape/558/edit
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  September 6 edited September 6

  @duzher

  which make table weird,

  Not sure what you mean by weird? Please be more specific if the below doesn't answer your questions.

  Your test case doesn't work because the selectors used in the search plugin aren't finding the select inputs:

    $.fn.dataTable.ext.search.push(
      function( settings, searchData, index, rowData, counter ) {
        var position = $( "#position option:selected" ).text();
        var office = $( "#office option:selected" ).text();
  

  You need to move the id from the footer to the header:

          <thead>
            <tr>
              <th>Name</th>
              <th id="position">Position</th>
              <th id="office">Office</th>
              <th>Age</th>
              <th>Start date</th>
              <th>Salary</th>
            </tr>
          </thead>
  

  Updated test case:
  https://live.datatables.net/mucevape/559/edit

  Kevin