How to Get Data from checkbox selected row in dataTables

Question

I'm using this data table .

I need to get both ProductID & ProductStatus from the selected row where ProductID is embedded in the TR ID of each row.

I'm not displaying the productStatus in the table. But I need to get the status when the row is selected. Where can i add them ?

Please Guide me ....

CODE

function loadClick() {

  const databaseRef = firebase.database().ref('S01/Products');
  var query = databaseRef.orderByKey().startAt("C09M03S03").endAt("C09M03S04").limitToFirst(6);

  query.once("value")
    .then(function (snapshot) {
      snapshot.forEach(function (childSnapshot) {

        var t = $('#products_table').DataTable();

        var key = childSnapshot.key;

        var MID = childSnapshot.child("productMID").val();
        var SID = childSnapshot.child("productSID").val();
        var ProductID = childSnapshot.child("productID").val();
        var name = childSnapshot.child("productName").val();
        var unit = childSnapshot.child("productUnit").val();
        var productMRP = childSnapshot.child("productMRP").val();
        var price = childSnapshot.child("productSellingPrice").val();
        var buying_price = childSnapshot.child("productBuyingPrice").val();
        var productstatus = childSnapshot.child("productStatus").val();

        var row = "";

        t.row.add(['<td class="cell-60 responsive-hide"></td><td class="cell-300"><a class="avatar" href="javascript:void(0)"><img class="img-responsive" src="../../../global/portraits/1.jpg"alt="..."></a></td>', '<td>' + name + '</td>',
        '<td>' + unit + '</td>', '<td tabindex="1">' + productMRP + '</td>', '<td tabindex="2">' + price + '<\/td>',
        '<td tabindex="3">' + buying_price + '<\/td>']).node().id = ProductID;
        t.draw(false);

      });
    });
}

function EditProdStatus(ProductID, ProductStatus) {
  var statusRef = firebase.database().ref('S01/Products').child(ProductID).child("productStatus");
  statusRef.set(!ProductStatus);
  console.log("Product Status changed to " + ProductStatus);
}

$(document).ready(function () {
  loadClick();
  var table = $('#products_table').DataTable({
    'columnDefs': [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    },
    {
      'targets': 3,
      'createdCell': function (td, cellData, rowData, row, col) {
        $(td).attr('tabindex', '1');
      }
    },
    {
      'targets': 4,
      'createdCell': function (td, cellData, rowData, row, col) {
        $(td).attr('tabindex', '2');
      }
    },
    {
      'targets': 5,
      'createdCell': function (td, cellData, rowData, row, col) {
        $(td).attr('tabindex', '3');
      }
    }
    ],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    order: [[1, 'asc']]
  });

});

function productDisable() {

  var oTable = $('#products_table').dataTable();
  $(".select-checkbox:checked", oTable.fnGetNodes()).each(function () {
    console.log($(this).val());
  });
}

HTML

   <table id="products_table" class="table is-indent tablesaw" cellspacing="0" width="100%">
                      <thead>
                            <tr>
                                  <th class="pre-cell"></th>
                                  <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Product Name</th>
                                  <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product Unit</th>
                                  <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product MRP</th>
                                  <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Selling Price</th>
                                  <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Buying Price</th>
                            </tr>
                      </thead>
                </table>

jsFiddle Demo

Answer 1

For those td which you don't want to display in DataTable, you just need to provide Visible:false in your columnDefs . They will be hidden but you can retrieve their data if they are in selected rows.

$('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }, {
      "targets": [2],
      "visible": false,
      "searchable": false
    }]
})

Another thing is you are using fnGetNodes which is a legacy function for datatable v1.9 on selection which is not going to work for DataTable 10.1. You can get selected rows as follow:

table.rows('.selected').data();

This is going to return selected rows even if you have selected multiple rows in different pages.

You can find a Demo here .

As you can see in demo that for Employees data, their position column in not visible in DataTable but its data is available while retrieving data of selected rows.

Documentation here for Hidden columns

---

Update

I have updated your Fiddle. Updated Fiddle .

Answer 2

Try this, it helps you

 var table = $('#example').DataTable(); $('#example tbody').on( 'click', '.checkbox', function () { if(this.checked==true) { console.log( table.row( this.closest('tr') ).data() ); } } );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/js/jquery.dataTables.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/css/jquery.dataTables.css" rel="stylesheet"/> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>check</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="checkbox" ></td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td><input type="checkbox" class="checkbox" ></td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table>

Answer 3

Try this ...

Add your productStatus column to the HTML :

'<td>' + productStatus + '</td>'

Let's say that's at column index 8. So add the following to the dataTables columnDefs :

{
    'targets': 8,
    'visible': false,
}

Now, in productDisable() , you can get productID & productStatus from each selected row as follows :

function productDisable() {
    table.rows(".selected").every(function() {
        var row = this.node();
        var productID = row.id;
        var productStatus = this.data()[8]; 
        console.log(productID, productStatus);
        // do whatever with productID and productStatus
    });
}

Demo

Answer 4

I a using Datatable 1.10 and this Code is Working for me "btnSubmit" is the Id of the Button when you click on the button selected checkbox data you will get

   // Handle form submission event 
   $('#btnSubmit').on('click', function() {
       //Hold the Object Data what are the checkbox selected
       var tblData = table.api().rows('.selected').data();
       var tmpData;
       //Iterate the Object and extract you one one by one row data With Hidden Id Also
          $.each(tblData, function(i, val) {
            tmpData = tblData[i];
            alert(tmpData);
          }); 
    })

Answer 5

//You can use this one.
$( $('#example').DataTable().$('.checked').map(function () 
{
    return $(this).closest('tr');
    //want to get attribute
    //var id = $(this).closest('tr').find('td.Select').attr('id');
}));