|
ColumnFilter
Overview of the JQuery DataTables Column Filter functionalities
Featured IntroductionJQuery DataTables Column Filter enables you to add individual column filtering in the HTML tables enhanced with the DataTables plugin. In this page you can find some examples of usage and configuration of the plugin. DetailsDefault behaviorThe simplest case of usage of the column filter plugin is applying the column filter plugin without any additional configuration parameters. This example is shown in the following code: $("#tableId").dataTable().columnFilter();This call will enhance a HTML table with id 'tableId' and add dataTable/column filtering functionalities. Customize column filtersTo customize default behavior you can add configuration parameters to the columnFilter() call and customize filter for each column. Example is shown in the following code: $("#tableId").dataTable().columnFilter(
{
aoColumns: [
{
type: "number"
},
{
type: "text",
bRegex: true,
bSmart: true
},
null,
{
type: "select",
values: [ 'A', 'B', 'C' ]
},
{
type: "number-range"
},
{
type: "date-range"
}
]
}
);
If you pass aoColumn array with definition of the individual column filters you can customize behavior of the filters. The most important setting is type that can define how filtering will be done. Possible values are:
|
► Sign in to add a comment
great work man!!!!!!!!! Cheerssssssss...dataTable simly rocks... :):)
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!
Is there a way to move the select box filter? I'm looking to have the select filter on the top of the column. Thanks.
@antsl... yes you can by passing parameter @sPlaceHolder String Place where inline filtering function should be placed ("tfoot", "thead:before", "thead:after"). Default is "tfoot"
hi, good job! I wanted to know how to edit the search column using javascript or jQuery automatically by a function, for example.
i found it, i used .fnFilter. example: var analyseTable; analyseTable=$('#tableSubsVerifiesQ').dataTable({
analyseTable.fnFilter( '2|3|4' ,3,true,false);for more information: http://www.datatables.net/api
@joshua, @antsl :
If you want to move the select box filter in the table-head, just change the code in file jquery.dataTables.columnFilter.js :
var sFilterRow = "tfoot tr";
with this one :
var sFilterRow = "thead tr";
Then, put this in your view file :
Finally, you will see your input search filter move to the top of table.
Easy right?
BEST REGARDS
(Indonesian Young Man)
hi, very nice plugin, i like it, but i want to ask you if it is possible to be able changeMonth and changeYear at datepicker can be enabled...
@Indonesian Young Man - Thanks soo much, that was a very usefull tip.
Is it possible to use checkboxes for multiple selections for filtering?
how to set width of each textbox ?
is it possible to save the filter-settings of a table?
Have you tested this with: Latest version of datatables? datatable initialized with sorting on some columns?
I am using the latest version of datatables, and am using the "mDataProp" feature to specify column data source (not sure if that matters). If I follow the directions given (add another "TR TH.." to the "THEAD"), and set the "sPlaceHolder" init parameter to either "head:before" or "head:after", the datatable will initialize with the sorting functionality and the column filter inputs in the same row.
The only way I could get this to work is by creating a separate "<thead><tr><th>...</th></tr></thead>" and then using "sPlaceHolder: "head:after"" (using "before" will result in two sorting rows in addition to the filter input row).
I think it's important that putting the columns at the top works properly -personally I don't know why you would want them at the bottom if you have a very long table. (But then I have the "info message" - e.g. "1 to 5 filter of 17 total entries" - at the top).
HI, I'm struggling trying to add the code into my existing table. Can you suggest how it should go in with the following:
<script type="text/javascript" charset="utf-8"> / POST data to server / $(document).ready( function () {
} );</script>
how can we use this filter plugin on the existing table without dataTable() plugin???
by the way this plugin does not work if the datatable has any columns that are hidden.
Hi,
The plugin looks amazing - in examples here on page. In (my) practice, using the latest version of DataTables? javascript and example CSS, which comes with datatables, the filter boxes are put inside the data table. I tried: - tfoot - thead with 2 rows (with the after option) - 2 thead elements
I did get the filter fields, however, all the inputs were rendered inside my data table so when there were no filter results, the filter fields themselves disappeared as well and I had to reload the page.
Is there maybe some additional CSS required to make this work? Something which was part of the demo_page.css and demo_table.css but got removed?
It took me ages to figure out that you need to include both the table header and footer. However, i got it working once I did this.
Does anyone know how you would search a column which contains html, for example the cell contains a link:
eg. <a href="website">333</a>
The criteria is to search on the value eg 333, however, the column filters takes all the text including the html and then it doesn't work....
anyway got any ideas how to fix this?
Fix found: define the stype in the table definition of the columns:
$(document).ready( function () {
When using the select type is there a way to differentiate words that have the same root word? For instance how can you differentiate sorting between the words, “ball” and “football”.
I am using several select box filters, which work great. To improve the user experience I want to filter also the select boxes.
e.g. I have 2 select boxes in two columns select box one: "fruits" and "vegetables" select box two: "apple", "peach", "salad", "carrot"
If I choose now "fruits" in the second column only the rows "apple", "peach" are available. Now I want that in select box 2 only "apple", "peach" are available.
Is there a way to automatically detect the values in one column and use it in the select box?
Hello,
Is there an event in column filter to get the new list of filtered data after filtering ? Because it can be usefull.
I'm using DataTables? - works fine - column width is variable, depending on the length of the data in the column - this is what I want. If I add columnFilter, with search boxes in the header, the columns are all the same width - other than that, columnFilter works great. I've edited columnTables.js to have the search boxes appear in the header so I haven't needed any special initialization code, just $("#example").dataTable().columnFilter();
How do I do I get the variable width columns back? I need them - I don't know the data width ahead of time so I can't hard-code them.
Regarding my post above: there seems to be a minimum size for the search box - that's what I'd like to override - I don't want the presence of columnFilter to change the column width - i.e., narrow/wide columns have narrow/wide search boxes
OK, I added style to line 115, or thereabouts (in columnFilter version 1.4.1) to make this work - is there an easier way?
var input = $('<input type="text" class="' + search_init + sCSSClass + '" value="' + inputvalue + '" style="width: 100%" />');
Great plugin! Is there a way to get it to fill in the selection when coming back to the page if bStateSave is set on the table....it is all still filtered, but doesn't put the values back into the fields.
Total beginner here, where abouts do I add the above code to get it to work ?, I have got the jquery.dataTables.columnFilter.js to load at the same time as the table, but am not sure where to go from there ?.
hi i am using your addon and it is great! i am just an user not a programmer. my question: is there a way to order/sort the items in a selectbox (in my case it is text) desc or asc? thanks!
Hi I am a new user of datatables.Table tools worked fine but there is a problem with column filter plugin.I got jquery.dataTables.columnFilter.js file.Is there anythng i should do in sDom settings?
Is there a way to have a general delay functionality such as the api .fnSetFilteringDelay http://datatables.net/plug-ins/api for the datatables search box? I am having lots of data on the client side and if somebody types fast into a columnFilter, there shouldn't be the filter activity after each keyup event.
I just found an easy way to get the column filters to appear in the header rather than the footer that doesn't require modifying the plugin or adding a duplicate thead to your table. Just add a tfoot as you normally would, but include the display style as follows: <tfoot style="display: table-header-group"><tr>...</tr></tfoot> This is compatible with the ColVis? and ColReordering? plugins. If you add a duplicate thead for the filters, the ColVis? and ColReorder? plugins break. By using the display style, the filters are still added in the tfoot. They are just displayed in the header. That's all.
I would like to have a single datepicker input field. It would be good if we could configure to display only "From" or "To" date fields in "date-range" filter or alternatively introduce a new filter type "date" with a single date input field via datepicker.
when using FixedHeader?.js plug-in to freeze table's header there comes the 'type mismatch' exception. it always comes up when the ajax request was send to reload(or refresh) the data in the table with out reload(or refresh) the page. But the first time the page loaded the data was displayed normally. Here is my code:
>OK, I added style to line 115, or thereabouts (in columnFilter version 1.4.1) to make this work - is there an easier way? > >var input = $('<input type="text" class="' + search_init + sCSSClass + '" value="' + inputvalue + '" style="width: 100%" />');
Thanks. I have the same issue... Need to integrate it better with the dataTable...
Hi, I am having a really bad problem with this plug-in. It used to work for me, and then suddenly it just stopped. I can't figure out why it isn't working.
The problem I am facing is that columns with select boxes as their filtration type are not working at all, they always return no results, even when the values in the box all have values in the table. All I did was replace the word "select" with "checkbox" to change the type in my code, and it worked perfectly as a checkbox, but the UI is awful for the checkbox for my purposes, and there will never be an instance where two checkboxes apply simultaneously, so it makes no sense to use checkboxes.
The other problem is that all text type filters do not work as intended. They all search every searchable column, not just the one that it's supposed to filter. In fact, when you type in any of the text-boxes, it automatically also fills in that text into the main search, default, global filter textbox for the table.
I have no idea why that started happening... Both text filter and select filter used to work before I made all my customizations to the table... now they do not work.
I am using Server-Side processing, receiving data back in JSON. I have made adjustments to a number of DataTables? options and maybe one of them is the culprit for making ColumnFilter stop working? I have no idea which one it was that made it stop working, but I have adjusted options in:
fnInfoCallback: to change the text displayed at the bottom of the table when data is filtered.
oLanguage: -sZeroRecords (to change text displayed in table when filtrtion returns no results) -sLengthMenu (to change the text near the page size dropdown at top of table)
fnDrawCallback: to add fancybox features to thumbnail images in the table.
oColVis: I am using the ColVis? plug-in and changed some of its properties, including making some columns not appear in the checkbox menu for which columns you can include/exclude.
aoColumnDefs: Changed some columns to use multi-columns in their sorting, made some columns invisible, disabled searchable on some columns, disable sortable on some columns, etc.
Basic features like pagination type, lengths available in page length dropdown, default page length, and scroll bars.
ADDENDUM TO ABOVE:
I have done some preliminary tests by eliminating options to see if it makes the ColumnFilter begin to work again. The results are getting me somewhere, though I haven't found the solution just yet.
I removed my entire "aoColumnDefs" option and it began to work. I took a guess that it was just the bSearchable: false columns that were ruining the filtration, so I put back in my full aoColumnDefs but removed the bSearchable: false targets. It is not working again with that change.
So it has something to do with aoColumnDefs, but not with bSearchable alone. I also checked with just one attribute inside aoColumnDefs (for the record, it was an "aDataSort" on just one target column) to see if ti was the existence of aoColumnDefs in general that makes it not work, and I can confirm that that is not the case. With just the one attribute applied, it DID work.
I will keep experimenting with different settings in aoColumnDefs and see if I can discover precisely which attribute makes it stop working.
MORE INFORMATION TO ABOVE:
It's "bVisible" inside "aoColumnDefs". Any time I have any columns invisible, ColumnFilters? doesn't work. I have discovered, however, that with the ColVis? plug-in, if I deselect a column from the plug-in, filtering still works. So I think that might be a work-around. I just need to look into ColVis?'s properties to see if I can make columns invisible by default through that plug-in, which I guess you can do, but don't know how just yet.
However, if the creator of ColumnFilters? is reading this, would you consider looking into the bVisible bug I decdribed?
YET ANOTHER UPDATE:
Interesting. It appears I was wrong about being able to toggle visibility on columns with ColVis? and still have ColumnFilters? work. In fact, what I seem to have discovered is that if you have made any column invisible that is located BEFORE the column you want to filter on, then the filter will not work, no matter what method was used to make the column invisible. If I have all columns visible, then filter on column 3, it returns results correctly. If I then make column 2 invisible, column 3 filtration always returns no results, no matter whether it should.
AND ANOTHER UPDATE:
Sorry for all the updates in a row, but I have more information regarding this: I decided to build my own individual column filters using the base DataTables? API, rather than using ColumnFilters? plug-in, and the results are not what I was hoping to find... My own filtering code works identically to ColumnFilters?: that is to say, it works when all columns are visible, but when you introduce invisible columns, it stops working. I have concluded, therefore, that the problem isn't with ColumnFilters?, but DataTables? itself. I have to do more research to discover if it's possible to work around this limitation, but for now, I am unable to get it to work with invisible columns.
FINAL UPDATE:
It turned out to be very simple... I found out about the "bUseColVis" property of ColumnFilters?, and set it to true, which makes the plug-in work just fine with hidden columns.
Hi, Is there way to have a clear filter button. which will clear all the applied filters?
i have 4 columns, A1 | A2 | B1 | B2 is there a way to have a filter for each column based in comparing columns, for example: Filter rows where A1 values are mayor than A2, minus or equal to 0 and the same for B1 and B2.
thanks in advance