Bootstrap Table Select Row Active Class
Bootstrap Table Select Row Active Class
alexwinkler
Posts: 4Questions: 2Answers: 0
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
Answers
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:
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
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!