Searching over a column of 'select' elements

kjkidd

Anyone know how one could modify search to search over the currently selected values on the last column ( https://www.datatables.net/examples/plug-ins/dom_sort ) ? If you notice when you search for an element of the last column, nothing changes because the search does not distinguish between selected and unselected values.

I've been trying to create a regular expression to pull out that value, but haven't had any luck so far (since I have little experience with regex).

ThomD

Great question. I think you would have to combine two things. First, keep the search engine from looking at that column with the search API https://datatables.net/reference/option/columns.searchable

Then you would need to hook into a change event for the input (keyup?) to add column filters using some of the example here
https://datatables.net/examples/api/multi_filter.html

I'd put a class on the column that you could use as a selector for the filter function.

kjkidd

Yes as of now, I am only worried about searching that single column. I don't need it to be integrated into the global search. One idea I was just playing around was using something like the following code:

$('#grid_table tbody').on( 'mousedown', 'td', function (e) {
selectedColumn = table.cell(this).index().column;
if (e.button == 2){
searchData = ( $('select', table.cell(this).node() ).val() );
table.column(selectedColumn).nodes().map( function (td, i){return $('select', td).val();}).search(searchData).draw();

Unfortunately this does not do make any changes to the table, but it works for obtaining the value that is right-clicked and seems to produce the correct list. It just does not draw the resulting search, which is where I'm currently stuck.

ThomD

if you just want an input box to search over the selected values in one column, you should be able to adapt the examples in the multi_filter page.

kjkidd

Unfortunately could not get this to work since I believe any html elements are stripped out of the data for the search, making it impossible to look for a pattern such as:
'selected="">' + searchTerm + '</option>';

I read in another discussion that something similar to the ordering of html select elements was being developed for the search as well, but I'm guessing that is still a work in progress.

allan

Hi,

At the moment you would need to use a custom search plug-in to perform a search based on live DOM elements. This isn't implement in DataTables core because it is slow (DOM interaction always is). It is an area that I want to work on making more accessible though.

Allan

kjkidd

Ah, I was considering that, but must have overlooked the fourth parameter had the original row data. Thanks.

allan

The index in the third parameter is probably more useful so you can access the DOM node and read the live information.

Allan

kjkidd

Sorry to bring this up again. I solved that problem using "rowData", but now have another situation where "index" might be useful.

Can you show an example using the "index" in
function( settings, searchData, index, rowData, counter ) {} to get the node for a particular column/row?

Been having a hard time figuring it out.

Thanks

allan

new $.fn.dataTable.Api( settings ).row( index ).node();

Probably worth sorting the API instance in a variable so it doesn't need to be recreated every time that the function is run.

Allan