0

任务：使用 ajax 从表行中的链接删除数据库中的记录，并在（真棒：）DataTables jQuery 插件（链接）中维护过滤器、排序、分页。

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

4

1 回答 1

0

我将从您准备好 DataTables 的步骤开始，完成服务器端数据、过滤、分页。

脚步：

  • 在您的行中添加一个删除链接等，（可能）来自 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 );
*/

参考：

于 2012-12-24T09:08:11.683 回答