Question 120948 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – get specific attribute value from row for each record in datatables

I have tried many times but it seems that something is wrong from my side, I would like to get(retrieve) the attribute value of every row of a table for example productID attribute which is written below.

e.g..

<button id="button">Show ID Product Attribute</button>
<table class="display" width="100%" id="example" > 
  <thead>
   <tr>
     <th>#</th>
     <th>Product</th>
     <th>Price</th>
   </tr> 
  </thead>
  <tbody>   


<?php 
  $answer = ProductsController::showProducts();
  foreach ($answer as $key => $value) {
       echo '<td>'.($key+1).'</td>
             <td  productID="'.$value["id"].'">'.$value["productName"].'</td>
             <td>'.$value["price"].'</td>';
  }

?>  



<script type="text/javascript">
    $(document).ready(function () {
    var table = $('#example').DataTable();
 
    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });
 
    $('#button').click(function () {
        
        console.log(table.rows('.selected').data());  //return all selected row data

    });
});
</script>

The problem is here if I select more than 1 row and click on the Show ID Product Attribute button it returns the below text but I would like to access only the productID attribute which is hidden in the below result

{
    "0": ["1", "Milk", "100"],
    "1": ["2", "Tea", "200"]

}

How can I able to do find it, I really appreciate your help.

Tags:

2

Answers


  1. 0

    you can use data-search attribute to indicate actual value for # column, like this:

     $(document).ready(function () {
    var table = $('#example').DataTable();
 
    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });
 
    $('#button').click(function () {
        let ids = [];
        table.rows('.selected').every(function ( rowIdx, tableLoop, rowLoop ) {
          let data = parseInt(this.data()[0]["@data-search"], 10);
          ids.push(data);
        });
        console.log(ids); // logs all selected ids
    });
});
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />

<button id="button">Show ID Product Attribute</button>
<table class="display" width="100%" id="example" > 
  <thead>
   <tr>
     <th>#</th>
     <th>Product</th>
     <th>Price</th>
   </tr> 
  </thead>
  <tbody>   
    <tr><td data-search="123">1</td><td>Milk</td><td>100</td>
    <tr><td data-search="456">2</td><td>Tea</td><td>200</td>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    You could loop through the selected rows and output the relevant entry from the array for that row:

    $(document).ready(function() {
  var table = $('#example').DataTable();

  $('#example tbody').on('click', 'tr', function() {
    $(this).toggleClass('selected');
  });

  $('#button').click(function() {

    var rows = table.rows('.selected').data();
    for (let i = 0; i < rows.length; i++) {
      console.log(rows[i][0]);
    }


  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />

<button id="button">Show ID Product Attribute</button>

<table class="display" width="100%" id="example">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td productID="1">Product 1</td>
      <td>3.50</td>
    </tr>
    <tr>
      <td>2</td>
      <td productID="2">Product 2</td>
      <td>24.60</td>
    </tr>
    <tr>
      <td>3</td>
      <td productID="3">Product 3</td>
      <td>63.00</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search