Bootstrap Table Select Row Active Class

alexwinkler

Regarding this example and in the comments tab there is 1 comment that is important for bootstrap styling.

https://datatables.net/examples/api/select_row.html

The is no error message just the rows are not being highlighted. Everything else works because even the "Count Row" button gives the correct result.

For bootstrap, I edited my table to the active class. However, still not working. Anything else that must be done?

$('#entrytable tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('active');
} );

Side note:

If I add the datatables CSS to my code (and use "selected" class again) it works but then my table gets very messed up:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

My libraries:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css
https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js

allan

You'll need to add some extra CSS to the page to account for the extra class since Bootstrap doesn't have such a class for the table rows by default. e.g. add:

table.dataTable tbody tr.odd.selected {
 background-color:#acbad4
}

table.dataTable tbody tr.even.selected {
 background-color:#acbad5
}

Or an easier option would be to use our Select extension for DataTables which has a Bootstrap suitable stylesheet available. Just select Bootstrap and Select in the download builder.

Allan

alexwinkler

ah ya perfect that works. Big thanks!

The comment on the https://datatables.net/examples/api/select_row.html page does mention to change "select" to "active". Would be awesome to update that for future users.

I like the second option as well and will def do that once I figured out the final config for my table.

Prost!