I have a jquery datatable and I need to filter and sort inside a cell that contains html select inputs by the text in the selected option <select><option selected="selected">**text to filter**</option></select>.
So I need to search the rows in the table that contain a td that contains a select box where I've selected the option with the text used for the search.
So if in a cell I choose the option with "text to filter" text that row must be visible. Is it possible? How can I do it?
Thank you
You'll want to use custom filtering, I think. http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html
See this jsfiddle: http://jsfiddle.net/DYyLd/
Search for "x" and only the row with "x" selected will show. Change the selected option, and the search will find it/omit it as appropriate.
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var oTable = $('#myTable').dataTable();
var nodes = $(oTable.fnGetNodes(iDataIndex));
var selItem = nodes.find('select').val();
// This is basic. You should split the string and look
// for each individual substring
var filterValue = $('div.dataTables_filter input').val();
return (selItem.indexOf(filterValue) !== -1);
}
);
Also, I added this:
$('select').click(function() { $('#myTable').dataTable().fnDraw(); });
which redraws the table when any of the selects are changed - that way, they are re-filtered.
As commented in the example, my search function is very basic, only looking to see if the selected item in the select box contains the exact text in the search field, case sensitive. You would almost certainly want to split the string by spaces, and search for each substring in selItem. Also notice this method doesn't search other the column(s) - it only looks in the column with the select box. You may want to search the other columns as well.
Found the best solution for this situation, follow this link and example:
https://datatables.net/examples/plug-ins/dom_sort.html
Adding to column: []:
{ "orderDataType": "dom-select" }
and:
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('select', td).val();
} );
}
If you want to sort a column in a datatable based on a select, you can use the example from datatable site (https://datatables.net/examples/plug-ins/dom_sort.html), but you have to change it a little bit to enable sorting on the text rather than on the value. In the example it says to add:
{ "orderDataType": "dom-select" }
and
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map(function(td,i ) {
return $('select', td).val();
});
}
This will sort the column to the value of the options. To sort to text value I changed the function above a little bit:
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map(function(td,i ) {
//return $('select', td).val(); // <== the original solution
var idx = $('select', td)[0].selectedIndex;
var elm = $('select', td)[0][idx];
// elm is the HTML element
var s = elm.text;
s = s.replace(/(<([^>]+)>)/gi, "");
// s contains the string value of the option
return s;
});
}
Now the column will be sorted on the visible value when a user clicks on the column header.
I hope it wil work for you as well!
