时间戳

首页 > 解决方案 > 如何从具有多个页面的表中获取表记录？

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

问题描述

我有一个使用 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]);
  });
});

标签： javascripthtmljquerydatatablesbootstrap-modal

解决方案

感谢@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();

问候。

推荐阅读