Question

我有一个数据表用户，我允许管理员编辑信息。但问题是，为了将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();
     }
});

Answer 1

您可以尝试委托。

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

    // Etc.
}

tbody不应该因ajax重装而感到震惊。

JQuery DataTables - fnReloadAjax（）如何重新加载fnDrawCallback或fnInitComplete

1 个答案: