如何从具有多个页面的表中获取表记录？

Posted 2023-05-09

【中文标题】如何从具有多个页面的表中获取表记录？

【英文标题】：How to get table records from a table with multiple pages?

【发布时间】：2021-08-31 03:31:42

【问题描述】：

我有一个使用 DataTables 进行分页的表。我正在尝试在 Bootstrap 模式中显示表记录。问题是我只能从只显示 10 条记录的第一页获取记录。我无法从第二页和其他页面获取记录；它一直显示我从第一页选择的最后一条记录。

我可能缺少从以下页面获取值的方法。

<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]);
  );
);

【问题讨论】：

如果您使用的是jquery-datatables，那么您需要停止思考 jquery/html 并开始思考数据表数据。使用 datatables API 读取所有页面中的所有数据。见datatables.net/reference/api/data()

至于你的问题 - 有点不清楚，因为你（似乎）在每一行都有一个 edit 按钮（给定 $(this).closest("tr")） - 那么为什么你需要来自不同页面的数据？数据将用于您单击其中的编辑按钮的行？

是的，我在每一行都有一个编辑按钮，但它只适用于分页列表的第一页，如果我导航到第二页，我仍然会从上一页获取以前的数据（第一页），而不是我从其他页面中选择的所需数据。

你能创建一个minimal reproducible examplesn-p 吗？有实际数据。没有提供足够的代码来重现问题。

【参考方案1】：

感谢@freedomn-m 你的贡献，我终于找到了问题，它在于选择器行，我必须在 on('click', 'button_selector', function()); 中包含按钮选择器看起来像这样

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

问候。