Update select filters based on other

soma1204

I use select filters for my table, have requirement that trying to get the select filters updated when I filter with another filter so they show only what's in their column.

Following test cases suits to me. But unable to make it work for header instead footer and also do you need any JS or CSS files to make it work.

tried same one in my visual studio code, not working.

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

Could you please help me for header and provide any js/css files to be added .

Thanks
Soma

soma1204

seems it's working for me...let me check and get back you.

Thanks for your support always.

Thanks'
Soma

soma1204

http://live.datatables.net/xehimatu/621/edit

i used the header, when i select filter , it is flickering. same i don't see when used footer.
Could you please help how to stop flickering/flashing.

Thanks
Soma

tangerine

Your "flickering is actually a sort, because you have combined filtering and sorting in the same td.
You need to look at "complex headers"
https://datatables.net/examples/basic_init/complex_header.html
and orderCellsTop.
https://datatables.net/reference/option/orderCellsTop

soma1204

Thanks for quick response.
I used 2 headers, to stop flickering, so can we move Sorting to first header and filter with default text-ALL instead blank.
could you pleas help on above requirement if feasible.

Thanks
Soma

soma1204

http://live.datatables.net/xehimatu/621/edit

soma1204

If i use following option, both filter and sort placed in top.

"bSortCellsTop": true,

Need help on separating by writing 2nd row of header (.appendTo( $(column.header()).empty() ).

Thanks
Soma

kthorngren

Maybe this example will help:
http://live.datatables.net/saqozowe/2/edit

Kevin

soma1204

Filter is not updating. Tried as follows, no luck

// var select = $(table.column( idx ).header()).find('select');
var select = $("#example thead tr:eq(1) th").eq(column( idx )).find('select');

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

Thanks
Soma

kthorngren

Here is an example using cascading selects.
http://live.datatables.net/cusologu/7/edit

Kevin

soma1204

Getting following error. Do i. need to add any script files for this.

api.columns is not a function
at createDropdowns (main.js:1437:6)
at S.fn.init.initComplete (main.js:1349:7)
at datatables.min.js:121:491
at Function.map (datatables.min.js:14:3536)
at F (datatables.min.js:121:438)
at Pa (datatables.min.js:94:100)
at Ba (datatables.min.js:93:491)
at f (datatables.min.js:138:441)
at HTMLTableElement.<anonymous> (datatables.min.js:139:15)

kthorngren

Do i. need to add any script files for this.

No.

The example I linked to works. Sounds like you aren't passing the Datatable API into the createDropdowns() function. Look at the initComplete function of the example I linked.

Kevin`

soma1204

No errors, but filters missing. Same updated in following test case.

http://live.datatables.net/cusologu/7/edit

kthorngren

Looks like this particular example only applies the search inputs to the columns that are searchable. It has this:

        columnDefs: [
            {
                searchable: false,
                targets: [0, 4]
            }
        ],

So the createDropdowns() function won't apply search inputs to those two columns because of this if statement:

function createDropdowns(api) {
    api.columns().every(function() {
        if (this.searchable()) {

searchable()) calls the plugin at the top of the script.

Kevin

soma1204

it was not saved.. here is the logic.
var table = $('#example').DataTable({
dom: 'Bfrtip',
"bSortCellsTop": true,
lengthChange: false,
"pageLength": 10,
retrieve: true,
"lengthMenu": [[5, 10, 15, 20, 25, 50, 100, -1], [5, 10, 15, 20, 25, 50, 100, "All"]],

    buttons: [
                'pageLength', 'colvis',
                {
                    extend: 'collection',
                    text: 'Export',
                    autoClose: true,

                    buttons: [
                                { text: 'Copy', extend: 'copyHtml5'},
                                { text: 'Excel', extend: 'excelHtml5',exportOptions: {columns: ':visible'}},
                                { text: 'CSV', extend: 'csvHtml5'},
                                { text: 'PDF', extend: 'pdfHtml5'},
                                { text: 'Print', extend: 'print' }

                             ],
                          fade: true,
                }
             ]
              "columnDefs": [
              {
                  "targets": [2,3,6,7,13],
                  "visible": false
                   "searchable": false
              }
            ]

            ,
            initComplete: function (settings, json) { 
                createDropdowns(this.api()); 
                $("#tblDetailsRisk").wrap("<div style='overflow:auto; width:100%; position:relative;'></div>");            

            }



});

soma1204

if one works , other not working.

Can we modify following logic to write to $('thead tr:eq(1)) instead header.
if this works, it would be good with out changing my code.

table.on('draw', function () {
table.columns().indexes().each( function ( idx ) {
var select = $(table.column( idx ).header()).find('select');

  if ( select.val() === '' ) {
    select
      .empty()
      .append('<option value=""/>');

    table.column(idx, {search:'applied'}).data().unique().sort().each( function ( d, j ) {
      select.append( '<option value="'+d+'">'+d+'</option>' );
    } );
  }
} );

} );

colin

Could you update your test case to reflect the current state of the code, please. That will help ensure we're all looking at the same thing,

Colin

soma1204

Hi Collin,

Here is the test case i need help on update select filters logic.

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

Found the update filters logic works here-- http://live.datatables.net/xehimatu/1/editb
problme here is the update select filter logic write to either footer or header.

need it write to $("#example thead tr:eq(1) th"). Could please help here.

Thanks
Soma

soma1204

And also it write select filters for all columns, is there any chance we can avoid/remove filter to particular columns based on name instead index.

Thanks
Soma

soma1204

used footer to fix the select filter using following code,
https://jsfiddle.net/yashsoni789/ehhfsrfq/760/

However still need some help on remove filter for particular column based on column name instead index.

Thanks
Soma

colin

However still need some help on remove filter for particular column based on column name instead index.

You could check the column by getting the text in the header by using column().header() - something like :

$(table.column( idx ).header()).html()

If that doesn't help, can you explain more, please, what you're looking for,

Colin

soma1204

i have table with 10 columns and one column name "Action" that has only check box, so no filter required.
when i add select filters, it is adding all columns including "checkbox column"
So can we avoid this particular column when applying filters.

Please let me know if required the rest case for this.

Thanks
Soma

kthorngren

Use a column-selector such as a class or array of column numbers to apply the select filters to. Like this:
https://jsfiddle.net/q3kjoyf0/

Kevin

soma1204

Thanks Kevin for response. Since am using hiding columns initially and showing later , array of index is not constant. Is there any way to avoid filter based on column name instead index array.

Thanks
Soma

kthorngren

Take a look at the column-selector docs I linked to. You can use a classname or column name (columns.name) and other options. You can use an array of any of these options.

Kevin

soma1204

Thanks Kevin for update.

Thanks
Soma