datatables對於某一特定的列進行自定義排序

首先說下里邊的api，其中第一個是order,這個里邊是設置哪些排序哪些不排序的，比如：$('#example').dataTable( {

     "order" : （function(){

 　　　　　　　　var arr= [[ 0,  'asc'  ], [ 1,  'asc'  ]];

　　　　　　　　　return arr;

　　　　　　　　  }）();//匿名函數里的自運行不影響其他外部的變量

} );

第二個是columnDefs，這個是對某一列的規則進行處理，舉個例子：

比如我封裝的一個組件，里邊傳入哪些列是要自定義排序的，那么可以寫成：

columnDefs:(function(){

var arry=[],i=0;

if (ipAddress && ipAddress .length>0) {

arry.push({

type:'ip-address',//這個是自定義的名字

targets:ipAddress,//這個是要自定義排序列索引的數組

})

}

return arry;

})(),

 

 

舉個小例子：https://datatables.net/examples/plug-ins/sorting_manual

$.fn.dataTable.ext.type.order[ 'salary-grade-pre' ] =  function  ( d ) {

     switch  ( d ) {

         case  'Low' :     return  1;

         case  'Medium' :  return  2;

         case  'High' :    return  3;

     }

     return  0;

};

 

$(document).ready( function () {

     $( '#example' ).DataTable( {

         "columnDefs" : [ {

             "type" :  "salary-grade" ,

             "targets" : -1

         } ]

     } );

} );

 

經過檢索有位網友也遇到了相同的問題，寫的很好，限制貼出來如下。可以作為參考：

原文http://wuchong.me/blog/2014/02/25/jquery-datatable-sort-plugin/?utm_source=tuicool&utm_medium=referral

 

最近在項目中用到了 jQuery.dataTables， 這是一個很強大的 jQuery 插件，調用方便，支持回調對數據進行排序、查詢、分頁等操作，並且 bootstrap 框架也有對其封裝，省了我們界面設計的活。dataTables 自帶了string，date，numeric 的排序，但當遇到比較特殊的排序需求時，就得另尋出路了。

這幾天正好碰到了這么個需求，一個統計表格中的有幾列的單元格是百分數，而且還帶有 html 的標簽。需要針對這幾列的百分數排序。

單元格中的 html 代碼是這樣的。

<span class="label label-important"> <i class="icon-caret-up"></i>&amp;nbsp;&amp;nbsp;100.0%</span> 

表格大概是長這樣的。

而 dataTables 的自帶排序會將這一列視為 string 排序。 顯然是不滿足我們需求的。一開始以為要大動干戈，后來看了API文檔后發現，dataTables 的第三方擴展支持還是很靈活的。官方文檔中提供了兩種方法： (1) Type based column sorting ; (2) Custom data source sorting
。我使用的是第一種方法。主要思路就是將單元格內容轉成可排序的 float 類型。

1. 首先創建一個文件叫dataTables.sort.plungin.js，加入以下代碼。

   jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "html-percent-pre": function (a) {  var x = String(a).replace(/<[\s\S]*?>/g, ""); //去除html標記  x = x.replace(/&amp;nbsp;/ig, ""); //去除空格  x = x.replace(/%/, ""); //去除百分號  return parseFloat(x);  },   "html-percent-asc": function (a, b) { //正序排序引用方法  return ((a < b) ? -1 : ((a > b) ? 1 : 0));  },   "html-percent-desc": function (a, b) { //倒序排序引用方法  return ((a < b) ? 1 : ((a > b) ? -1 : 0));  } }); 

2. 在前台頁面中加入以下的 js 引用。

   <script type="text/javascript" src="jquery.dataTables.js"></script> <script type="text/javascript" src="dataTables.numericComma.js"></script> <script type="text/javascript">  var oTable1 = $('#table_report').dataTable({  "aoColumnDefs": [  { "sType": "html-percent", "aTargets": [8] }, //指定列號使用自定義排序  ],  "bLengthChange": true, //開關，是否顯示每頁大小的下拉框  "aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "所有"]],  'iDisplayLength': 25, //每頁顯示10條記錄  'bFilter': true, //是否使用內置的過濾功能  "bInfo": true, //開關，是否顯示表格的一些信息  "bPaginate": true //開關，是否顯示分頁器  });  }); </script> 

3. 完成。

參考資料

• DataTables關於排序的文檔
• 另一種自定義方法

我所遇到的項目結構是：

需要說明的是，我所命名的一個排序規則為：ip-address，改動datatables的構造函數里邊相關的API為：

order:(function(){//這個是初始化哪些表格要排序，以及按照遞增還是遞減排序

var arry=[];

if(ipaddress && ipaddress.length>0){

for(var i=0;i<ipaddress.length;i++){

arry.push([ipaddress[i],'asc']);

}

return array;

})(),

columnDefs:(function(){

var arry=[],i=0;

if (ipAddress && ipAddress .length>0) {

arry.push({

type:'ip-address',//這個是自定義的名字

targets:ipAddress,//這個是要自定義排序列索引的數組

})

}

return arry;

})(),

 

接下來說說那個自定義的js文件（要先於這個表格構造之前加載）。

編寫對應的js文件我命名為ip-address-sort.js

 

里邊的內容為：

 

jQuery.extend(jQuery.fn.dataTableEXT.oSort,{

  "ip-address-pre":function(a){//這個a是點擊對應的列傳入td里邊的內容，pre算是對數據的預處理,這個在比較數據之前調用

　　　。。。//省略數據處理的過程

　　　return x;//這個就是最后要返回每個列表中經過處理后的單個數據，不是數組哈，只是一個值

}，

“ip-address-asc”:function(a,b){//點擊列表中遞增排序的時候調用

　　return ((a<b)? -1 : ((a> b) ? 1 : 0));//比較大小

},

“ip-address-desc”:function(a,b){//點擊列表遞減排序時候調用

　　return ((a<b)? -1 : ((a> b) ? 1 : 0));

}

});