Individual column searching (select inputs) only visible (filtered) rows

Skarsburning

Link to test case:
I have the test case ready but jsbin doesn't save my progress. Can you help me with this?
Debugger code (debug.datatables.net):
The table has scrolling enabled and the header and body parts of the table are misaligned. This is typically cased by the table being initialised when it is hidden. In this case, the table needs to have the columns.adjust() method called on it when the table is made visible. This example shows how that can be done with Bootstrap tabs.
Error messages shown: None
Description of problem:
Hello everyone,
I am having 2 problems:
1. I need column filtering and i follow this one - https://datatables.net/release-datatables/examples/api/multi_filter_select.html but what i need is to only filter visible results. If i apply one of the select filters, i need the rest of the filters to show me possible rows left from the first filter. Simple said - filter only visible rows.
2. My thead is weird. Without me doing anything to activate a fixed header, it is fixed (which is ok with me) but it strethes in width to where i can't get it to show the rest of the column names (and filters). I want it to be aligned with the table and tbody.

I have no problem showing in jsbin a live version (i have the problem there too) but no matter what i do, my jsbin is not saving the progress.

Here is the js code i have to init the table

$(document).ready( function () {
  var oTable = $('#example').DataTable({
    data:  data,
    paging: true,
    pagingType: 'full_numbers',
    scrollY: 600,
    columns: [
      {
        title: 'TimeGenerated',
      },
      { title: 'policy_s' },
      { title: 'ResourceGroup' },
      { title: 'SubscriptionId' },
      { title: 'Rule' },
      { title: 'RuleSet' },
      { title: 'RuleGroup' },
      { title: 'RuleId' },
      { title: 'details_matches_s' },
      {
        title: 'details_msg_s',
        searchable: false,
        orderable: false,
      },
      { title: 'requestUri_s' },
      { title: 'ClientIP' },
      { title: 'Client_IP_Reputation' },
      { title: 'matchVariableName' },
      { title: 'matchVariableNameFiltered' },
      { title: 'matchVariableValue' },
      { title: 'selectorMatchOperator' },
      { title: 'Matched_Malicious_profile' },
      { title: 'Whitelist_suggestion' },
      { title: 'Whitelist' },
      { title: 'trackingReference_s' },
    ],
    initComplete: function () {
      this.api()
      .columns()
      .every(function () {

      var column = this;
      var select = $('<select class="bg-white dark:bg-slate-800 text-black dark:text-white border border-black dark:border-white"><option value=""></option></select>')
      .appendTo($(column.header()))
      .on('change', function () {
      var val = $.fn.dataTable.util.escapeRegex($(this).val());
      column.search(val ? '^' + val + '$' : '', true, false).draw();
      });

      column
      .data()
      .unique()
      .sort()
      // j is  the index o tf the data, d is the actual data
      .each(function (d, j) {

      select.append('<option value="' + d + '">' + d + '</option>');
      //console.log('j is: ' + d);
      });

      });
    }
  });
} );

Skarsburning

Working jsbin link - http://live.datatables.net/upgrade/10129/edit

kthorngren

I have the test case ready but jsbin doesn't save my progress

Are you using http://live.datatables.net/? If so it should automatically save. If you are using JS Bin then I think you just need to click on File in the JS Bin page and choose Save snapshot. Are you getting any errors in the browser's console that might cause the test case to not be saved?

Maybe another option from here would wokr better for you.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

1. Sounds like you are asking for cascading select lists, like this example:
   http://live.datatables.net/gejojiqu/1/edit
2. Are you loading the FixedHeader library but just not using it? I wonder if something else is fixing the header. Without seeing the problem its hard to offer suggestions.

Kevin

Skarsburning

Hey Kevin, thank you for the quick response. 2 minutes before you answered i got the jsbin working. I have the issue there present.

Skarsburning

Hey Kevin, Thanks. I think 1) is solved. Perfect! Any idea about the header? I haven't said Fixedheader true or false anywhere and i am not loading the plugin for it.

kthorngren

Any idea about the header?

You have scrollY enabled. It's not the result of FixedHeader.

I don't think scrollY is intended to be used with paging which you also have enabled. See this example. Having scrollY enabled is also causing horizontal scrolling which doesn't seem correct as it is not scrolling the header. I updated your example to remove paging and remove initComplete to make sure header manipulation isn't the problem and you can see the header doesn't scroll horizontally. @allan will need to look at this:
http://live.datatables.net/nuvuvule/1/edit

Removing scrollY fixes the problem. Are you wanting to use paging or scrolling?

Kevin

kthorngren

Created this thread to discuss the horizontal scroll issues seen in this thread.

Kevin