Filters in the thead become disabled when ColReorder is enabled?

DTBLs

Hi,

dom: 'Rlfrtip' - removing the R enables the Filters.

I put the code I'm using here - http://live.datatables.net/kimuniza/1/edit?html,css,js,output

I tweaked the stock example found here http://datatables.net/release-datatables/extensions/ColReorder/examples/col_filter.html

Thanks

If this helps, I'm pasting the script as well:

'''js

    // taken from http://datatables.net/release-datatables/extensions/ColReorder/examples/col_filter.html
    $(document).ready(function () {
        // Setup - add a text input to each header cell
        $('#example thead th').each(function () {
            var title = $('#example thead th').eq($(this).index()).text();
            $(this).html(title + '<input type="text" placeholder="Search ' + title + '" onclick="stopPropagation(event)" />');
        });

        // DataTable
        var table = $('#example').DataTable({
            dom: 'Rlfrtip'
        });

        // Apply the filter
        $("#example thead input").on('keyup change', function () {
            table
        .column($(this).parent().index() + ':visible')
        .search(this.value)
        .draw();
        });
    });

    //04.17.2015 to stop the textboxes from triggering the sort added this code
    //https://datatables.net/forums/discussion/20272/how-to-put-individual-column-filter-inputs-at-top-of-columns
    function stopPropagation(evt) {
        if (evt.stopPropagation !== undefined) {
            evt.stopPropagation();

        } else {
            evt.cancelBubble = true;
        }
    }

'''

DTBLs

Excellent feedback from Allan:

"The issue you are seeing with the filters not working when ColReorder is enabled is basically due to the same issue as the preventDefault code in your example! ColReorder has a preventDefault on mousedown which is stopping the text box from being selected.

I think probably the best fix would be to have a second row in the header that will contains your search boxes: http://live.datatables.net/kimuniza/2/edit . Then ColReorder can do what it needs on the top row (orderCellsTop used), while the filtering occurs on the second row."

I would follow Allan's advice but for I'm using an unbound asp.net gridview to generate the header and rest of the table markup. That control isn't the nicest when trying to add an additional row to the header.

I modified the js to include the onmousedown and it appears to be working well. http://live.datatables.net/kimuniza/4/edit

Thanks again Allan!!!

allan

Welcome :-).

edit:

That control isn't the nicest when trying to add an additional row to the header.

Could you use a line of jQuery immediately before the DataTables initialisation to clone the existing header row and insert it? Might save some grief on the backend!

DTBLs

Allan, thank you again!