Display number of selected rows

amaya

Is there a way to dynamically display the number of selected rows in a table? I want something like "n selected" at the top of the table, and have it update itself as the selection changes.

dacke87

$(document).ready(function() {
var table = $('#example').DataTable();
     $('#example tbody').on( 'click', 'tr', function () {
     $("#tableRowNumber").text($(this).index()+1);
    } );
});

and on html page just add
<span id="tableRowNumber"></span>
example

gyrocode

If you use or would like to use Select extension, it already shows number of selected rows in the informational panel, see this example.

You can also use API to get number of selected rows, see this example.

You can hanlde select and deselect events which occur when row selection changes and update number of selected rows.

var table = $('#example').DataTable();

table.on( 'select', function ( e, dt, type, indexes ) {
    var count = table.rows( { selected: true } ).count();

    // do something with the number of selected rows
} );

---

See more articles about jQuery DataTables on gyrocode.com.

crwdzr

the select extension does it automatically, it shows it under the table but you might be able to reposition it with the dom

select: https://datatables.net/extensions/select/
dom: https://datatables.net/reference/option/dom

crwdzr

alternatively if you didn't use select and you made your own row selection process you could try to integrate this: https://datatables.net/reference/api/count() and use it to update your counter every time you select/deselect a row

amaya

Ok, I got it to displays the number of selected rows (I'm using the select plugin now). Thanks!

Now I'm having trouble controlling where the information appears. I want to display the number of selected rows at the top, and the paging information at the bottom ("Showing X to Y of Z entries").

Both select-info and paging-info seems to be controlled by 'i' in the dom-option.

If I put it at the top or bottom only, it displays paging- and select-info together there.

If I put it up at the top AND bottom, it displays only paging information at the top, and paging- and select-info at the bottom.

Any ideas?