2016-12-14 13 views
0

かなり標準的な方法でDataTablesプラグインを使用しています。これはreadyイベント内容です:「データがない」と表示されたときの行の並べ替え

jQuery('#languages_table').DataTable({ 
    pageLength: 100, 
    columns: [ 
     { orderDataType: "dom-text" }, 
     { orderDataType: "dom-text" }, 
     { orderDataType: "dom-text" }, 
     { orderDataType: "dom-text", type: "num" }, 
     { orderable: false }, 
     { orderable: false } 
    ] 
    }); 

はしかし、いくつかのケースでは、細胞は情報がないので、私はデータなしのようなものを表示する必要があります。

これは、明らかに並べ替えシステム(特に数値カラム)を混乱させ、望ましくない場所でそれらを並べ替えます。

私はすでに(そう何の書き込みまったくデータ)を、セルが完全に空することによって数字のために、この問題を取り除くために管理していない、とCSSでそのテキストを追加:

#languages_table td:empty::before { 
    content: "no data"; 
} 

この道をセルはゼロとしてカウントされ、降順で検索されます。最下部に表示されます(このように数値をソートする方がはるかに便利です)。

それはひどい(そして翻訳のための苦痛)が、それはトリックを行う。

この場合、並べ替えは空白のセルを昇順の検索の下に配置する必要があります(この場合はもっと興味深い)。それをする。

これらのエッジケースを手動で処理する方法はありますか?

答えて

0

カスタムソート機能が必要です。これを定義したカスタムタイプに適用することができます。

$.extend($.fn.dataTableExt.oSort, { 
    "null-last-pre": function (a) { 
     // Preprocess data if you need to. Currently doing nothing 
     return a; 
    }, 

    "null-last-asc": function(a, b) { 
     return (a===null)-(b===null) || +(a>b)||-(a<b); 
    }, 

    "null-last-desc": function(a,b) { 
     return (a===null)-(b===null) || -(a>b)||+(a<b); 
    } 
}); 

そして、このようなあなたのオプションにcolumnDefsを追加します。

columnDefs: [ 
    { type: 'null-last', targets: [0,1,2,3,4,5] } 
] 

また、「タイプ: 『NUM』を」削除お使いのカラム定義と限りデータがあるとして「ヌル」または「定義されていない "場合は、適切にソートする必要があります。 'num'型の型変換が必要な場合は、ターゲット配列から '3'を削除してください。どちらのタイプが優先されるかわからない(columnDefまたはcolumn)。

関連する問題