2

これで、行を選択して上下に移動できます。イベントリスナーは次のとおりです。

    $(".moveUpPlaylist").click(function () {
        moveSelected("up");
    });

    $(".moveDownPlaylist").click(function () {
        moveSelected("down");
    });

そして、実際の関数は次のとおりです。

function moveSelected(direction){
        var arr = jQuery('#table_playlist tbody tr.row_selected');

        for(var i=0; i<arr.length; i++) {            
            var tr = arr[i];            
            var row = jQuery(tr);               // row to move.

            var prevRow;
        if(direction === "up")
            prevRow = jQuery(tr).prev();
        else
            prevRow = jQuery(tr).next();

        /* already at the top? */
        if(prevRow.length==0){  break; }    

        moveDataUp(row, prevRow);
        moveVisualSelectionUp(row, prevRow);
    }   
}   

/* the visual stuff that show which rows are selected */
function moveVisualSelectionUp(row, prevRow){
    row.removeClass("row_selected");
    prevRow.addClass("row_selected");
}

/* move the data in the internal datatable structure */
function moveDataUp(row, prevRow){      
    var movedData = _tablePL.fnGetData(row[0]).slice(0);    // copy of row to move.
    var prevData = _tablePL.fnGetData(prevRow[0]).slice(0); // copy of old data to be overwritten by above data.

    // switch data around :)
    _tablePL.fnUpdate(prevData , row[0], 0, false, false);  
    _tablePL.fnUpdate(movedData , prevRow[0], 0, true, true);
}

したがって、行をページの一番下に移動すると問題が発生します。テーブルの同じページ内でのみ移動できます。ページの下部または上部にある場合、ページ間を移動するようにするにはどうすればよいですか?

4

1 に答える 1

5

これは、投稿の作成者にとっては過去のことだと思いますが、他の人にとっては役立つかもしれません。テーブルからデータを取り出し、それに応じて配列を更新し、テーブルを再描画する方が簡単であることがわかりました。これを機能させるために、アップ/ダウンボタンの属性としてインデックスを設定して、それらを特定の行に結び付けました。

$(document).on('click', '.moveup', function(e){
    var index = $(this).attr('index');
    if ((index-1) >= 0) {
        var datatable = $('#datatable.table').dataTable()
        var data = datatable.fnGetData();
        datatable.fnClearTable();
        data.splice((index-1), 0, data.splice(index,1)[0]);
        datatable.fnAddData(data);
    }
});
$(document).on('click', '.movedown', function(e){
    var index = $(this).attr('index');
    if ((index+1) >= 0) {
        var datatable = $('#datatable.table').dataTable()
        var data = datatable.fnGetData();
        datatable.fnClearTable();
        data.splice((index+1), 0, data.splice(index,1)[0]);
        datatable.fnAddData(data);
    }
});

テーブル全体を再描画することで、ページネーションの問題に遭遇しません

于 2014-01-23T09:56:19.177 に答える