0

我有一个有趣的问题，我希望有一个简单的解决方案。我正在使用 jQuery Datatables 插件（datatables.net），并且我将分页设置为全数。在我的行中，我有一个删除按钮，单击该按钮会执行 jQuery 函数。该函数只是调用外部源来处理数据库中的删除，并使用 .remove() 从 UI 中删除行。

在我使用分页之前，这完美无缺。如果我有超过 10 条记录，然后单击到下一页，它将不再有效。这是一些代码：

jQuery('.deleterecord').click(function(){
    var conf = confirm('Continue delete?');
        if(conf)
            jQuery(this).parents('tr').fadeOut(function(){
            jQuery(this).remove();
            jQuery.jGrowl("Record has been removed!");
        });

    return false;
 });

所以我在行中有一个链接：

<a class="deleterecord">Delete</a>

这调用了 click 函数。因此，如果我通过表格上的分页单击到下一页，我可以让此功能再次工作的唯一方法是如果我刷新页面并启用 cookie 以记住该页面。

我希望有什么想法？？？:(

4

1 回答 1

0

Datatables 具有用于删除行的内置函数fnDeleteRow (documentation-link)。这将处理分页的正确状态，更重要的是，插件本身的实际数据。

我在 jsBin 上创建了一个小例子来展示给你看。

我使用了其中一个示例中的标记，因此它可能看起来有点乱。

所以基本上，您在一行上绑定一个点击处理程序并将事件委托给一个 td，您可以对您的按钮执行相同的操作，只需.center将处理程序中的更改为.deleterecord并阻止默认事件。

唯一的区别是this调用fnGetPosition以获取行的实际 id 时使用的 -variable，这是 deleteRow-Function 所需的。您可能需要使用类似的东西$(this).parent()[0]来传递td- 元素而不是您的按钮。

为了完整起见，这是处理程序的代码和数据表插件的初始化调用：

  $('#example tbody tr').on('click', '.center', function () {
    var aPos = oTable.fnGetPosition(this);
    oTable.fnDeleteRow(aPos[0]);
  });

  // Init DataTables
  oTable = $('#example').dataTable({
    "sPaginationType": "full_numbers"
  });

在处理程序内部，如果服务器返回肯定结果，您需要启动 ajax - 调用数据库以删除正确的行并在回调中执行此代码片段。

于 2013-02-19T00:39:26.583 回答