Individual column filtering doesnt work when using ColReorder

alexandervj

I'm using ColReorder extension and noticed that individual column filtering doesnt work after reordering columns. It will work when you first load the page but after you reorder columns it doesnt find any records that match. Does anyone know why this happens or how to fix it? A copy of my page can be seen with the error here...
http://apps.trilumina-temp.com/apps/database/lots

Thanks

alexandervj

I just noticed that only the column you drag out of place will not filter correctly. Once you drag it back where it was originally it will filter as normal. Not sure if this will help in diagnosing the issue.

daniel_r

you can try my yadcf plugin for filtering it support ColReorder out of the box

AllanCochrane

The footer's event handlers don't get changed, you may want to remove and reattach the handler after the column reorder completes

alexandervj

Thanks for the replies!

Thanks Allan, I'm still a JQuery noob, can you go a little more in depth?

AllanCochrane

Around line 1157 of /apps/database/lots in the JavaScript any input elements with the CSS class filtr have a keyup handler that causes the search functionality to be invoked:

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

I think it is this that is the problem, the elements are changed by the column reorder plugin but these event handlers refer to the old column, hence you can search for values in the column in the search box corresponding to where the column was before it was reordered.

You need to remove and reapply the 'keyup change' handler, probably using the ColReorder's reorderCallback feature (see http://datatables.net/extensions/colreorder/options)

alexandervj

Thanks again! I'll give that a try