preselect filter via searchPanes based on ID (data-search)

medarob · September 9

We want to make use of preselections via searchPanes when a the user goes on a webpage with datatables.
For that we added a parameter location like https://domain.tld/table?location=1,2

  const paramLocation = urlParams.get('location');
  var paramLocationList = paramLocation.split(',');

which gives us ['1', '2'] and we use it like this:

{ column: 3, rows: paramLocationList}

As I read, a preselection of row values by value is possible: https://datatables.net/reference/option/searchPanes.preSelect

Code from example:

searchPanes: {
    preSelect: [
        {
            column: 3,
            rows: ['Edinburgh', 'London']
        }
    ]
}

But instead of using the actual values in the row list I want to use their IDs.

So, basically this: ID = 1(Edinburgh) and ID = 2 (London):

searchPanes: {
    preSelect: [
        {
            column: 3,
            rows: ['1', '2']
        }
    ]
}

I changed the HTML and added the data-search attribute because I read (https://datatables.net/examples/advanced_init/html5-data-attributes.html), that you can use additional values for the search, like an ID. And using the search field and entering the ID works and the table is filtered.

<td data-search="1,2">Edinburgh, London</td>

But, the pre-selection via the URL doesn't work.

Question:

Does the preselection via searchpanes just works with the values or can I somehow use the IDs in the data-search attribute for that?
Or should this work out-of-the box and there is another error in the code?

kthorngren · September 9

As long as your table is HTML sourced it should work like this example:
https://live.datatables.net/debutaqe/1/edit

If your table is Ajax or Javascript sourced then you will need to use an alternative like Orthogonal data however I don't think it is always possible to get the DOM element with columns.render. Is there a way you can provide the ID in the original data source?

Kevin

medarob · September 9

Thank you @kthorngren for your answer.

Ok, so if I understand you correct, the usage of the data-search attribute should work for preselect filtering?

The table is generated via TYPO3 fluid code, so it's HTML sourced and the IDs are available right away.

The only thing that we changed in the searchPane is to add a checkbox that the user has to click the checkbox to activate the searchPane filter. Maybe that code is responsible that it doesn't work right away?

kthorngren · September 9

Maybe that code is responsible that it doesn't work right away?

Not sure. I provided an example that works. Maybe you can update it to show the problem you are having. Or provide a link to a test case replicating the error.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren · September 9

Also note that in addition to the table needing to be HTML sourced if using data-search the attributes need to be applied to the td before initializing Datatables.

Kevin

kthorngren · September 9

Possibly its due to the uniqueness threshold that SearchPanes calculates to determine whether or not to display a searchPnae for each column. See the searchPanes.threshold docs for details. If the SearchPane for that column is not visible you may need to force SearchPanes to show it. See this example and my test case uses this to show the pane:

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

Kevin

medarob · September 10

@kthorngren

I expanded a previous example from my last question here: https://datatables.net/forums/discussion/77761/searchpane-with-multiple-values-in-one-column

New example with preselect option: https://live.datatables.net/zadileji/16/edit

First of all I noticed that the data in the searchPane isn't shown anymore ("No data available in table") but that also happens if I open your previous suggestion from the other question: https://live.datatables.net/zadileji/3/edit
(Not sure what's the issue here, I know your example worked before and did show values in the searchPane.)

Now I added the preselect option but this doesn't filter for cat2 in the example. Could the problem be the split() function, because of the multiple values I have in the column?

medarob · September 10

Ok, changing je CSS and Javascript dataTables libraries solves the "No data available in table" error but preSelect still doesn't work.

https://live.datatables.net/zadileji/17/edit

kthorngren · September 10

The test case is using columns.searchPanes.preSelect which has been removed since SearchPanes 2.0.0 in favor of using /searchPanes.preSelect. From the docs:

This option is deprecated from version 2.0.0+. It was replaced by searchPanes.preSelectwhich allowed the order that the selections were made in to be defined. This allowed preselecting to become compatible with searchPanes.cascadePanes

Moving the preselect to the global searchPanes option allows preselection to work again.
https://live.datatables.net/zadileji/22/edit

Also note that the orthogonal data SearchPanes uses is the data returned from the type === 'sp render function rather than the data-search attribute. Use cat2 for the preSelect instead of 2.

Kevin

medarob · September 10

@kthorngren

Thank for the answer.

Inside the data-search attribute there are the IDs of the values of the <td>.

For the pre-Selection to work, we need to use the IDs and not their text values because Text can change, the IDs should be the same.

In the URL we have for example /datatable?category=1,2 which should preselect the searchPanes with the category IDs 1 and 2.

So, I think now the question would be if that is do-able, so that the data-search values could be used additionally to preselect the searchPanes?

kthorngren · September 10

So, I think now the question would be if that is do-able, so that the data-search values could be used additionally to preselect the searchPanes?

That's a good question. I'm not sure how to do this. @allan will need to let you know if this is possible.

Kevin

allan · September 11

I'll take a look and get back to you tomorrow

Allan

allan · September 12

I've been tinkering with this for over an hour and I'm just not able to get it to work with arrays I'm afraid - this was the closest I could get (it needs the nightly for SearchPanes as I discovered a bug in the array handling along the way).

The issue at the moment is that SearchPanes uses the DataTables cached search data, and that is always a string. Which isn't useful in this case - thus why even although SearchPanes correctly shows two possible results, the table filters down to just one row. (`"1" !== "1,3").

It might be possible to make it work by creating a new data type for this column, but I think you run into a bunch of other issues such as not being able to search on the category name in the global search box - it would need to be the id, which of course the user can't seen.

SearchPanes needs a ground up rewrite for a number of reasons, but this one to not use the DataTables cached search values is another one added to the list.

I had been thinking that the only realistic way to make what you want happen at the moment is to ditch the "data-search" attribute and do a lookup of the ids to convert to their labels and use that for the pre-selection. I'm not sure that will work with HTML sourced data for the same reason as the example above though. You might need to use Ajax / JSON data like in this example.

Allan

medarob · September 23

Thank you @allan for your time and that you looked into this matter.

preselect filter via searchPanes based on ID (data-search)

preselect filter via searchPanes based on ID (data-search)

Answers

Howdy, Stranger!

Categories

DataTables

preselect filter via searchPanes based on ID (data-search)

preselect filter via searchPanes based on ID (data-search)

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables