列を使用して、不可視データ列でDataTablesを注文します。orderData

Question

私の質問については、a simple test case at JS Binを準備しました。

単語ゲームでは、私はプレイヤーが演奏する20の最も長い単語を表示しようとしています。

データをPostgreSQLからDataTables jQueryプラグインにJSON形式で配信します。単語の長さと単語が再生された日付でソートされています。

この順序は、各JSONオブジェクトのrowプロパティに（...、1、2、3）数値として格納されます。ここでは

var dataSet = [ 
    {"row":4,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"ZZ","score":11}, 
    {"row":2,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"BBBBB","score":6}, 
    {"row":3,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"ABC","score":7}, 
    {"row":1,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"XYZXYZXYZ","score":6} 
]; 

は私が並べ替えしようとする私のJavaScriptコードであり、カラムword（カラム2）不可視カラムrow（列0）による：

function renderGid(data, type, row, meta) { 
    return (type === 'display' ? '<IMG SRC="https://datatables.net/examples/resources/details_open.png"> #' + data : data); 
} 

function renderGame(data) { 
    return 'Details for game #' + data.gid; 
} 

jQuery(document).ready(function($) { 
    var longestTable = $('#longest').DataTable({ 
     data: dataSet, 
     order: [[2, 'desc']], 
     columns: [ 
      { data: 'row', orderable: false, visible: false }, 
      { data: 'gid', orderable: false, visible: true, className: 'details-control', render: renderGid }, 
      { data: 'word', orderable: true, visible: true, orderData: 0 /* order by invisible column 0 */ }, 
      { data: 'score', orderable: false, visible: true } 
     ] 
    }); 

    $('#longest tbody').on('click', 'td.details-control', function() { 
     var img = $(this).find('img'); 
     var tr = $(this).closest('tr'); 
     var row = longestTable.row(tr); 

     if (row.child.isShown()) { 
      row.child.hide(); 
      img.attr('src', 'https://datatables.net/examples/resources/details_open.png'); 
     } else { 
      row.child(renderGame(row.data())).show(); 
      img.attr('src', 'https://datatables.net/examples/resources/details_close.png'); 
     } 
    }); 
}); 

しかし、これは動作しない - 表示された単語の順序がZZ、BBBB、ABC、XYZXYZXYZ（一見未分類であります） - それはXYZXYZXYZ、BBBB、ABC、row降順でソートZZ（）である必要がありながら：

なぜcolumns.orderData: 0を指定しているにもかかわらず、仕事をソートしないのですか？

なぜ灰色の矢印（上のスクリーンショットの赤い矢印で示されている）をクリックして注文を変更できないのですか？

Answer 1

これはデータテーブルのjQueryプラグインでan old bugと思われます。整数引数は受け入れられません。

私は、単一の値を持つ配列にそれを変更する必要があります。

{ data: 'word', orderable: true, visible: true, orderData: [0] }, 

し、それは動作します：