Searchpane with multiple values in one column

medarob

I have a question if the following use-case is possible and if there might be an example.

I use two search panes for filtering.
My table consists of different items and one of the column is called category
In this field/cell there could be a single category or multiple categories.

The values of one of the search panes are the ones used in the category column. If I use only one category per item I will get a list of single words in my search pane. (This is what I want.) If I have multiple categories in one of those cells (for example if the item has multiple categories), those exact letters will get used as filter option. But what I want is that the categories should be available as single words in the search pane.

Example:

Name   Category
ABC    test
ABCD   test, test2
AB     test2, test3

So, the search pane filter options would look like this

test
test, test2
test2, test3

But what I want is this:

test
test2
test3

And if I filter via the search pane and select test2 then the 2nd + 3rd rows should be shown. If I select test, then the 1st and 2nd rows should be shown. The selection of test3 should only show the 3rd row.

Is that possible?

kthorngren

Does this example do what you want?

If not please post a simple test case with an example of your data so we can provide more specific help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

medarob

Thank you Kevin, for the example.
Yes, that is exactly what I would like to have.

I created an example with my code: https://live.datatables.net/zadileji/1/edit

The data is already in the table but currently I don't know how to adapt the JavaScript to make it work like in your example.

In my example, the categories are separated with a comma and that will be shown as an option in the search pane. I don't have a JSON source for the data in the DataTable.

kthorngren

Use Javascript split() to split the string into an array using columns.render. Like this:
https://live.datatables.net/zadileji/3/edit

Note that I added show: true to column 2 and removed the 2 from the array in this code:

        {
             searchPanes: {
                   show: true
             },
             targets: [ 3]
        },

Otherwise, depending on order, only one of the options containing columnDefs.targets of 2 will be applied.

Kevin

medarob

Thank you very much

That works!