在 DataTables 的第二页中添加行后，操作事件不起作用

Posted 2023-05-08

【中文标题】在 DataTables 的第二页中添加行后，操作事件不起作用

【英文标题】：Actions events not working after adding row in the second page on DataTables

【发布时间】：2020-09-26 04:23:57

【问题描述】：

所以我有一个带有操作按钮的数据表，它在第一页上运行良好。 但是当我更改页面时，更改显示条目的数量或搜索条目上隐藏的条目上的事件不起作用：

试过这个： Datatable event on page change not working 但我不能让它工作。

小提琴：https://jsfiddle.net/webolive/vg3wkx0d/28/

这是我的代码的简化版本：

$(document).ready(function() 

  let table = $('#myTable').DataTable(
    "drawCallback": initRowsEvents(),
  );

  let index = 2;

  function initRowsEvents() 

    $(".hi").unbind().click(function() 
      let name = $(this).parent().prev().text();
      alert('Oh, Hi ' + name + '!');
    );

    $(".copy").unbind().click(function() 
      let name = $(this).parent().prev().text();
      let actionsTpl = '<button class="hi">Hi</button> <button class="copy">Copy</button>';

      table.row.add([index++, name, actionsTpl]).draw();
      initRowsEvents();
    );
  

  // Tried this event, doesn't seems to work in this case...
  $('#myTable').on('length.dt', () => initRowsEvents());


);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="myTable" class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>
        <button class="hi">Hi</button>
        <button class="copy">Copy</button>
      </td>
    </tr>
  </tbody>
</table>

【参考方案1】：

搜索后我发现了这个例子：https://datatables.net/examples/advanced_init/events_live.html 所以解决方案是将事件放在表体上而不是行上，所以不需要 重新初始化它。

$(document).ready(function() 

  let table = $('#myTable').DataTable("stateSave": true);
  let index = 2;

   $('#myTable tbody').on('click', 'button', function () 
        let name = $(this).parent().prev().text();
        let actionsTpl = '<button class="hi">Hi</button> <button class="copy">Copy</button>';
        
        if($(this).hasClass('hi'))
          alert('Oh, Hi ' + name + '!');
          
        if($(this).hasClass('copy')) 
          table.row.add([index++, name, actionsTpl]).draw();
        
    );
);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="myTable" class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>
        <button class="hi">Hi</button>
        <button class="copy">Copy</button>
      </td>
    </tr>
  </tbody>
</table>