Column filter does not work with the sScrollX/sScrollY settings about jquery-datatables-column-filter HOT 11 CLOSED

You are right, plugin is not compatible with sScroll settings. I see what is 
happening -  filtering boxes are still in the footer where this addin has 
placed them, but DataTables creates fake header/footer in the separate tables 
and hides original ones where filtering is placed. Therefore it looks like 
there is no filtering at all. You cna see this in the FireBug there are 
separate tables in the schollhead/schrol foot tables.

I will check how this cnabe fixed and is it possible at all because I don't 
know would I have control over the table if I nject filtes in the separate 
table that is used as fake footer.

Jovan, check if it's possible with latest datatables release esp. on the 
infinite scrolling capability. That's awesome for displaying/simulating rapid 
scrolls of thousands of rows.

No, it is still the same problem.
In any verison of the dataTables it creates fake header/footer in the separate 
table and I cannot access it, nor I cannot access the original table data from 
the fake footer.

If you really have scroll bar you will need to create custom filter. I will 
check whether this can be implemented somehow in column filter but currently I 
don't see some easy fix.

Eventually this solves your problem:

use fnDrawCallback of datatable:

, "fnDrawCallback": function () {

//don't redo if controls already exist; take care, possibly buggy
                    if ($("#table2_wrapper div.dataTables_scrollHeadInner th input").size() > 0)
                        return;

//backup old focus
                    var focusedElementId = $("*:focus").attr("id");

                    //read old input field values
                    var oldInputs = $("#table2_wrapper div.dataTables_scrollHeadInner input");
                    var oldValues = new Array(oldInputs.size());

                    oldInputs.each(function (i, v) {
                        oldValues[i] = $(this).val();
                    });

                    //(re)create column filter
                    $("#table2").dataTable().columnFilter({
                        iFixedLeftColumns: 2,
                        rootElement: "#table2_wrapper div.dataTables_scrollHeadInner ",
                        sPlaceHolder: "head:after",
                        sRangeFormat: "From{from} to {to}",
                        aoColumns:
                            [
                                { type: "text" }
                                , null
                                , { type: "number-range" }
                                , { type: "number-range" }
// ... whatever you like
                            ]
                    });

                    //restore old input field values
                    var newInputs = $("#table2_wrapper div.dataTables_scrollHeadInner input");

                    newInputs.each(function (i, v) {
                        $(this).val(oldValues[i]);
                    });
//give focus back to the input field that had focus before
                    if (focusedElementId != null)
                        $("#" + focusedElementId).focus();

//stop event bubbling for the input controls if sorting is switched on
                    $("#table2_wrapper div.dataTables_scrollHeadInner thead input").click(function (event) { event.stopPropagation(); this.focus(); });
                }


Furthermore, I've attached a slightly customized version of the latest column 
filter plugin. The important change is that you can specify a root element 
which is used as starting point in the DOM to look for the header element (see 
code above for an example).

HTH

I'm not sure that this is exactly the correct solution, but its certainly part 
of it :-). DataTables holds a reference to the THEAD and TFOOT elements in its 
settings object. These are nThead and nTfoot - these will refer to the correct 
elements for scrolling and non-scrolling tables. Thus what you can do is change 
the line

            $(sFilterRow + " th", oTable).each(function (index) {

to

            var settings = oTable.fnSettings();
            var host = (sFilterRow.indexOf('tfoot')!==-1) ?
                settings.nTfoot :
                settings.nThead;
            $(sFilterRow + " th", host).each(function (index) {

Hi,

I think that this problem is solved thanks to Allan's example. You can see 
results on 
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/ScrollInfinite.h
tml 

Thanks,
Jovan

Excellent work. Can you please update this in 
"jquery.dataTables.columnFilter.js" file of the column-filter download 
(http://code.google.com/p/jquery-datatables-column-filter/downloads/list)

This seems to be an issue with the latest version, I have added scrolly to an 
existing grid with filters and the filters disappear. 

DataTables 1.9.4 
ColumnFilter 1.0.2 

Also when using these later versions it seems that the sort toggles have moved 
up to the filter row.

Sorry I meant Column Filter 0.9, 1.0.2 was the release of the nuget package.

It seems it is fixed with 1.5.0 but this isn't on the downloads page. you have 
to grab it from the trunk.

I am having a similar problem.

Using Jquery 2.0.3, dataTable 1.9.4 and COlumnFilter 1.0.2.

When adding sScrollX, I see the filters, but when typing in to it, I get a 
Jquery error "unable to get nodetype of undefined or null reference". Is there 
a different version of column filter that I can use ?