1

I have a table with pagination using DataTables. I am trying to display the table records in a Bootstrap modal. The problem is that I can only get records from the first page which displays only 10 records. I can't get records from the second and other pages; it keeps displaying the last record I chose from the first page.

There might be a method I am missing to get the values from the following pages.

<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Product Name</th>
      <th scope="col">Supplier</th>
      <th scope="col">Volume</th>
      <th scope="col">Quantity</th>
      <th scope="col">Buying Price</th>
      <th scope="col">Selling Price</th>
      <th scope="col">Expiry Date</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <?php include "include/read.inc.php"?>
  </tbody>
</table>

$(document).ready(function() {
  $('.table').DataTable();
  
  $('.editbtn').on('click', function() {
    $('#editModal').modal('show');

    $tr = $(this).closest('tr');
    var data = $tr.children('td').map(function() {
      return $(this).text();
    }).get();

    console.log(data);
    var str = data[3];
    var res1 = str.match(/[0-9]/);
    var res2 = str.match(/[a-z]+/i);

    $('#id').val(data[0]);
    $('#name').val(data[1]);
    $('#supplier').val(data[2]);
    $('#vol').val(res1);
    $('#unit').val(res2);
    $('#qty').val(data[4]);
    $('#bprice').val(data[5]);
    $('#sprice').val(data[6]);
    $('#editExpDate').val(data[7]);
  });
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
abdi
  • 11
  • 1
  • 3
    If you're using [tag:jquery-datatables] then you need to stop thinking jquery/html and start thinking datatables data. Use the datatables API to read all the data across all pages. See https://datatables.net/reference/api/data() – freedomn-m Jun 15 '21 at 09:35
  • As to your question - it's a little unclear as you (appear to) have an `edit` button on each row (given `$(this).closest("tr")`) - so why would you need data from different pages when your data will be for the row you click the edit button within? – freedomn-m Jun 15 '21 at 09:40
  • Yes I have an edit button on each row, but it only works on the first page of the pagination list, if I navigate to the second page, I still get the previous data from the previous page (first page) and not the desired data I choose from the other pages. – abdi Jun 15 '21 at 09:46
  • Can you create a [mcve] snippet? With actual data. There's not enough code provided to recreate the issue. – freedomn-m Jun 15 '21 at 10:12

1 Answers1

0

Appreciations @freedomn-m for your contributions, I finally figured out the problem, it lied on the selector line, I had to include the button selector inside the on('click', 'button_selector', function()); to look something like this

$('.table').on('click','.editBtn', function(){ 
$tr = $(this).closest('tr');
var data = $tr.children('td').map(function(){
return $(this).text(); 
}).get();

Regards.

abdi
  • 11
  • 1