Column filter at the top (head:before/head:after) is distorted by sorting if columns are dinamically generated

[GoogleCodeExporter]

Column filtering at the top for a table is somehow important but we having 
problems since using head:before/head:after the input fields are distorted by a 
sorting behaviour.

In case tables are dynamically generated using aaData, aoColumns normally the 
strcture is not know before the .dataTable() routine used to generate its THEAD 
TR. In order to be able to use columnFilter one needs either an additional 
THEAD TR (for the top) or TFOOT TR (for the bottom).

One method to create an additional THEAD or TFOOT is by cloning the existing 
THEAD TR during fnInitComplete.

<pre>
var oTable = $(this).find('.datatables').dataTable( {
...
'fnInitComplete' : function () {
$this.find("thead tr").clone().appendTo($this.find("thead")).addClass("filter") 
;
 },
});
</pre>

and than apply columnFilter with: 

<pre>
oTable.columnFilter({ sPlaceHolder: "head:before",
 aoColumns: ... 
 }); 
};
</pre>

Applying this method works but no matter which option (head:before/head:after) 
one is using  the input fields always contain the sorting parameter which means 
that every time one puts in a search string the column automatically gets 
sorted (which is somehow disturbing and irritating).  

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

PHP 5.3 

DataTables 1.9 + columnFilter 1.4.7

We would be happy with any workable solution to get the column filter at the 
top for cases the column structure is not known before the .dataTable() runs 
its routines which is mainly the case where data is loaded via Ajax or other 
server-side processing methods.

Cheers

Original issue reported on code.google.com by jamesin....@gmail.com on 26 Feb 2012 at 2:39

[GoogleCodeExporter]

Hi,

I'm not sure why you are dynamically generating heading row. Could you put is 
directly in the THEAD two TR elements. See examples on the 
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html 
and 
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/numberRange.html

Jovan

Original comment by joc...@gmail.com on 26 Feb 2012 at 8:24

[GoogleCodeExporter]

Thanks for your response

The above examples are all considering a fixed THEAD TR structure and in those 
cases it is clear where the correct position should be but when building a 
table through Ajax, you normally don't know the structure (this is where you 
have aaData, aoColumns, aoColumnDefs to inform DataTables on-the-fly about the 
structure)therefore you can't really put a fixed structure between THEAD TR in 
before hand.

I tried to explain that while using Ajax the only proficient way to create 
additional THEAD or TFOOT elements is to clone the existing THEAD TR element 
(which was created by DataTables) but in those cases all class and sorting 
properties are copied as well. 

I tried to look at 
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/serverSide.html 
but the problem their is that the THEAD and TFOOT are already rendered within 
the HTML itself before the actual Ajax is processed meaning it also does not 
solve the problem for cases where no pre-defined structures exists.

As above explained fnInitComplete and .clone() works just fine for TFOOT but 
considering THEAD (head:after/head:before) it seems their not yet a sufficient 
procedure in place to solve this problem.

We also looked at 
http://www.datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extra
s/ColumnFilterWidgets/ which uses sDOM to place the selection box at the top of 
a table but this plug-in works with drop-downs which is a problem for large 
data sets. 

Site remark 

Considering that sorting and filtering at the same time is somewhat 
contra-productive maybe it would be nice if columenFilter by default deactivate 
any sorting that is assigned to the particular field used as input filter.

Thanks

Original comment by jamesin....@gmail.com on 27 Feb 2012 at 2:13

[GoogleCodeExporter]

Hi,

Could you try to use this version: 
http://jquery-datatables-column-filter.googlecode.com/svn-history/r62/trunk/medi
a/js/jquery.dataTables.columnFilter.js

This version used thead tr:last selector for the selection of rows but this was 
a problem in other cases (e.g. it does not works with fixed header, scroller, 
column filter, etc). After this version instead of the plain JQuery selector is 
used DataTables THead property to determine where heading row is placed.

However maybe this version that do not works with other plugin will work in 
your case.

Otherwise you will need to put filter in the footer row. Maybe you can put 
filter in the footer row and then detach footer row and inject it as a 
duplicate row in the heading row?

Jovan

Original comment by joc...@gmail.com on 1 Mar 2012 at 3:14

• Changed title: Column filter at the top (head:before/head:after) is distorted by sorting if columns are dinamically generated

[GoogleCodeExporter]

Solution in Comment 3  worked for me!
I was having the same problem.

Original comment by stefan.p...@gmail.com on 18 Dec 2012 at 7:29

[GoogleCodeExporter]

Thanks a lot for this topic and comment 3 
What I wanted to have was 2 rows in the header
- first row with columnnames and sorting
- second row with filtering (appendTo)

1. I created a tfoot element in my html table
2. Set property sPlaceHolder for columnfilter to "head:after"
3. Changed following condition in columnfilter.js for head:after

        if (properties.sPlaceHolder == "head:after") {
                var tr = $("tr:first", oTable.fnSettings().nTFoot).detach();
                //tr.appendTo($(oTable.fnSettings().nTHead));
                    tr.appendTo($(oTable.fnSettings().nTHead));
                    //tr.appendTo($("thead", oTable));
                    aoFilterCells = oTable.fnSettings().aoFooter[0];

                sFilterRow = "tr:last";
                oHost = oTable.fnSettings().nTHead;

            }

Original comment by Florian....@googlemail.com on 23 May 2013 at 7:52