数据标签仅在dataTable的第一页上起作用

Question

I have a table made with a foreach .For every row i give to the edit button(which show up a modal) some data tags with the product details.

When the edit button it's clicked i take every data tag and i store the information in variables .The problem is that,after i switch to another page, the javascript variables will get stucked with the last data tags used from the first page.

I saw questions about this but the users were using checkboxes or links , not data tags .

My table:

<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

Your code should work, but you don't specify the most important thing: how you are catching the click event. Maybe you were using something like

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

Which obviously cannot work on pages not yet generated by DataTable. You need to bind the event in this manner:

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

Other than that, there's nothing wrong with your code.