JQuery DataTables - fnReloadAjax() 如何重新加载 fnDrawCallback 或 fnInitComplete答案

【问题标题】：JQuery DataTables - fnReloadAjax() How to reload the fnDrawCallback or fnInitCompleteJQuery DataTables - fnReloadAjax() 如何重新加载 fnDrawCallback 或 fnInitComplete
【发布时间】：2011-11-08 19:42:45
【问题描述】：

我有一个用户数据表，允许管理员编辑其信息。但问题是，为了将 jquery 函数绑定到数据表中的某些单元格，需要在数据表初始化的 fnDrawCallback 或 fnInitComplete 选项中列出函数。但是，当用户更新一行并执行 fnReloadAjax（以显示新更改）时，绑定到表格单元格的所有 JQuery 不再可用！我尝试将所有 JQuery 代码都放在 fnDrawCallback 和 fnInitComplete 中，并且都具有相同的结果。有什么想法吗？

    var oTable = $('.admin_users').dataTable({
    "bProcessing": true,
    "sAjaxSource": 'sql/admin_users.php',       
    "aaSorting": [[ 1, "asc" ]],
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bStateSave": true, //Use a cookie to save current display of items
    "aoColumns": [
        {"asSorting": [  ]},
        null,
        null,
        null,
        { "sType": "date", "sClass":"center" }
    ],
    "fnDrawCallback": function(){
            //Edit row
            $('.button_edit').click(function(){
                $(':input[type="text"]').val('');
                $(':input[type="checkbox"]').removeAttr('checked');
                $('.admin_edit_button.button_update').attr('id',$(this).attr('id'));
                $('.admin_edit_user').slideDown();
                var userid = $(this).attr('id');
                //GET USER INFO
                $.ajax({
                    url: 'sql/admin_edit',
                    type: 'POST',
                    dataType: 'json',
                    data: 'getinfo=true&userid='+userid,
                    success: function(data){
                        //FILL IN INPUTS WITH USER VALUES
                    }
                });
                //UPDATE CHANGES
                $('.admin_edit_button.button_update').click(function(){
                    //GET NEW/UNCHANGED VALUES
                    $.ajax({
                        url: 'sql/admin_edit.php',
                        type: 'POST',
                        async: false,
                        data: //SEND DATA HERE,
                        success: function(response){
                            if(response=='true'){
                                $(':input[type="text"]').val('');
                                $(':input[type="checkbox"]').removeAttr('checked');
                                $('.admin_edit_user').slideToggle(function(){oTable.fnReloadAjax()});

                                alert("Success!");
                            }
                            if(response=='false')
                                alert('Failed to update user');
                        },
                        error: function(response){
                                alert('Failed to update user');
                        }
                    });
                });
            });
            $('.button_cancel').click(function(){
                $('.admin_edit_user').slideUp();
                $(':input[type="text"]').val('');
                $(':input[type="checkbox"]').removeAttr('checked');
            });
    },
    "bScrollCollapse": true,
    "sScrollX": "100%",
     "fnInitComplete": function() {
            oTable.fnAdjustColumnSizing();
     }
});

【问题讨论】：

标签： jquery ajax datatables

【解决方案1】：

你可以试试委托。

...
fnInitCallback: function(settings){
    $('tbody',settings.nTableWrapper).delegate('.button_edit', 'click', function(){
        // Edit handler
    });

    // Etc.
}

tbody 不应该被 ajax 重新加载所震撼。

【讨论】：