теги данных работают только на первой странице таблицы данных

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

Ваш код должен работать, но вы не указываете самое важное: как вы ловите событие нажатия.Возможно, вы использовали что-то вроде

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

Кроме этого, в вашем коде нет ничего плохого.