SearchPane show selected from dropdown for filtering

st3ph3n

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Using searchpane, is there a way to filter on the selected item in a dropdown list in a table cell?

Ref: https://mail.datatables.net/forums/discussion/55628/modifying-datatables-searchpane-to-filter-on-form-fields

I implemented the searchpane to my table, but in the pane for the column that has dropdowns, it is showing the content of each dropdown over and over again. I only want to show the selected element.

colin

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

st3ph3n

Here's a test example: http://live.datatables.net/xutekozi/1/edit

I'm referring specifically to the dropdowns in the Name column, and how they appear in the Search Pane. I would like them to show the 'selected' value and not the entire dropdown contents.

colin

You would need to use orthogonal data for that, you can use columns.searchPanes.orthogonal - which would return the value of the dropdown. Whenever the dropdown is changed, you would need to rebuild the panes with searchPanes.rebuildPane(),

Colin

st3ph3n

Is it possible to have search panes use and display a value within the <td> in the HTML? and still display the dropdown in the table?

st3ph3n

The HTML in page is updated each time a new dropdown selection is made - so there's no need to rebuild the panes, if I can display/filter on the selected item. I also have to other columns with dropdowns that need to filter in the same manner.

colin

You would need to rebuild the panes as the value has changed. If the select was originally showing '1', you would want that value in the SearchPanes. If the user then changed that to '2', SearchPanes would need to be updated to show that.

Colin

st3ph3n

@Colin, Please see this example: http://live.datatables.net/nobasapo/3/edit

The update button on each row is used to update the HTML to show the selected value. There is more going on on the server side, where the HTML page is rerendered with a new URL. So I don't think I need to update SearchPanes. I just need to search for the selected value.

It would also be useful that the Excel, and Print buttons utilize these values instead of printing the whole dropdown lists. The search funtion properly searches for the selected values in the dropdowns.

kthorngren

Your example isn't running and has this error:

Uncaught TypeError: Cannot read property 'mData' of undefined

You need to add th element for the last column in the table.

Colin suggested you need to use columns.searchPanes.orthogonal to render the selected input value. This thread shows an example. Its using arrays but the same concept applies. You can use jQuery to get the selected value, something like this:
$(data).find(":selected").text()

or
$(data).find(":selected").val()

It would also be useful that the Excel, and Print buttons utilize these values instead of printing the whole dropdown lists.

Similarly you will use orthogonal data for the export buttons. Here is an example:
https://datatables.net/extensions/buttons/examples/html5/outputFormat-orthogonal.html

Kevin

st3ph3n

Is this example working without error:

http://live.datatables.net/nobasapo/7/edit

kthorngren

Your page is not properly loading. Take a look at the browser's console.

I fixed it here by adding a th for the last column:
http://live.datatables.net/nobasapo/8/edit

EDIT: The last link you provided doesn't have the error.

Kevin

colin

The search funtion properly searches for the selected values in the dropdowns.

I select a '3' and searched for that - all three rows remained, so I'd say that that isn't working. That's a separate issue, you'll need a search plugin for that, but the exports can use the same orthogonal data approach that I explained above

Colin

st3ph3n

Thanks @Colin, @Kevin.

I think it's working now.

http://live.datatables.net/nobasapo/9/edit