Search don't work after use fixedColumn

chipster91

Hello,
I use the search input in my table. Recently i add the fixedColumn plugin, then search dosen't work on fixedColumn.
Search fields are functioning in the background.
Help please.
(if possible in french...)

jr42.gordon

Est-ce que vous utilisez l'entrée de recherche pour chaque colonne individuelle ?

Please note this was done with Google Translator :)

chipster91

Yes, I build my table via a PHP function (for dynamic) and then I apply the javascript plugin.

jQuery(nomTable +' tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

        } );

var oTable = jQuery(nomTable).DataTable(
    {
//Options
});

new $.fn.dataTable.FixedColumns( oTable, { 
         leftColumns: nbCol                  ,
         heightMatch: 'none'
    } );

oTable.columns().every( function () {
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );

I have used the plugin, I do not know why the search does not work this time. CSS can be a problem.

Thanks

Google Translator is practical :D

jr42.gordon

Ok so for fixed columns I found a little trick since it adds a third th level. this.footer or this.header uses the second th level.

Do this only for the columns that are fixed. Give them a special class name designation.

dt.columns('.fixed_col').every( function () {
            var column = this,
                  class = column.header().classList[0]; <-- should be columns class description
            var select = $('<select><option value=""></option></select>')
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            select.html(templates.basic_input, Array.create(column.data().unique()));
            select.appendTo( $(nomTable +' tfoot th.'+class).empty() );   <--- this is the trick
        } );

There may very well be a better way than this and i hope someone points it out.

chipster91

Hello,
thank you for the answer, but I have not managed to implement the solution. After research, when I apply my filter and I fixed column, the "scrollx" invalid parameter search (only on the frozen column).
By cons, if I select the second cell research, and I do alt + tab, the search works (I think I get the input of the column that is frozen in the background).
With old datatable and tabletools plugin, everything works ...
sorry for my late answer

allan

We'd need a test case showing the issue to be able to debug it please.

Allan

jr42.gordon

@Allan here it is http://live.datatables.net/gucatexo/1/edit

chipster91

Thank you for the link. This is exactly my problem: as soon as the first column is fixed, the filter (here in the dropdown list) no longer works ...
Very practical to test its modifications directly!

allan

Thanks for the link! I'm slightly surprised that is doesn't work in a very basic sense - the change event isn't being called at all. When FixedColumns clones the footer element it does so with events and data ($().clone()) so the event handler should be present in the cloned element as well.

You can see that here.

To be honest i'm not immediately sure why that isn't working. It is possible it might need slightly different initialisation like in the example I linked to, but that would need a bit of experimentation. I'll try to make some time in the next few weeks, but I'm afraid I've got a massive support backlog atm (nevermind actually doing actual development work). I've bookmarked the discussion to make sure I come back to it.

Allan

jr42.gordon

@allan What I have found is that in normal DataTables, there are two th elements (using jQuery selector to verify). But when using Fixed Header a third is added. I am wondering if the event handler is still tied to the second level?

Gunios

My search did not work after I began to use proxy server. Don't know how that's happening, but it was. However, maybe it was just my ISP.