0

タスク:テーブル行のリンクから ajax を使用して db のレコードを削除し、(awesome :) DataTables jQuery プラグイン ( link )でフィルター、並べ替え、ページネーションを維持します。

現在のページの最後のアイテムが正常に削除された場合、「一致するレコードが見つかりませんでした」という種類のメッセージや「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 に答える