Question

我有一张用foreach制作的表。对于每一行，我都会给编辑按钮（显示一个模态）一些带有产品详细信息的数据标记。

当单击编辑按钮时，我会每data tag采取一次，然后将信息存储在variables中。问题是，在我切换到另一个页面后，javascript变量将获得坚持使用第一页上使用的最后一个data tags。

我看到了有关此问题，但用户使用的是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];

Answer 1

您的代码应该可以运行，但是您没有指定最重要的事情：您如何捕获click事件。也许你正在使用像

这样的东西

$('.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
});

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

数据标记仅在dataTable的第一页上有效

1 个答案: