Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Get selected row count

sundance free asked 5 years ago


Hello,

How can I get selected row count of a datatable? What is the MDB equivalent of Bootstrap 'getSelections'? See sample.

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


sundance free answered 5 years ago


Hi Piotr,

This solution almost solved all of my related problems, thanks.

Only the last, but most important step is missing :(

I can extract row data, but 'pluck' does not work:

   var tableData = $('#dtData').DataTable();

    /* This part works, but it is not exactly what I expect
    $('#dtData tbody').on('click', 'tr', function () {
        var data = tableData.row( this ).data();
        alert( 'You clicked on '+data[1]+'\'s row' );
    });  
    */

    tableData.on ( 'select',  function ( e, dt, type, indexes ) {   
      var rowData = dt.rows( indexes );
      var count   = rowData.count();      
      if ( count == 1 ) {
        // do something with the selected items  
        var colData = rowData.data();
        var cellData= colData[0].pluck(1); //;
        alert ( colData[0] );  // displays a comma separated string

        alert ( cellData );   // cell data is not available, nor with pluck(1), nor with pluck[0]
      }
  });

What is the correct solution? I try to find examples on datatables.net site, but I have no idea, how to fix this issue.

Best regards,

István


sundance free commented 5 years ago

Double indexing solved the problem: var cellData = colData[0][idx]; // idx = 0 ... colCount

Best regards, István


MDBootstrap staff answered 5 years ago


Hi sundance,

Something like this should do the job:

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
} );

If you need additional help I am here for you.

Best Regards, Piotr

PS We are using DataTables plugin with the addition of our styles but the main part of its js functionality is the same as in classic DataTables plugin which has its own support forum that has extended usage examples.


MDBootstrap staff answered 5 years ago


Hi sundance,

To get data out of dataTables you need to use simple funtion .data(); This code should help:

table.rows( { selected: true } ).data();

If you need additional help I am here for you.

Best Regards, Piotr


sundance free commented 5 years ago

Hi Piotr,

At first sight this solution seemed to be good, but I was not able to built in. With var myTable = $("#dtData"); myTable.rows( { selected: true } ).data(); resulted the following error: rm_admin_mdb.php:1328 Uncaught TypeError: myTable.rows is not a function at HTMLTableRowElement.

Above this one question is still open, how can I get selected row count? I tried myTable.rows( { selected: true } ).length(); myTable.rows( { selected: true } ).count(); without success.

I created a script about my idea. I'd like to disable/enable Edit and Delete buttons depending on selected row count.

https://mdbootstrap.com/snippets/jquery/sundance/1067362

Additionally I'd like do inhibit multiple selection. I tried select: [{ style: 'single' }], and similar solution, but I did not find correct metod.

Best regards, István


sundance free commented 5 years ago

Single selection problem solved with: select: 'single', //instead of true



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.7
  • Device: PC
  • Browser: Chrome
  • OS: Windows 7 Prof. 64-bit
  • Provided sample code: No
  • Provided link: Yes