jQuery Datatble: Hide row selection information on bottom left of the table

Question

I am displaying a Jquery Datatable and i need to highlight the row, on row selection. I already figured that out using:

$('#example').dataTable({
 select: true
})

The problem is, when i select a row, the information "Showing 1 to 10 of 19 entries1 row selected" is displayed on bottom left of the table. I just want to keep the "Showing 1 to 10 of 19 entries". I tried:

$('#example').dataTable({
 select: true,
 "bInfo": false
})

But, this removes the entire thing. Is there a workaround for this?

Answer 1

Use the below script: (Code is based on Fiddle)

$(document).ready( function () {
    $('#table_id').DataTable({
    paging: true,
    select: true
    });

    var table = $('#table_id').DataTable();
    table.select.info( false);

} );

Answer 2

You were on the right track with using info:false but it needs to be inside a select object that helps configure the select . I also noticed that you have to also specify the style option or it doesn't work so I used the default os style

more info here

To answer your comment you can select the first row by using row().select I have updated my answer to include that.

 $(document).ready(function() { let table = $('#table_id').DataTable({ paging: true, select: { style: 'os', info: false } }); // select the first row table.row(':eq(0)').select(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script> <table id="table_id" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>XYZ</td> <td>ABC</td> </tr> <tr> <td>XYZ</td> <td>ABC</td> </tr> <tr> <td>XYZ</td> <td>ABC</td> </tr> </tbody> </table>