如何在DataTable中向上或向下移動一行？

我正在使用JavaScript庫DataTables來顯示數據。如何在DataTable中向上或向下移動一行？

我希望能夠對行重新排序。我看到有一個名爲RowReorder的擴展名，但它看起來很糟糕，因爲即使在線發現的示例也不會對行重新排序（至少在本文撰寫時最新版本的Chrome中）。即使它工作，我也不喜歡這個解決方案，因爲不清楚你可以重新排列行。

所以我想實現像下面的圖片的東西：

我發現了幾個鏈接在網上要求這一點，但似乎沒有人能使其正常工作。

我的數據源是一個簡單的數組。沒有ajax呢。我想從簡單開始。

你之前做過的事情是？關於如何開始構建該功能的任何方向？

2016-12-15 Maxime

你必須做你自己的編碼。這裏是一個例子 - > http：// stackoverflow。com/questions/30712227/datatables-row-add-to-specific-index/30782115＃30782115它不完全相同，它在特定位置插入一行，但應該使用相同的技術將行向上或向下移動。 – davidkonrad

謝謝！當我接近解決方案時，我會查看並更新問題。 – Maxime

@davidkonrad我設法讓它在您的答案中得到靈感。我對該答案做了+1，以表示感謝。問題解決了。 :-) – Maxime

謝謝大衛·康拉德，他從他的answer on another question如何在一個表的中間添加行指導。

我做的第一件事是從我的表中創建一個Action列開始，並動態添加Up或Down選項。

{ 
    name: 'action', 
    data: null, 
    title: 'Action', 
    searchable: false, 
    sortable: false, 
    render: function (data, type, full, meta) { 
     if (type === 'display') { 
      var $span = $('<span></span>'); 

      if (meta.row > 0) { 
       $('<a class="dtMoveUp">Up</a>').appendTo($span); 
      } 

      $('<a class="dtMoveDown">Down</a>').appendTo($span); 

      return $span.html(); 
     } 
     return data; 
    } 
}

然後，我在drawCallback添加的代碼刪除最後一排的Down箭頭，單擊事件綁定到moveUp和moveDown功能：

'drawCallback': function (settings) { 
    $('#ArgumentsTable tr:last .dtMoveDown').remove(); 

    // Remove previous binding before adding it 
    $('.dtMoveUp').unbind('click'); 
    $('.dtMoveDown').unbind('click'); 

    // Bind click to function 
    $('.dtMoveUp').click(moveUp); 
    $('.dtMoveDown').click(moveDown); 
}

然後我編寫的向上/向下移動功能。請注意，我的數據有一個order屬性，用於更改訂單，這一點非常重要。這order顯示爲第一列，並使其成爲默認的排序列：

// Move the row up 
function moveUp() { 
    var tr = $(this).parents('tr'); 
    moveRow(tr, 'up'); 
} 

// Move the row down 
function moveDown() { 
    var tr = $(this).parents('tr'); 
    moveRow(tr, 'down'); 
} 

// Move up or down (depending...) 
function moveRow(row, direction) { 
    var index = table.row(row).index(); 

    var order = -1; 
    if (direction === 'down') { 
     order = 1; 
    } 

    var data1 = table.row(index).data(); 
    data1.order += order; 

    var data2 = table.row(index + order).data(); 
    data2.order += -order; 

    table.row(index).data(data2); 
    table.row(index + order).data(data1); 

    table.page(0).draw(false); 
}

注意：要明白，當你問的DataTable到draw()你的表再次，它會使用你的數據進行排序是非常重要的結果根據DataTable定義中設置的參數。這就是爲什麼我選擇order作爲第一列（默認排序）並直接更改我的數據對象（而不是使用DataTable中的內部信息播放）的原因。這使事情變得更容易。

注2：這是真的重要您的數據是由已經被order排序的數據表接收。否則，該解決方案將無法按原樣工作。

你可以在這裏查看完整的工作示例：

https://jsfiddle.net/kxfx489y/4/

來源

2016-12-15 16:40:44 Maxime

如何在DataTable中向上或向下移動一行？

回答

相關問題