Datatables.net 和 sweetalert

Question

所以我正在使用 Datatables and every row has a delete button at the end, which I use in combination with Sweetalert。

我每页有 10 个结果，如果有更多页，我转到下一页并尝试使用删除按钮，但没有任何反应。这就像 sweetalert 没有为前 10 行之外的任何其他内容呈现。

下面是我的 Sweetalert 代码，但我不认为它与此代码相关，因为它在前 10 行工作正常。

<script>
    $(document).ready(function () {
        $('.deleteItem').on('click', function (e) {
            e.preventDefault();
            var form = $(this).parents('form');
            Swal.fire({
                title: 'Some title',
                text: "Some text",
            }).then((result) => {
                if (result.value) {    
                    form.submit();
                }
            });
        });
    });
</script>

我只是想知道使用 Datatables 的其他人是否运行遇到了类似的问题，或者是否有人知道问题可能是什么。好像只有前 10 行在页面上呈现。

我初始化数据表的方式很简单，没什么特别的：

$(document).ready(function () {
    $('.datatable').dataTable();
});

我所有的删除按钮都是这样的：

<form method="POST" action="something">
    <a type="submit" class="deleteItem">
        Delete
    </a>
</form>

Answer 1

如您所述，其他删除锚点不在其他页面的 DOM 中。您可以侦听由 DataTables 触发的 draw 事件，并在此处使用 Sweetalert 分配点击处理程序。我已经定义了一个函数 registerDeleteItemHandlers 来封装点击事件处理程序的注册。

$(document).ready(function () {
  const registerDeleteItemHandlers = () => {
    $(".deleteItem").on("click", function (e) {
      e.preventDefault();
      var form = $(this).parents("form");
      Swal.fire({
        title: "Some title",
        text: "Some text",
      }).then((result) => {
        if (result.value) {
          form.submit();
        }
      });
    });
  };

  registerDeleteItemHandlers();

  $(".datatable")
    .dataTable()
    .on("draw.dt", function () {
      registerDeleteItemHandlers();
    });
});

Datatables.net 和 sweetalert

Datatables.net and sweetalert

datatables

sweetalert