DataTables jQuery插件服务器端处理，通过ajax删除后智能分页

Posted 2023-02-19

【中文标题】DataTables jQuery插件服务器端处理，通过ajax删除后智能分页

【英文标题】：DataTables jQuery plugin server-side processing, smart pagination after delete via ajax

【发布时间】：2012-12-10 18:07:03

【问题描述】：

任务： 使用 ajax 从表行中的链接删除 db 中的记录，并在 (awesome :) DataTables jQuery 插件 (link) 中维护过滤器、排序、分页。

如果当前页面上的最后一项被成功删除，我希望分页返回，而不是显示“未找到匹配记录”之类的消息和像 '显示 11 到 10 这样的愚蠢分页信息10 行的

【参考方案1】：

我将从您准备好 DataTables 的步骤开始，完成 server-side 数据、过滤、分页。

步骤：

在您的行中添加删除链接等，（可能）来自 db。 触发该链接后，执行 ajax 调用以从 db 中删除该行。出于我们的目的，我们只关心删除操作的成功/失败。 在 jQuery ajax 调用成功块中，我们将： 获取删除前当前页面的行数 如果为 1，那么我们将获得当前页面的行首 (iDisplayStart)，以及当前显示的行数 (iDisplayLength)。如果它们的差异 >= 0，那么我们将使用一个小插件来重绘表格（一个 ajax 调用），或者对行进行简单的本地删除。 否则，只需删除该行即可。

代码：

// delete user
$("a.deleteUser").live("click", function(e)
e.preventDefault();
var isDelete = confirm("Delete sub-user? This cannot be undone.");
if (isDelete == true)
    var uid = $(this).attr('uid');
    var i = $(this).attr('i');
    $.ajax( 
        url: baseUrl + 'user/delete?uid=' + uid, 
        dataType:'json', 
        beforeSend: function() 
            listTable.fnProcessingIndicator();
        ,
        success: function(response)
            if (response == 'SUCCESS')
                var rowsOnThisPageBeforeDelete = listTable.fnGetData().length;

                if (rowsOnThisPageBeforeDelete == 1)
                    var numberOfRowsOnPage = listTable.fnSettings()._iDisplayLength;
                    var startOfRows = listTable.fnSettings()._iDisplayStart;
                    var newStartOfRows = startOfRows - numberOfRowsOnPage;

                    if (newStartOfRows >= 0)
                        listTable.fnDisplayStart(newStartOfRows);
                    
                    else
                        listTable.fnDeleteRow(i);
                    
                
                else
                    listTable.fnDeleteRow(i);
                                   
            
            else
                alert('Could not delete user. Try again later.');
            
        ,
        error: function()
            alert('Could not delete user. Try again later.');
        ,
        complete: function() 
            listTable.fnProcessingIndicator(false);
        ,
    );

);

您需要的插件是 http://datatables.net/plug-ins/api#fnDisplayStart 。如果您是新手，请对如何将插件与 DataTables 一起使用做一些研究（链接中的说明）：

$.fn.dataTableExt.oApi.fnDisplayStart = function ( oSettings, iStart, bRedraw )

if ( typeof bRedraw == 'undefined' )

    bRedraw = true;


oSettings._iDisplayStart = iStart;
oSettings.oApi._fnCalculateEnd( oSettings );

if ( bRedraw )

    oSettings.oApi._fnDraw( oSettings );

;

// sample use:
/*
oTable.fnDisplayStart( 10 );
*/

参考资料：

http://datatables.net/forums/discussion/comment/4527#Comment_4527