数据标签仅适用于数据表的第一页答案

【问题标题】：data tags are working only on the first page of dataTable数据标签仅适用于数据表的第一页
【发布时间】：2018-05-29 14:59:40
【问题描述】：

我有一个用foreach 制作的表格。对于每一行，我给编辑按钮（显示一个模式）提供一些带有产品详细信息的数据标签。

当单击编辑按钮时，我会获取每个data tag 并将信息存储在variables 中。问题是，在我切换到另一个页面后，javascript 变量将被最后一个@987654325 卡住@ 从第一页开始使用。

我看到了有关此的问题，但用户使用的是 checkboxes 或 links，而不是 data tags。

我的桌子：

<tbody>
    <?php foreach ($products as $product):?>
        <tr class="active">
            <td><?php echo $product['products_id']; ?></td>
            <td><?php echo $product['product_name'];?></td>
            <td><?php echo $product['ingredients'];?></td>
            <td><?php echo $product['grams'];?></td>
            <?php if($product['show'] == 0): ?>
                <td><?php echo 'Nu'; ?></td>
            <?php else: ?>
                <td><?php echo 'Da'; ?></td>
            <?php endif; ?>
            <td><?php echo $product['price'];?></td>
            <td>
                <i class="fas fa-edit edit-btn" data-toggle="modal" data-target="#editModal" data-prod_category = "<?php echo $product['category']; ?>" data-prod_img="<?php echo $product['image']; ?>" data-prod_name="<?php echo $product['product_name']; ?>" data-prod_id="<?php echo $product['products_id']; ?>" data-prod_ingredients="<?php echo $product['ingredients'];?>" data-prod_grams="<?php echo $product['grams'];?>" data-prod_price="<?php echo $product['price'];?>" data-prod_show="<?php echo $product['show']; ?>"></i>
                <button type="button" class="delete_toggle" data-toggle="modal" data-target="#deleteModal" data-prod_id="<?php echo $product['products_id']; ?>" style="border: none;"><i class="fas fa-trash"></i></button>
            </td>
        </tr>
    <?php endforeach; ?>
</tbody>

jquery：

var id = $(this).data('prod_id');
            var name = $(this).data('prod_name');
            var category = $(this).data('prod_category');
            var ingredients = $(this).data('prod_ingredients');
            var grams = $(this).data('prod_grams');
            var price = $(this).data('prod_price');
            var show = $(this).data('prod_show');
            var img = $(this).data('prod_img');

            var details = [id,name,category,ingredients,grams,price,show,img];

【问题讨论】：

标签： jquery datatable

【解决方案1】：

您的代码应该可以工作，但您没有指定最重要的事情：您如何捕获点击事件。也许你正在使用类似的东西

$('.delete_toggle').click(function() {
  var id = $(this).data('prod_id');
  // etc
});

这显然不能在尚未由 DataTable 生成的页面上工作。您需要以这种方式绑定事件：

$('#your_table_id').on('click', '.delete_toggle', function() {
  var id = $(this).data('prod_id');
  // etc
});

除此之外，您的代码没有任何问题。

【讨论】：