首先说下里边的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. 完成。

参考资料

我所遇到的项目结构是:

需要说明的是,我所命名的一个排序规则为: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));
}
});
 
 

datatables对于某一特定的列进行自定义排序的更多相关文章

  1. C# listview 单击列头实现排序 <二>

    单击列头实现排序,首先在羡慕中添加下面的帮助实现的类:具体的代码: using System; using System.Collections; using System.Windows.Forms ...

  2. XtraReport交叉表隐藏列标题及自定义排序

    1.隐藏列标题 用DevExpress PivotGrid report 做报表的时候,将字段拖放到报表中后,ColumnArea和DataArea会显示两个标题字段,如下图: 选中交叉表,设置以下属 ...

  3. vue drag 对表格的列进行拖动排序

    用drag实现拖动表格列进行列排序   以下是用到的主要方法   1.dragstart 拖动开始返回目标对象 2.dragenter 拖动过程中经过的对象 3.dragend 拖动结束返回目标对象 ...

  4. js按照特定的中文字进行排序的方法

    之前遇到过按照中文字符排序的需求很顺利的解决了,这次是按照特定的中文字进行排序,比如按照保守型,稳健型,平衡型,成长型,进取型进行排序. 可以使用localeCompare() 方法来实现中文按照拼音 ...

  5. DataTable列查询加排序

    DataTable列查询加排序 DataRow[] drArray = dt.Select("ANLYCOM_ID='" + chSPrdtStblAnly.AnlyComId + ...

  6. 基于DataTables实现根据每个用户动态显示隐藏列,可排序

      前言 在后台管理系统开发中,难免会出现列数太多的情况,这里提供一个解决方案:用户设置显示哪些列,每个用户互不影响,并且可以根据用户的习惯设置列的排序. 1.演示 2.html代码说明 3.java ...

  7. DataTables页面列点击排序

    <!-- DataTables --> <script type="text/javascript" charset="utf8" src=& ...

  8. pandas取dataframe特定行/列

    1. 按列取.按索引/行取.按特定行列取 import numpy as np from pandas import DataFrame import pandas as pd df=DataFram ...

  9. laravel 预加载特定的列

    /**订单列表 0 已删除 1执行中 2 已过期 * * @param Request $request * * @return \Illuminate\Contracts\View\Factory| ...

随机推荐

  1. window_c++_socket编程_winsock2.h

    1.初始化动态链接库 WSAStartup: The WSAStartup function initiates use of the Winsock DLL by a process. WSASta ...

  2. GIT 获取指定历史版本代码

    cd 到该项目的一个本地仓库下 log 查看提交记录,找到想要的提交记录,粘贴对应的希哈值 执行 git checkout 希哈值 这本地的这个仓库的代码就会变成你想要的那个版本的代码

  3. AttributeError: 'tuple' object has no attribute 'extend'

    出错demo In [5]: a.extend([4,5]) --------------------------------------------------------------------- ...

  4. Java IO(一)--File类

    File类不是单指文件,它既可以代表一个文件名称,又可以代表一个目录下的一组文件.可以用来创建.删除.遍历文件等 public static void main(String[] args) { St ...

  5. Analysis Of The Causes Of Internal Symmetry Of Hydraulic Motor

    The main reasons why hydraulic motors have this symmetrical internal structure are as follows: The   ...

  6. RabbitMQ之六种队列模式

    先学习一下RabbitMQ中的六种队列,只学习前五种,具体的官方文档地址是:http://next.rabbitmq.com/getstarted.html 导入maven依赖: <depend ...

  7. [Python3网络爬虫开发实战] 7-动态渲染页面爬取

    在前一章中,我们了解了Ajax的分析和抓取方式,这其实也是JavaScript动态渲染的页面的一种情形,通过直接分析Ajax,我们仍然可以借助requests或urllib来实现数据爬取. 不过Jav ...

  8. 实现基于pam认证的vsftpd

    1 需求 使用指定虚拟用户Allen与Barry登录ftp,认证的源是mysql服务器: Allen可以上传文件,Barry不可以上传文件: 2 环境 [root@centos7 ~]# cat /e ...

  9. Mysql:sql语句

    练习的表可以在博客的文件中下载 基础知识: 1.数据库的连接 mysql -u -p -h -u 用户名 -p 密码 -h host主机 2:库级知识 2.1 显示数据库: show database ...

  10. org.osgi.framework.BundleException: Exception in org.eclipse.core.resources.ResourcesPlugin.start()

    http://freestyle21.cn 不知什么时候,启动eclipse的时候就一直不行,说是an error ..我查了下log 报错:org.osgi.framework.BundleExce ...