FixedHeader with Fixed Individual Column Search

kmburke

I currently have the latest version of Datatables working with FixedHeader.

I also want the individual column search to be frozen as well (at the top).

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

        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();

            // Get the column API object
            var column = table.column($(this).attr('data-column'));

            // Toggle the visibility
            column.visible(!column.visible());
        });

        // DataTable
        var table = $('#tblmain').DataTable({
            "scrollCollapse": true,
            "paging": false,
            "dom": 'lfrtip'
        });
        

        var colvis = new $.fn.dataTable.ColVis(table);

        

        // Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

new $.fn.dataTable.FixedHeader(table, { "bottom": true });

---

What is happening is that when i type in anything in the fixed positioned search by column , the search box clears after the first character i type every time. If I type into the original search by column, it types into the fixed version as well and does the search correctly.

I am also getting this error when I type into the fixed Individual column search

"Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?"

Anyone experienced this or have a solution?

DataTables 1.10.4
jquery-1.10.2
FixedHeader 2.1.2

allan

Try:

 new $.fn.dataTable.FixedHeader(table, { "bottom": true, alwaysCloneTop: false });

However, this is very experimental and may not work. The issue is that whenever the table is redrawn the FixedHeader must be updated. To make this reliable it does a full clone, resulting in a new search box.

I need to work on a better solution and long term this just isn't workable.

Allan

kmburke

Allan, thanks for looking into this.

I tried your solution, it did not work. The Fixed Individual column search still erased the content as you type into the box.

Please post a reply in the future if you happen to make a fix for this or find a new solution.