javascript 从datatables中每个记录的行中获取特定的属性值

k2arahey 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(120)

我已经尝试了很多次，但似乎从我这边出了问题，我想获取（检索）表中每一行的属性值，例如下面写的productID属性。
例如。

<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>

问题是这里如果我选择超过1行并单击显示ID产品属性按钮，它将返回下面的文本，但我只想访问隐藏在下面结果中的productID属性

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

}

我怎么能找到它呢，我真的很感激你的帮助。

JavaScript

来源：https://stackoverflow.com/questions/76159166/get-specific-attribute-value-from-row-for-each-record-in-datatables

2条答案

按热度按时间

vnzz0bqm1#

您可以使用data-search属性来指示#列的实际值，如下所示：

$(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>

赞(0）回复(0）举报 2023-05-05

6l7fqoea2#

您可以循环遍历所选的行，并从数组中输出该行的相关条目：

$(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>

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 从datatables中每个记录的行中获取特定的属性值

2条答案

相关问题

热门标签

最新问答