Column filter does not work with the sScrollX/sScrollY settings

[GoogleCodeExporter]

What steps will reproduce the problem?
1. include sScrollY argument 

What is the expected output? What do you see instead?
sScrollY works (produce a scrollbar) but column filter boxes becomes text (not 
entry boxes).

What version of the product are you using? On what operating system?

latest version taken last night.  

Please provide any additional information below.

sScrollY is essential for infinite scrolling.

Original issue reported on code.google.com by yfn...@gmail.com on 14 Jun 2011 at 2:35

[GoogleCodeExporter]

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.

Original comment by joc...@gmail.com on 14 Jun 2011 at 7:24

• Changed title: Column filter does not work with the sScrollX/sScrollY settings
• Changed state: Accepted

[GoogleCodeExporter]

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.

Original comment by yfn...@gmail.com on 14 Jun 2011 at 4:00

[GoogleCodeExporter]

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.

Original comment by joc...@gmail.com on 14 Jun 2011 at 7:32

[GoogleCodeExporter]

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

Original comment by reinberg...@googlemail.com on 4 Jul 2011 at 2:08

Attachments:

• jquery.dataTables.columnFilter.js

[GoogleCodeExporter]

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) {

Original comment by allan.ja...@gmail.com on 23 Dec 2011 at 10:53

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 13 Feb 2012 at 3:24

• Changed state: Fixed

[GoogleCodeExporter]

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)

Original comment by qaiser...@gmail.com on 17 Feb 2012 at 7:00

Attachments:

• jquery.dataTables.columnFilter.js

[GoogleCodeExporter]

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.

Original comment by jonathan...@gmail.com on 10 Feb 2013 at 9:07

[GoogleCodeExporter]

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

Original comment by jonathan...@gmail.com on 10 Feb 2013 at 9:35

[GoogleCodeExporter]

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.

Original comment by jonathan...@gmail.com on 10 Feb 2013 at 10:52

[GoogleCodeExporter]

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 ?

Original comment by ra...@mail.usf.edu on 8 Oct 2013 at 5:01