Highlighting a row using the DataTables plugin and Bootstrap

chenry

This is a GREAT plugin, but I cannot for the life of me figure out how to have a column of checkboxes where I click a checkbox and the table row stays highlighted until I uncheck the box(es).

I'm trying to replicate how the selected row highlighting works in the new Google/gmail web email interface.

Any ideas?

hozt

I've had the same problem before, I came to one solution, but I'm going to change it to my 2nd solution, which I should've implemented it in the first place, which is a lot more similar to Google's Gmail.

So, this is how I did it.

I used TableTools, which provide interaction with DataTable's API and offers good features for rows, and selections interaction, I was already using the plug-in for exporting, so.

First thing you need is to set the sRowSelect to "multi".
Then clicking on a row will select that row, and it allows for "multi" selections, but you want only the checkbox, so.

I used: fnPreRowSelect - Which is what action to take when the user clicks a row, i replaced this in the TableTools plug-in to return immediately false.

Meaning you click to select on a row, nothing happens, so then I implemented a checkbox, and added a class to trigger a click in jQuery.

In this function, I basically do this, I check if this row is select, and act accordingly, selecting and deselecting.
[code]
var id = $(this).closest('tr');
oTT = TableTools.fnGetInstance('#table_name');
if (oTT.fnIsSelected( id[0] )) {
oTT.fnDeselect( id[0] );
} else {
oTT.fnSelect( id[0] );
}
[/code]

Which basically asks TableTools to select the row, which is what the plug-in would be, if we hadn't return false, so in the checkbox.


And voilá, now.. at first I thought this would be the best way, and well, it's OK.

But this is what I'm going to do as soon as I have the time, which is what Gmail does, and if you happen to do it first, please share the code :)

That is, i'm going to let the fnPreRowSelect intact, which means the plug-in will select the row.
I'm going to remove the HTML Checkbox, and leave a div in that column where the checkbox was, the class will simply fake a checkbox background image, which is what google does, that's why u can select and unselect anywhere, and it saves resources to a custom 'Deselect All' button, which has to go through every checkbox and change the attr of checked to false.

AKeep in touch :D