CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3datatables
rmoh21
rmoh21

Reputation: 1525

Unable to highlight datatable row

In the example below highlighting works quite well with individual rows. In my code I can see that selection of an individual row works, however, the actual highlighting does not work.

I am using Twitter Bootstrap 3 + Datatables.

http://datatables.net/release-datatables/examples/api/select_single_row.html

Any help would be appreciated. I have followed the example as is and I think perhaps I have not configured the table properly in its init or Bootstrap does not quite like highlighting. 

   var oTable;

   $( document ).ready(function() {

        /* Add a click handler to the rows - this could be used as a callback */
        $("#pTable tbody tr").click( function( e ) {
            if ( $(this).hasClass('row_selected') ) {
                $(this).removeClass('row_selected');
            }
            else {
                oTable.$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
            }
        });

        /* Add a click handler for the delete row */
        $('#deletePButton').click( function() {
            var anSelected = fnGetSelected( oTable );
            if ( anSelected.length !== 0 ) {
                oTable.fnDeleteRow( anSelected[0] );
            }
        });

        /* Init the table */
        oTable = $('#pTable').dataTable( );


        /* Get the rows which are currently selected */
        function fnGetSelected( oTableLocal )
        {
            return oTableLocal.$('tr.row_selected');
        }
     });

So the deleteButton which is being referenced in the code works if I select a row and delete a row. Just the highlighting doesnt work!

Upvotes: 3

Views: 4483

Answers (1)

Jonathan P. Diaz
Jonathan P. Diaz

Reputation: 3274

Is your table id "#pTable"? Did you try adding a debbug stop on that method, to be sure that the selector is working?

On bootstrap to hightlight a row you must use one of this classes

Class   Description
.active     Applies the hover color to a particular row or cell
.success    Indicates a successful or positive action
.warning    Indicates a warning that might need attention
.danger     Indicates a dangerous or potentially negative action

Bootstrap 3 Tables

Upvotes: 3

Related Questions