Individual dropdown column filters (values) doesn't search on columns that are rendered
Individual dropdown column filters (values) doesn't search on columns that are rendered
YoDavish
Posts: 123Questions: 46Answers: 3
The individual column dropdown filters (values) do not work on render columns that display the label rather than the value.
How can I get the dropdown filters to work on rendered columns?
Below is the DataTables rendered code:
columns: [
{
"title": "id",
"data": "task.id"
},
{
"title": "Accession Number",
"data": "task.accessionNumber"
},
{
"title": "Barcode",
"data": "task.barcode"
},
{
"title": "AssignedTo",
"data": "task.assignedTo"
},
{
"title": "Status",
"data": "task.statusDefId",
render: function (data, type, row) {
return $.grep( statusSelectOptions, function(obj){return obj.value == data;})[0].label;
}
},
{
"title": "Task Name",
"data": "task.taskDefId",
render: function (data, type, row) {
return $.grep( taskSelectOptions, function(obj){return obj.value == data;})[0].label;
}
},
{
"title": "Date Reported",
"data": "task.date1"
}
],
Here is my dropdown filter columns code:
initComplete: function () {
let c = 0;
tab.columns().every( function () {
c++;
var column = this;
var select = $('<select id="SelectFilter'+c+'" onchange="clearOtherColumnFilter(\'TextFilter'+c+'\')"><option value=""></option></select>')
.appendTo( $("#table thead tr:eq(2) th").eq(column.index()).empty() )
.on( 'change', function () {
var val = $.fn.DataTable.util.escapeRegex(
$(this).val()
);
column.search( val ? '^'+val+'$' : '', true, false ).draw();
});
column.data().unique().sort().each( function ( d, j ){
select.append( '<option value="'+d+'">'+d+'</option>')
});
$('select', this.header()).click(function(event) {
event.stopPropagation();
});
});
}
This question has accepted answers - jump to:
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
@colin
I tried to load up just the base needed to get it to run but I'm having some trouble with it:
http://live.datatables.net/rojesini/1/
Your loading sequence for js is wrong.
jQuery should come first, and DataTables should precede the Editor.
@tangerine, updated the sequence
http://live.datatables.net/rojesini/1/
I see you're using Editor in your example, but our accounts aren't showing that you have a license - it just reports that your trial expired. Is the license registered to another email address? Please can let us know so we can update our records.
Thanks,
Colin
@colin
It is registered to another email
Your example still doesn't seem complete. Please update your test case to show the issue and provide the steps to replicate the issue.
You are getting some errors in the console log. You probably will want to remove the
columnsdefinition since you haven't defined all the columns and there isn't astatusobject. Please make sure to fix all the errors.Kevin
@YoDavish - please can you PM me the details of the account that purchased the license so I can update your records.
@kthorngren
I've updated fully now it can be viewed here:
http://live.datatables.net/rojesini/3/edit
Steps to reproduce error
In the filter dropdown under "Status" because the value is "1 or 2" if we select those, it will not filter or find what we want, since it is rendered to the label. How can I render the dropdown to either search for the label or to find the value in the data set under "Status"
I may be missing something but I don't see any select filters in the example. There are text input filters which they don't seem to work.
Kevin
I'll reshare it again. I've tested both the input text and the select dropdown, which is the main issue.
http://live.datatables.net/rojesini/3/edit?js,output
@kthorngren
Had to re clone it to get it to output now, the link is below
http://live.datatables.net/zoxujusi/1/
Here is the table I see with you link http://live.datatables.net/rojesini/3/edit?js,output
Maybe you need to clone the JS BIN and post the new link.
Kevin
@colin @kthorngren
I accidentally clicked on answered "yes" for colin's response, but that was incorrect. I don't know how to remove that.
Anyways the reclone link is below:
http://live.datatables.net/zoxujusi/1/
You need to create the select list with the same data conversion that you used to populate the column data, like this:
http://live.datatables.net/zoxujusi/2/edit
Specifically this code:
Also note that your
columnDefsrender function won't run because its overwritten by thecolumns.renderfunction incolumns. Also you misspelled columnDefs, you havecolumnsDef.Kevin
Thanks @kthorngren that worked! is there a way to get rid of the extra <tr> in the header as well?
Looks like you are starting with two headers in HTML then appending two. So maybe you can remove the second you defined in HTML?
Kevin
Sorry, realized my answer was not correct; Change your cloning statement to this:
Use the
:eq(0)to clone only the first row. Without that its cloning both rows.Kevin