Column filtering breaks with scrollX enabled - Please mark as answered

oakhamwolf

Hi all,

I'm trying to add colReorder functionality to my table along with column filtering as per the instructions here:

https://datatables.net/extensions/colreorder/examples/initialisation/col_filter.html

The only trouble is that I also need horizontal scrolling but adding scrollX: true in the table definition as below stops the column filtering working:

var table = $('#example').DataTable( {
  colReorder: true,
  // enable scrolling on the X axis
  "scrollX": true
  } );

Does anyone have any idea as to why this is and how I might be able to enable all three (colReorder, scrollX and column filtering)?

JsFiddle here: https://jsfiddle.net/hdjpxsux/

Many thanks for any help in advance.

oakhamwolf

Hi all,

I've managed to answer my own question.

After a bit more searching in the forums I found a post from a year ago with a similar problem. Allan linked to the following page:

https://datatables.net/extensions/fixedcolumns/examples/styling/col_filter.html

and with a slight alteration to my fiddle I have a working solution here:

https://jsfiddle.net/hdjpxsux/2/

This comes down to replacing the code in the link from the original post that performs the search with the following:

    $( table.table().container() ).on( 'keyup', 'tfoot input', function () { // this bit is different
       table
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();
    } );

I am not sure what the difference is between selecting the table using $("#example tfoot input") versus $( table.table().container() ), maybe the latter is casting a wider net to capture the input box in the footer than the former approach. I'll leave that to someone cleverer than me to comment on.

I hope this helps someone as there seemed to be a number of similar issues out there that may benefit.

Cheers.

allan

Hi,

Thanks for posting back - great to hear you got it working.

maybe the latter is casting a wider net to capture the input box in the footer than the former approach

I think its probably related to when the elements are in the document. The second approach only requires the container element to be in the document when that event handler is attach (since its a delegated event handler), and the inputs can be added into the footer at any point after that.

Allan

oakhamwolf

Thanks for the explanation Allan. Much appreciated.
Cheers.