column filtering with reordering and hidden columns - What is the ACTUAL solution?

thegamechangerpro

Ive seen this asked in the past but I can't find anything that actually works in application (even in the example fiddles).
How do you get column filtering to work (ideally in the footer) after a reorder? It always filters based on original column order and not on current column index. I understand transpose can be used, but how?

Also, is there an example anywhere to remove one of the search inputs from a column (for example a check box or button column, or child opener).

thegamechangerpro

Is using current an option?

var table = $('#myTable').DataTable();
table.column( 3, {order:'current'} ).data();

kthorngren

How do you get column filtering to work (ideally in the footer) after a reorder?

See this ColReorder example with column searching.

is there an example anywhere to remove one of the search inputs from a column

One option is to assign a class to the columns you want to apply the filters to and add that class to the selector used to build the inputs. Maybe something like this from the linked example:

    $('#example tfoot th .my_filter').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

If you still need help then please provide a simple test case showing what you are trying so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

thegamechangerpro

I found these earlier and tried to apply them, but neither work.
Is it because I am appending my footer?

https://jsfiddle.net/ym7bL1pa/

allan

You mean the search doesn't work after a column reorder?

If so, that is because you need to update your column index for the new location. One way to do that is to unbind your input listeners on the column-reorder event and then rebind them with the new indexes.

The alternative would be to use colReorder.transpose() to convert the original index that you bound to, into the new position (i.e. toCurrent).

The second option is probably the easiest.

Allan

thegamechangerpro

I will have to do some more research for using the transpose correctly.

Any thoughts on why adding the "filter" class isn't working? - when using "className" in my columnDefs, it doesn't add anything back in.

kthorngren

Any thoughts on why adding the "filter" class isn't working? - when using "className" in my columnDefs, it doesn't add anything back in.

The loop creating the input elements in the tfoot occurs before Datatables is initialized. So if you are trying to use the filter class there it hasn’t been applied yet. But its hard to say without seeing what you are trying to do. You might need to apply the class names directly on the thead or -tag tfoot` as appropriate.

I will have to do some more research for using the transpose correctly.

I think you need to create the search event handlers before using colReorder.order() to initially change the column order. Otherwise the column indexes will be messed up from the start. For example the Sort column is originally index 3 but after executing

table.colReorder.order( [ 0, 20, 21, 22, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] );

it is 6 when you create the event handlers:

   // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );

If you try using colReorder.transpose() it will convert index 6 to 9 which 6 is the incorrect original index. colReorder.order() after creating the event handlers and it will work:
https://jsfiddle.net/b8aqh40y/

Kevin