Preserve selection on filtered out rows

Tablefak

Link to test case:
I don't think a test case is needed, because likely my whole approach is wrong rather than some implementation details. However, if you still want a test case, please let me know, and I will be happy to make one.

Description of problem:
Suppose I have a table that shows information about clothes. I also have different filters to help users specify their needs: by color, material, size etc. E.g. when you select red color filter, only red clothes remain shown in the table.

The problem comes when I want to retain selection on the rows that are currently not shown in the table (because they are filtered out). Example use case:
1. User activates the red color filter. Only red clothes are being shown.
2. User selects 3 rows in the table.
3. User deactivates the red color filter and actiavtes green color filter. Only green clothes are being shown.
4. The user selects 2 rows in the table.
5. The user deactivates all filters. All the clothes are now shown. 5 of them should now be selected.

My implementation
My current implementation "loses" the selection of rows when they get hidden (filtered out).
I'm using ajax data source and client-side processing. I'm also using the rowId feature of the select extension, and it works for a simple reload (without changing the data).
To implement the filtering itself I've tried two approaches:
First approach was to simply remove the filtered out rows from the data source and call ajax.reload().
Second approach was to not delete the data entries, but to set a flag on them and then use this to hide those rows that had the flag set. The code would look like this:

        $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
            const record = table.data()[dataIndex];
            return !record["hidden"];
        });

Either way, the selection is lost when I remove rows or hide them via ext.search.

Versions
datatables.net-bs5@1.13.1
datatables.net-select-bs5@1.6.2

rf1234

I have just tested it. If you only hide records using "ext.search.push" the record selection remains intact.

I can toggle (soft) deleted records on or off. If I select a deleted record it disappears if I turn deleted records off. It reappears when I turn deleted records back on - and it is still selected.

This works with "ext.search.push" and with column search, too. I think it is key not to deleted the hidden records.

Tablefak

Thank you for looking into it. I tried to make a test case on the live.datatables.net website, but unfortunately I don't know how to use ajax data there (and be able to modify it).

Here's the example which uses data from code and not ajax. I'm not sure how useful it is because of that.
https://live.datatables.net/cosupuwu/3/

Tablefak

Please note that in my app I'm changing the ajax data on the server side (namely, switching the "hidden" flag) because I want the filtering logic to work on the backend. When I use ext.search.push to do the filtering on the client-side and I don't reload the data, the selection is indeed preserved. But client-side filtering isn't suitable for me

Tablefak

A working solution which I came up with is to store the filtered out rows IDs separately from the data source. When I want to apply a new filter, I pass the new list of filtered out IDs to the frontend and do table.search("").draw() to trigger the search update. Inside the search function I check if the row ID is in the "filtered out" list.

This seems to work as expected, but I'm pretty sure there is a more elegant solution.

Tablefak

Nevermind! My issue was caused by something completely unrelated to datatables. Whenever I changed the data source, webpack would hot reload the whole app, causing the app's page to reload. This is why the selection was lost.

Thanks @rf1234, you were helpful.

allan

Awesome - good to hear that did the job. I've changed @rf1234's answer to be marked as "Accepted"

Allan