DataTables Column Filter add-on for the data table

jocapc · May 2011

Hi,

I have created one add-on for the DataTable that might be usefull for you. I called it Column Filter plugin and there I have added lot of individual column filtering functionalities found on the data tables site/forum.
I think that if you are using individual column filtering this plugin can help you because it is realy easy to use it. As an example, to apply default filtering you will need just a following line of code:

[code]
$("#dataTableId").dataTable().columnFilter();
[/code]

This code adds simple text filters in the footer of the table.
There are lot of configuration parameters you can send to the add-on please see more exmples on the http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html .

Regards,
Jovan

nm_alex · May 2011

Thumbs up! Both!

0a0d0s0 · May 2011

This is really great. : )

Is there a way to position the select box filter anywhere on the page? Or is it limited to just the footer or the head area, i.e. sPlaceHolder: "head:before"

Thanks!

emerald · May 2011

hi,
thumps up for this great plugin, indeed very useful :)

jocapc · May 2011

Hi,

Currently filters can be placed only in the header/footer. I'm trying to find some generic way to place them anywhere on the page but I still cannot find some generic-enough way popup, existing div, autogenerated controls or attaching handler to the existing elements, etc). At them moment if you need realy custom filtering you will need to use something like a http://www.datatables.net/examples/api/regex.html.

I'm glad that you like it.

Thanks,
Jovan

Ameena · June 2011

I would like to use fixed footer with this. Is it possible?

jocapc · June 2011

Hi,

I tried it once with a FixedHeader and it worked fine, but I can not guarantee the it will work in all cases.

Regards,
Jovan

Ameena · June 2011

I tried with following initialization but it doesn't work. Please help me
[code]var oTable = $('#table1').dataTable({
"bFilter": false,
"sScrollY": "400px",
"bPaginate": false,
"bInfo" : false
} );
new FixedHeader( oTable, { "bottom": true } );
oTable.columnFilter({aoColumns: [ null,{ type: "text"},{ type: "select", values: [ 'Power on Server'] },
{ type: "select", values: [ 'Complete','Failed','Incomplete'] },
{ type: "text"},{ type: "text" },{ type: "text" }
]

});
[/code]

jocapc · June 2011

Hi,

You can see similar example on the http://jquery-datatables-column-filter.googlecode.com/svn/trunk/fixedHeader.html. I'm using the latest version of the FixedHeader from the original site. Only change I have made is commenting out scroll parameter because I got an error from FixedHeader ("FixedHeader 2 is not supported with DataTables' scrolling mode at this time"). However everything else works fine (FF, Chrome and IE).

Regards,
Jovan

Ameena · June 2011

Thanks for this. I would like to use "bFilter": false and "bInfo" : false along with this plugin add on and fixed header. Also i would like to add an option All to display all select options. Could you please help me on this?
I used following initialization which doesn't work.
[code]var oTable = $('#table1').dataTable({
"bFilter": false,
"bInfo" : false
} ).columnFilter({aoColumns: [ null,{ type: "text"},{ type: "select", values: [ 'All Tasks','Power on Server'] },
{ type: "select", values: [ 'All Status','Complete','Failed','Incomplete'] },
{ type: "text"},{ type: "text"},{ type: "text"}
]

});
new FixedHeader( oTable, { "bottom": true } );
[/code]

jocapc · June 2011

Hi Ameena,

Could you please post this problem on the http://code.google.com/p/jquery-datatables-column-filter/issues/list this is issue list for the column filter add-in? Also, I would need error description, online example or even zipped example so I can try it.

Thanks,
Jovan

Ameena · June 2011

Thanks Jovan,

This works with sDom feature. Could you please help me to get sScrollY working along with this plugin. .I'm not sure why sScrollY aotuomatically adds a horizontal scrollbar too in the table while using this plugin. Please help me.
I'm using following initialization
[code]var oTable = $('#table1').dataTable({"sDom": '<"top"i>rt<"bottom"lp><"clear">'
,"bInfo": false,"bPaginate": false,"bAutoWidth": false,"sScrollY":"400px"
}).columnFilter({aoColumns: [ null,{ type: "text"},{ type: "select", values: [ 'All Tasks','Power on Server'] },
{ type: "select", values: [ 'All Status','Complete','Failed','Incomplete'] },
{ type: "text"},{ type: "text"},{ type: "text"}
]

});

new FixedHeader( oTable, { "bottom": true } );[/code]

jocapc · June 2011

Hi,

Current column filter is not 100% compatible with dataTables. It does not work with scroll feature see http://code.google.com/p/jquery-datatables-column-filter/issues/detail?id=6 , and it does not save the state into the cookie. These are not minor fixes and I will try to fix them in the next releases.
Currently if you need filtering functionality with scrolling you will need to implement custom solution probably adjust the http://www.datatables.net/release-datatables/examples/api/multi_filter.html example.

Regards,
Jovan

matis · September 2011

Hi,
When I place 2 tables on the page and start filtering first one it takes action on the second one. How can I fix this? It's very important.

Thanks,
Mateusz

anag · October 2011

Hi is it possible to re-position the filter select menu within a div on the page if so would you be able to show in a jsfiddle?

Thanks

sprockett · March 2012

hi there, i have multiple tables on the same page.

For some reason, all the filters get applied on the last table only (ie. if i edit the filter input box for the first table, the last table gets filtered instead of the first table).

Which part of the code should I be editing to fix this?

thanks!

allan · March 2012

Hi sprockett,

How are you initialising your tables? If you are doing something like $("table").dataTable().columnFilter(); then it might be that you need to change it to something like this:

[code]
$("table").each( function () {
$(this).dataTable().columnFilter();
} );
[/code]

The reason for this is that DataTables does not return a jQuery object, so the idea of chaining jQuery methods isn't 100% valid for DataTables.

Allan

sprockett · March 2012

Hi Allan,

Thanks for your reply... I am explicitly initialising the tables via a function:
[code]
function config_data(id){
var oTable;
oTable = $('#'+id).dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
"sDom": 'RfClrtip',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": fields,
"bAutoWidth": false,
"bInfo": true

oTable.columnFilter({
aoColumns: fieldsfilter //fieldsfilter is an earlier defined array of column filter options for each column
})

} );
}
[/code]

This appears to be correct?

Thanks!

allan · March 2012

Almost - it looks to me that you would be getting a JS syntax error if you used that (have a look at the Firebug / Inspector console). Try this:

[code]
function config_data(id){
var oTable = $('#'+id).dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
"sDom": 'RfClrtip',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": fields,
"bAutoWidth": false,
"bInfo": true
} );

oTable.columnFilter({
aoColumns: fieldsfilter //fieldsfilter is an earlier defined array of column filter options for each column
});
}
[/code]

mihir786 · April 2012

Hi ,

I have used it in Form as well as in table header.

It is working perfectly fine, But the problem is it doesn't help to search SPECIAL Character like ($,+,). I also made changes to existing JS file to make exact filter the reason was i wanted to be exact search.

I am using dropdownlist as filter option.

Could any one help me on this?

jpsoft · April 2012

I open a discussion here
http://datatables.net/forums/discussion/9559/columnfilter-works-only-on-last-datatable-when-created-in-a-function#Item_1

vannkorn · May 2012

Dear all,

I am using a custom filter by using external form, like in this link:
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html
However, I can't create my custom filter field even I try adding similar code to the index.html page

here is my additional filter column:
[code]

[/code]

and I add it to my jQuery function like this:

[code] $(document).ready( function () {
$('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
})
.columnFilter({aoColumns:[
{ type:"select", sSelector: "#renderingEngineFilter" },
{ sSelector: "#browserFilter" },
{ sSelector: "#platformsFilter" },
{ type:"number-range", sSelector: "#engineVersionFilter" },
{ type:"select", values : ["A", "B", "C", "X"], sSelector: "#cssGradeFilter" },
{ type:"select", values : ["vannkorn", "ravy", "rayuth"], sSelector: "#customFilter"} //here is where I add it
]}
);
} );[/code]

Unfortunately, It does not show this custom field. Please help.

Phoenixzero · August 2012

[quote]Ameena said:
I tried with following initialization but it doesn't work. Please help me
[/quote]

Hello Everyone

First of all sorry for my english.

I want to share you a solution for the issue that Aveena was facing some time ago since I was have the same issue recently:

You need to open the jquery.datatables.columnFilter.js file and add the following line after line 233:

[code]
$.fn.columnFilter = function (options) {
oTable = this;
var TableWrapper= $('#'+oTable.attr('id') + '_wrapper');
[/code]

Then the following line:
[code]
var sFilterRow = 'tfoot tr';
[/code]

need to be changed to the following:
[code]
var sFilterRow = '.dataTables_scrollFoot tfoot tr';
[/code]

and Finally the following code:
[code]
$(sFilterRow + " th", oTable).each(function (index) {
[/code]

must be changed to the following:
[code]
$(sFilterRow + ' th', TableWrapper).each(function (index) {
[/code]

The reason of this changes is when the datatable have scrolling enabled. Internally datatables create one Wrapper Div called _Wrapper and inside three more divs: One for the table Header, another for the data (the original table) and finally one for the footer. The oTable variable gets the information from the second table (data table), but we want to put our textboxes inside the datatables footer (third div). That's the reason of making the TableWrapper variable.

I add in the sFilterRow the .dataTables_scrollFoot class because that's a class inside the footer table and I cannot found any other ID.

I want to let you know that this only applies for datatables with scrolling enabled. This will broke if you have datatables with scrolling disabled and enabled.

I want to request an authorization from Jovan if he can let me make some changes to the columnsfilter plugin addressing this issues.

finally I want to thank you to the datatables team for developing this great plugin as well as Jovan for developing this great datatables tool.

Regards

Phoenixzero

BSWS · September 2012

The "date-range" column filter type doesn't work if the data contained in the cells of that column is in date with time format(mm/dd/yyyy hh:min:sec). Is there a way to make it work?! Thx.

ChrissyC · September 2012

I have looked and looked, please help! I need to be able to set a class for the columnfilters individually. My first column filter needs to be 100px, my second 200px; etc. I see comments to use css, but nothing about how to add the class to each filter?

Phoenixzero · October 2012

[quote]ChrissyC said: I have looked and looked, please help! I need to be able to set a class for the columnfilters individually. My first column filter needs to be 100px, my second 200px; etc. I see comments to use css, but nothing about how to add the class to each filter? [/quote]

Hi ChrissyC

Actually to set a default width on your filter you need to insert the code inside the javascript file (there's no CSS integrated with the columnfilters plugin). According to your post it looks like you're using the text filter so you need to look for this code:

[code]
function fnCreateInput(regex, smart, bIsNumber) {
var sCSSClass = "text_filter";
if (bIsNumber)
sCSSClass = "number_filter";
var input = $('');
[/code]

and change it to:
[code]
function fnCreateInput(regex, smart, bIsNumber) {
var sCSSClass = "text_filter";
if (bIsNumber)
sCSSClass = "number_filter";
var input = $('

ravish · November 2012

Hi I am facing the same Issue with fixed Column .

var temp=$('#example').dataTable({

"sScrollX": "100%",
"sScrollY": "400",
"bScrollCollapse": true

});
new FixedColumns(temp);
temp.columnFilter({ sPlaceHolder: "head:after",
aoColumns: [
{ type: "select", values: [ '1', '10', '15'] },
{ type: "text" },
{ type: "number-range" }
]
});
Using this in Fixed Column my Filter is not Visible and in non Fixed Column After one Search Filter is not visible pl guide .

joeldr · December 2012

This looks great! What I would really love is a filter like this that allowed you to filter by exclusion. Like the existing list filter shown at http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html, but with the option to de-select options to not show, rather than selection options to filter by. Similar to what you get when you create column filters in Excel

Has anyone ever done something similar with this plug-in?

Really enjoying working with Datatables and the plug-ins people are creating. Good stuff!

Nater · January 2013

I am running into a problem when using this add on with server side processing, any time the table is redrawn I get an error saying oSettings is null. When I remove the .columnFilter code it works perfect. has anyone run into this problem?
[code]
$('#EobTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ListHandler.ashx",
"sServerMethod": "POST",
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": 'POST',
"url": sSource,
"data": aoData,
"success": fnCallback

});
}
}).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [null, null, null, null, null, { type: "date-range", sRangeFormat: "Between {from} and {to} dates" }]
});
[/code]

sreejith · January 2013

Hi all,

I am using columnFilter add on for column-wise filtering and I ran into a small problem, Where I couldn't set size for select and text search. Is there any way I could set the size for the same?

Thanks

ashishkulkarni · January 2013

Hi guys,

I am facing an issue where if I use:

[code]
sPlaceHolder: "head:before"
[/code]

or

[code]
sPlaceHolder: "head:after"
[/code]

the filters appear inside the header row overwriting the contents of the header.

The issue with that is if I use drop-downs - type: "select" - then at times, in addition to applying the filter, the table also gets sorted which is not the intention.

Please advise.

Best Regards,

Ashish.

DataTables Column Filter add-on for the data table

DataTables Column Filter add-on for the data table

Replies

Howdy, Stranger!

Categories

DataTables

DataTables Column Filter add-on for the data table

DataTables Column Filter add-on for the data table

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables