How to have multiple values in a cell but each is searchable as a unique value

glimpsed_chaos

Link to test case: https://live.datatables.net/gudemeve/2/
Description of problem: The above test case is a rough example so be kind.

I need to have a cell that contains 1 or more values.
If more than 1 value, they should be on stacked vertically.

In the test case, I have that but it is mostly faked visually by inserting a <span> tag inside the <td> like this:

<tr> <td>Ashton Cox</td> <td>Technical Author</td> <td> <span>San Francisco</span> <span>Chicago</span> </td> <td>66</td> <td>2009/01/12</td> <td>$4,800</td> </tr>
Without any CSS this just displays as "San Francisco Chicago" in the Office column.
With some CSS (white-space: pre-wrap) it will appear stacked vertically. That's fine visually, I can tidy up the left justification.
I have 2 people setup in the test case, one with and one without the CSS to show both layouts.

My main issue is that I would like each value to also be available as an item within the SearchPanes for the Office column.

I have seen this done with an Angular project, but I have little experience in that area and trying dissect/analyze what they have done to achieve this. But I cannot share that link either as it is private.

Suggestions?

kthorngren

You will probably nee to use columns.searchPanes.orthogonal. If your original data is in arrays then maybe this example will help.

If you have span tags then you will need to use columns.render to split the data. Here is a simple example that you will probably need to tweak for your data:
https://live.datatables.net/gudemeve/3/edit

Note it does not pick up cells without the span tag. You can refactor the code to handle both situations or whatever your actual data contains.

Kevin

glimpsed_chaos

Kevin,

Use of span was just something I was trying, not specifically needed.

Thank you much for the examples. I will work with those on a solution.

Have a great day!

glimpsed_chaos

Looks like this will work fine - https://live.datatables.net/laboperi/1/

I change the ',' separator in your example for an html line break and that places each stacked within the cell. Everything is still accounted for in the searchPane!

        columns: [
            {
                data: "users.first_name"
            },
            {
                data: "users.last_name"
            },
            {
                data: "sites.name"
            },
            {
                data: "permission",
                render: {
                    _: '[</br> ].name',
                    sp: '[].name'
                },
                searchPanes: {
                    orthogonal: 'sp'
                }
            }
        ],

Thanks again Kevin!