Question

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

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

Answer 1

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

<强>步骤：

在您的行中添加删除链接等（可能）来自db。
触发该链接后，执行ajax调用以从db中删除该行。出于我们的目的，我们只关注删除操作的成功/失败。
在jQuery ajax调用的成功块中，我们将：
- 删除前获取当前页面上的行数
- 如果它是1，那么我们将获得当前页面的行开始（iDisplayStart），以及当前显示的行数（iDisplayLength）。如果他们的差异是＆gt; = 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

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

1 个答案: