Add class to rows on table B by selecting row on table A

nickpapoutsis

Hi all,

I have two tables on the same page with different data except for a single column that may have the same data in both of them (think products and categories and both share the cat ID column).

Example here: http://live.datatables.net/sabiluju/1/edit

The goal is when selecting a row from the top table to add the class hidden to the rows on the second table that have the same cat ID and when deselecting to remove it.

kthorngren

First, thank you for the excellent example

Hiding rows using a class is not a recommended way to hide Datatables rows. Datatables won't know about the hidden rows and the API's might not behave as expected. Datatables manipulates the DOM so not all rows are in the DOM and adding the calls probably won't work. The best way is to use Datatables filtering to hide the rows. My suggestion is to use a search plugin.

I put together an example to get you started:
http://live.datatables.net/luxobapa/1/edit

There are a few comments so hopefully they help explain. In your exclude table (select and deselect events) I use draw() to draw the table which will run the plugin. I placed the plugin above the DT init code to execute it as part of initialization to filter your initial checkboxes. You can move it after initialization if you want to wait until you select or deselect rows. Plus the API runs for each table so you need to check which table the plugin is executing against using settings.nTable.id.

The following APIs are used to get a unique array of selected IDs:
pluck()
unique()

Also the selector-modifier of {selected: true} is used to get the selected rows.

This code is run inside the API for each row:

var selected = $('#table-categories-to-exclude')
                            .DataTable()
                            .rows( {selected: true} )
                            .data()
                            .pluck('category_id')
                            .unique();

You may want to consider creating a global variable selected and placing that code in your select and deselect events. Might make the plugin more efficient if its not using those APIs each row.

I also added a couple console.log statements so you can see the ID's that are filtered in the include products table.

HTH,
Kevin

colin

Nice solution, Kevin.

nickpapoutsis

Thanks for pointing me in the right direction @kthorngren!

I did some tests with hidden and didn't run into any issues but if I can avoid it i will.

kthorngren

Using a hidden class does hide the row but you may see issues like this example:
http://live.datatables.net/sarijuqi/1/edit

I added t a hidden class to the row with Colleen Hurst. This row is on the second page. The first page show 10 rows. Go to the second page you will see only 9 rows although Datatables thinks there are 10 being displayed. The third shows 10 rows.

Search for colleen. Datatables will indicate Showing 1 to 1 of 1 entries (filtered from 57 total entries) in the info element. Although no rows will be shown.

Datatables uses a data cache to display the rows and for searching and sorting. Datatables does not know about any direct DOM manipulation so it may result in confusing table displays for the users. Using hidden may work for what you are doing. If so go ahead just keep in mind the Datatables behavior.

HTH,
Kevin

nickpapoutsis

Yes, you are right about that (have seen it mentioned elsewhere) but because in this specific case I am not using pages and don't really care about search results being a bit off it will be fine.

However, since your example works equally well I won't bother with hidden.