分页后，简单的javascript函数似乎在jQuery Datatables上中断 [英] Simple javascript functions seem to break on jQuery Datatables after paging

问题描述

我遇到了一个有趣的问题，希望有一个简单的解决方案.我正在使用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的情况下刷新页面以记住该页面.

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

解决方案

Datatables具有内置功能来删除行， fnDeleteRow(文档链接).这将处理正确的分页状态，甚至更重要的是，处理插件本身内的实际数据.

我在jsBin上创建了一个小示例来向您展示.

我使用了其中一个示例中的标记，因此看起来有些混乱.

因此，基本上，您将行上的单击处理程序绑定并在td上委派事件，您可以使用按钮执行相同的操作，只需将处理程序中的.center更改为.deleterecord并阻止默认事件.

唯一的区别是调用fnGetPosition以获得行的实际ID时使用的this变量，而deleteRow-Function需要该变量.您可能需要使用类似$(this).parent()[0]的方法来传递td-元素而不是按钮.

为了完整起见，这是处理程序和datatables-plugin的init调用的代码:

  $('#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-调用数据库以删除正确的行，并在服务器返回肯定结果的情况下在回调中执行此代码段.

I'm having an interesting problem that I hope there's an easy solution to. I'm using jQuery Datatables plugin (datatables.net) and I have the paging set to full numbers. In my rows, I have a delete button that when clicked performs a jQuery function. The function simply calls an external source to handle the delete in the database, and uses .remove() to remove the row from the UI.

This works flawlessly until I use paging. If I have more than 10 records, and click to the next page, it no longer works. Here's some code:

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

So I have a link in the row:

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

This calls the click function. So if I click to the next page through paging on the table, the only way I can get this function to work again is if I refresh the page with cookies enabled to remember the page.

Any ideas I hope??? :(

解决方案

Datatables has a built-in function to removes rows, fnDeleteRow (documentation-link). This would handle the correct state of the pagination and, even more important, the actual data within the plugin itself.

I created a little example on jsBin to show you.

I used the markup from one of the examples, so it may look a little messy.

So basically, you bind a click-handler on a row and delegate the event on a td, you could do the same with your button, just change the .center in the handler to .deleterecord and prevent the default event.

The only difference would be the this-variable used when calling fnGetPosition to get the actual id of the row, which you need for the deleteRow-Function. You would probably need to use something like $(this).parent()[0] instead to pass a td - element rather than your button.

This is the code of the handler and the init-call for the datatables-plugin for the sake of completeness:

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

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

Inside the handler, you'd need to set off an ajax - call to the database to delete the correct row and execute this code-snippet in the callback, if the server returns a positive result.

这篇关于分页后，简单的javascript函数似乎在jQuery Datatables上中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！