如何从DataTable选中行中获取productID自定义属性值

我多次尝试都没成功，想获取DataTable表格每行的productID属性值。目前通过PHP渲染了带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>';
  }
?>   
</tbody>
</table>

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

当前返回结果示例 #

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

解决方法 #

方法1：直接从DOM元素提取productID #

既然productID绑定在Product列的<td>上，我们可以通过选中行的DOM节点直接获取这个自定义属性：

修改按钮点击事件的代码：

$('#button').click(function () {
    const productIds = [];
    // 遍历所有选中行
    table.rows('.selected').every(function() {
        // 找到当前行的第二个<td>（对应Product列，索引从0开始计数）
        const productTd = $(this.node()).find('td:eq(1)');
        // 获取productID属性值
        const productId = productTd.attr('productID');
        if (productId) {
            productIds.push(productId);
        }
    });
    console.log(productIds); // 输出选中行的productID数组
});

方法2：将productID纳入DataTable数据源（更推荐） #

如果希望避免依赖DOM属性，让DataTable的行数据直接包含productID，可以添加隐藏列存储该值：

步骤1：修改PHP渲染代码，添加隐藏列

<?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>
             <td style="display:none;">'.$value["id"].'</td>'; // 新增隐藏列存放productID
  }
?>

步骤2：修改DataTable初始化及按钮事件

$(document).ready(function () {
    var table = $('#example').DataTable({
        columnDefs: [
            { targets: 3, visible: false } // 隐藏第4列（索引为3）
        ]
    });
 
    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });
 
    $('#button').click(function () {
        // 从选中行数据中提取隐藏列的productID
        const productIds = table.rows('.selected').data().map(row => row[3]);
        console.log(productIds);
    });
});

内容的提问来源于stack exchange，提问作者Omar Raza