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

I don't want to show the status in the table. But I need it to send to the function — Arulnadhan
– Arulnadhan, Commented Apr 15, 2017 at 8:26

mmushtaq · Accepted Answer · 2017-04-16 06:37:28Z

10

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 .

edited Apr 16, 2017 at 6:37

answered Apr 15, 2017 at 9:14

mmushtaq

3,5307 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arulnadhan Over a year ago

It worked. But I can't retrieve the Product status & productID ?

mmushtaq Over a year ago

@user3467240 In your html of table you don't have columns for ProductID and ProductStatus.

mmushtaq Over a year ago

And in t.row.add([....] you are not adding values for ProductId and ProductStatus.

Arulnadhan Over a year ago

I'm adding ProductID as TR ID for Each row. I have added productStatus as my 2nd columns & set visible to false. To make it simple, I need to get the TR ID & the value of 2nd Column of the selected Rows.

Dinesh Kumar · Accepted Answer · 2017-04-15 07:12:42Z

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>

Roamer-1888 · Accepted Answer · 2017-04-16 19:25:02Z

0

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

edited Apr 16, 2017 at 19:25

answered Apr 15, 2017 at 12:30

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

4 Comments

Roamer-1888 Over a year ago

If you can publish a live demo in jsFiddle or codePen, I'll see if I can debug it.

Arulnadhan Over a year ago

jsFiddle - jsfiddle.net/ArulNadhaN/vjqj7eg5/1

Roamer-1888 Over a year ago

Sorry, that's not working for me at all. I need something at least partially working before I can start debugging the actual issue.

Roamer-1888 Over a year ago

No matter, I managed to get something working in a local file. See edited answer.

Abhijit Patra · Accepted Answer · 2020-01-20 13:37:10Z

-1

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

answered Jan 20, 2020 at 13:37

Abhijit Patra

674 bronze badges

Comments

Ujjwal Sharma · Accepted Answer · 2020-08-26 09:48:33Z

-1

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

answered Aug 26, 2020 at 9:48

Ujjwal Sharma

1

Collectives™ on Stack Overflow

How to Get Data from checkbox selected row in dataTables

5 Answers 5

4 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related