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

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

thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

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).

This question has accepted answers - jump to:

Answers

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    Is using current an option?

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited November 2022

    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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

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

    https://jsfiddle.net/ym7bL1pa/

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited November 2022 Answer ✓

    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

Sign In or Register to comment.