I'm having a problem with hidden columns and the filters getting out of whack. I've seen several generalized discussions about problems with column filtering and hidden columns but none relating specifically to using this plug-in. I have a working example of this at:
http://live.datatables.net/abated/3/edit#source
If you set the visibility of the second column to false then the filters for all following columns are off by one.
Is there a setting that I'm missing? I need to be able to randomly turn on and off various columns depending on what page the table is being displayed on.
I think this issue might be the one you are seeing: http://code.google.com/p/jquery-datatables-column-filter/issues/detail?id=88 - which is specifically for that plug-in.
I'm using DataTables with the columnFilter add-on and I was wondering if there is a way i can preset a date-range?
My table contains events, I want to show only upcoming events so I want to set the lower date-range to current date.
[code]
})
.columnFilter({
aoColumns: [
{type: "text"},
{type: "date-range"}, // I want to set this lower value to current date !
{type: "select"}
]
});
[/code]
I have a table with 8 columns, but I want to filter on just the first 2 columns. Rather than having two input boxes (one for each column being filtered), I'd like to have one input box that filters both columns. This would be similar to the default behavior, which is one input box that filters all columns, except I want to filter on just 2 columns, not all of them. Has anybody done this? Thanks.
I have a sortable table with two columns I don't sort on. I'd like also not to show a filter there as it affects the width of the columns. Is there a simple way to do this. I'm presently using the default configuration and only providing a tfoot.
where you click on the header and a div appears with types of choices or 'preset' filter choices?
I would imagine that I can css it, but is there anything built in so far?
I'm trying to get .columnfilter() up and running and have run into a problem. It is outlined below:
1. My default dataTable() settings were as follows:
[code]
// Set Defaults for all DataTables
$.extend( $.fn.dataTable.defaults, {
"aaSorting": [[ 0, "desc" ]], // Default sort is on column 0 (Start Time). I've no idea what the "desc" parameter is - but it's required.
"sDom": 'rt<"bottom"iflp<"clear">>', // Controls placement of Information (1-x entries) and the search box. Keeps it at the bottom
"bAutoWidth": false, // turning off autoWidth solved some formatting issues on show/hide columns.
"bFilter": true,
"bSort": true,
"bPaginate": false,
"bDestroy": true, // Allows destruction of table when getting new data groups. Then reconstruction can happen.
// "sScrollY": "400px",
});
[/code]
Notice that "sScrollY": "400px", is commented out.
2. It seems that if I keep the "sScrollY": "400px", setting it interferes somehow with .columnfilter().
3. Specifically the .columnfilter do not render within the footer itself. They render within the body (or what should be the body).
An example of the table WITH "sScrollY": "400px", set can be found here: http://www.myofficelog.com/logT/olT.php
An example of the table WITHOUT "sScrollY": "400px", set can be found here: http://www.myofficelog.com/logT/olP.php
To see how this plays out as the table grows, choose Log Group "Show Everything" from the select box in the upper left hand corner.
How can I get scrolling - without interfering with .columnfilter()?
I am very new to datatables and it would be greatly helpful if someone could list the installation steps for this addon.
In my case, I have a working datatable. I have then downloaded this columnFilter.js , added it to my project and finally I have changed my code from
[code] $('#results_table').dataTable(); [/code]
to
[code] $('#results_table').dataTable().columnFilter();[/code]
But this does not show any changes in my datatable output, I donot get any filters in my page. Any help would be appreciated.
Hi,
I'm new for dataTabes-columnFilter , seems to me columnFilter only works if no parameters passed in dataTable instance.
//works without parameters passed in dataTable
$('#example').dataTable().columnFilter({
aoColumns: [ { type: "select"},
null] });
//doesn't work when disable sort, filter, info in dataTable
('#example').dataTable({
"bFilter": false,
"bInfo": false,
"bSort": false
}).columnFilter({
aoColumns: [ { type: "select"},
null ] })
Does jquery version matter? Anyway here is what i'm using:
jquery-2.0.3.min
jquery-dataTables-1.9.4.min.js
jquery.dataTables.columnFilter-1.5.1.js
But my textbox filters are on the headers and not before or after. I don't know what I have mistake :/ (see this image for sample : http://imagik.fr/uploads/48115)
Have you an idea ?
Thanks ;)
I was wondering if its possible to setup a SELECT based filter where the text displayed in the menu is different than the value being passed back to the datable?
For example in my database I use constants to represent different colors: 1=red, 2=orange, 3=yellow, 4=green, 5=blue. What I would like is a SELECT filter that displays the text (red, orange, yellow, green, blue) but when a value is selected the associated numeric value (1, 2, 3, 4, 5) is passed to the processing script.
Im thinking it would look something like this, but I dont know if this syntax is correct or if its even possible:
Guess I should have read the source code before asking since I was able to figure it out on my own! For all others, here is the format that you are looking for:
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. [/quote]
I am facing the same issue. Did you manage to overcome it?
Hi, i'm using the jquery datatables with column filter plug-in. In my scenario, users can generate an excel of the shown datas but, after postback the filter values are lost. So i'm implementing a javascript function to re-set the values but i can't use the .fnFilter() function because user can't see the filter values.. How can i do?
Sorry I have been away after sending you the email, thanks for your response. I can't use personal email account at work so I am posting the code I added here for the multiselect feature on header filtering. The below code turns multiple choices into regular expression then call the DataTables standard fnFilter function.
[code]
function fnCreateMultiSelect(aData) {
var index = i;
var r = '', j, iLen = aData.length;
for (j = 0; j < iLen; j++) {
r += '' + aData[j] + '';
}
var select = $(r + '');
th.html(select);
th.wrapInner('');
select.change(function () {
if ($(this).val() != "") {
$(this).removeClass("search_init");
} else {
$(this).addClass("search_init");
}
var selectedOptions = $(this).val();
var asEscapedFilters = [];
if(selectedOptions==null || selectedOptions==[]){
var re = '^(.*)$';
}else{
$.each( selectedOptions, function( i, sFilter ) {
asEscapedFilters.push( fnRegExpEscape( sFilter ) );
} );
var re = '^(' + asEscapedFilters.join('|') + ')$';
}
oTable.fnFilter( re, index, true, false );
});
}
function fnRegExpEscape( sText ) {
return sText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};
[/code]
Then in
[code]
$.fn.columnFilter = function (options) {
...
case "select":
fnCreateSelect(aoColumn.values);
break;
case "multiselect":
fnCreateMultiSelect(aoColumn.values);
break;
case "number-range":
fnCreateRangeInput();
break;
[/code]
The above code will create standard HTML multiple selects, but of course I would like something nicer so I converted them into jQuery.multiselect later:
[code]
$("table#example thead tr th.filterHeader").find("select").multiselect({
selectedList: 1,
multiple: true,
minWidth: "110",
height: "auto"
}).multiselectfilter();
[/code]
Replies
http://live.datatables.net/abated/3/edit#source
If you set the visibility of the second column to false then the filters for all following columns are off by one.
Is there a setting that I'm missing? I need to be able to randomly turn on and off various columns depending on what page the table is being displayed on.
Any ideas?
Allan
I'm using DataTables with the columnFilter add-on and I was wondering if there is a way i can preset a date-range?
My table contains events, I want to show only upcoming events so I want to set the lower date-range to current date.
[code]
})
.columnFilter({
aoColumns: [
{type: "text"},
{type: "date-range"}, // I want to set this lower value to current date !
{type: "select"}
]
});
[/code]
Thanks
Glenn
I'm sorry I missed your response, yes that was the exact solution, thanks!
Shawn
Is posible to change default label, in select filter?
Thanks a lot
http://demos.kendoui.com/web/grid/filter-menu-customization.html
where you click on the header and a div appears with types of choices or 'preset' filter choices?
I would imagine that I can css it, but is there anything built in so far?
Thanks.
I'm trying to get .columnfilter() up and running and have run into a problem. It is outlined below:
1. My default dataTable() settings were as follows:
[code]
// Set Defaults for all DataTables
$.extend( $.fn.dataTable.defaults, {
"aaSorting": [[ 0, "desc" ]], // Default sort is on column 0 (Start Time). I've no idea what the "desc" parameter is - but it's required.
"sDom": 'rt<"bottom"iflp<"clear">>', // Controls placement of Information (1-x entries) and the search box. Keeps it at the bottom
"bAutoWidth": false, // turning off autoWidth solved some formatting issues on show/hide columns.
"bFilter": true,
"bSort": true,
"bPaginate": false,
"bDestroy": true, // Allows destruction of table when getting new data groups. Then reconstruction can happen.
// "sScrollY": "400px",
});
[/code]
Notice that "sScrollY": "400px", is commented out.
2. It seems that if I keep the "sScrollY": "400px", setting it interferes somehow with .columnfilter().
3. Specifically the .columnfilter do not render within the footer itself. They render within the body (or what should be the body).
An example of the table WITH "sScrollY": "400px", set can be found here: http://www.myofficelog.com/logT/olT.php
An example of the table WITHOUT "sScrollY": "400px", set can be found here: http://www.myofficelog.com/logT/olP.php
To see how this plays out as the table grows, choose Log Group "Show Everything" from the select box in the upper left hand corner.
How can I get scrolling - without interfering with .columnfilter()?
Thanks in Advance:
Pavilion
I am very new to datatables and it would be greatly helpful if someone could list the installation steps for this addon.
In my case, I have a working datatable. I have then downloaded this columnFilter.js , added it to my project and finally I have changed my code from
[code] $('#results_table').dataTable(); [/code]
to
[code] $('#results_table').dataTable().columnFilter();[/code]
But this does not show any changes in my datatable output, I donot get any filters in my page. Any help would be appreciated.
Thanks in Advance
I'm new for dataTabes-columnFilter , seems to me columnFilter only works if no parameters passed in dataTable instance.
//works without parameters passed in dataTable
$('#example').dataTable().columnFilter({
aoColumns: [ { type: "select"},
null] });
//doesn't work when disable sort, filter, info in dataTable
('#example').dataTable({
"bFilter": false,
"bInfo": false,
"bSort": false
}).columnFilter({
aoColumns: [ { type: "select"},
null ] })
Does jquery version matter? Anyway here is what i'm using:
jquery-2.0.3.min
jquery-dataTables-1.9.4.min.js
jquery.dataTables.columnFilter-1.5.1.js
Thanks.
http://marcosta.com/datatables_filtering.htm
What's my mistake ?!
I have this code :
[code]
jQuery.fn.dataTableExt.oSort['numeric-comma-asc'] = function (a, b) {
var x = (a == "-") ? 0 : a.replace(/,/, ".");
var y = (b == "-") ? 0 : b.replace(/,/, ".");
x = parseFloat(x);
y = parseFloat(y);
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function (a, b) {
var x = (a == "-") ? 0 : a.replace(/,/, ".");
var y = (b == "-") ? 0 : b.replace(/,/, ".");
x = parseFloat(x);
y = parseFloat(y);
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
// --- --- --- On formate le tableau avec le plugin DataTables --- --- --- \\
$("#tabSalesAndOpport").dataTable({
"bJQueryUI": true,
"bFilter" : true,
"bStateSave": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 50, 100, 200, -1], [10, 50, 100, 200, "All"]],
"iDisplayLength": 50,
"aoColumns": [
{ "sType": "numeric" },
null,
null,
null,
null,
null,
null,
null,
{ "sType": "numeric-comma" },
null,
{ "sType": "numeric-comma" },
null,
{ "sType": "eu_date" },
{ "asSorting": "asc" }
]
}).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [
null,
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
null,
{ type: "select" },
null,
null
]
});
[/code]
But my textbox filters are on the headers and not before or after. I don't know what I have mistake :/ (see this image for sample : http://imagik.fr/uploads/48115)
Have you an idea ?
Thanks ;)
For example in my database I use constants to represent different colors: 1=red, 2=orange, 3=yellow, 4=green, 5=blue. What I would like is a SELECT filter that displays the text (red, orange, yellow, green, blue) but when a value is selected the associated numeric value (1, 2, 3, 4, 5) is passed to the processing script.
Im thinking it would look something like this, but I dont know if this syntax is correct or if its even possible:
[code]
...
.columnFilter(
{
sPlaceHolder: "foot:after",
aoColumns: [
{ type: "select", values: [ "red" : 1, "orange" : 2, "yellow" : 3, "green" : 4, "blue" : 5] }
]
}
);
...
[/code]
[code]
{ type: "select", values:
[
{ "value" : 1, "label" : "red" },
{ "value" : 2, "label" : "orange" },
{ "value" : 3, "label" : "yellow" },
{ "value" : 4, "label" : "green" },
{ "value" : 5, "label" : "blue" }
]
}
[/code]
I am facing an issue where if I use:
Run in JS Bin?1sPlaceHolder: "head:before"
or
Run in JS Bin?1sPlaceHolder: "head:after"
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. [/quote]
I am facing the same issue. Did you manage to overcome it?
I had the same problem with
[code]sPlaceHolder: "head:after"[/code]
and worked around it by using a second (identical) header row like so:
[code]
Header 1
Header 2
Header 3
....
Header 1
Header 2
Header 3
....
[/code]
This places the sort arrows in the top row and the filter text boxes/selects in the second row. Works well for me!
Thanks,
MV
Sorry I have been away after sending you the email, thanks for your response. I can't use personal email account at work so I am posting the code I added here for the multiselect feature on header filtering. The below code turns multiple choices into regular expression then call the DataTables standard fnFilter function.
[code]
function fnCreateMultiSelect(aData) {
var index = i;
var r = '', j, iLen = aData.length;
for (j = 0; j < iLen; j++) {
r += '' + aData[j] + '';
}
var select = $(r + '');
th.html(select);
th.wrapInner('');
select.change(function () {
if ($(this).val() != "") {
$(this).removeClass("search_init");
} else {
$(this).addClass("search_init");
}
var selectedOptions = $(this).val();
var asEscapedFilters = [];
if(selectedOptions==null || selectedOptions==[]){
var re = '^(.*)$';
}else{
$.each( selectedOptions, function( i, sFilter ) {
asEscapedFilters.push( fnRegExpEscape( sFilter ) );
} );
var re = '^(' + asEscapedFilters.join('|') + ')$';
}
oTable.fnFilter( re, index, true, false );
});
}
function fnRegExpEscape( sText ) {
return sText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};
[/code]
Then in
[code]
$.fn.columnFilter = function (options) {
...
case "select":
fnCreateSelect(aoColumn.values);
break;
case "multiselect":
fnCreateMultiSelect(aoColumn.values);
break;
case "number-range":
fnCreateRangeInput();
break;
[/code]
The above code will create standard HTML multiple selects, but of course I would like something nicer so I converted them into jQuery.multiselect later:
[code]
$("table#example thead tr th.filterHeader").find("select").multiselect({
selectedList: 1,
multiple: true,
minWidth: "110",
height: "auto"
}).multiselectfilter();
[/code]
Regards,
James
I am trying to use this plugin but the filter field does not display.
My jquery code:
[code]oTable = $('#tasksTbl').dataTable({
"bProcessing": true,
"bDestroy": true,
"sAjaxSource": "/modules/project_manager/ajax/list_project_tasks.ajax.php?project_id="+project_id,
"bAutoWidth": false,
"aoColumns": [
{ "bSortable": true, "sWidth": "5%" },
{ "bSortable": true, "sWidth": "35%" },
{ "bSortable": false, "sWidth": "15%" },
{ "bSortable": false, "sWidth": "10%" },
{ "bSortable": false, "sWidth": "5%" },
{ "bSortable": false, "sWidth": "5%" },
{ "bSortable": false, "sWidth": "5%" },
{ "bSortable": false, "sWidth": "15%" }
]
});
oTable.columnFilter({
"aoColumns": [
null,
{ type: "select", values: [ 'A', 'B', 'C' ]},
null,
null,
null,
null,
null,
null
]
});[/code]
My html:
[code]
Id
Task Title
Status
Assigned To
[/code]
The table displays fine, but no select filter is added to the Status column.
Can anyone please help?