datatables对于某一特定的列进行自定义排序
首先说下里边的api,其中第一个是order,这个里边是设置哪些排序哪些不排序的,比如:$(
'#example'
).dataTable( {
"order"
: (function(){
[[ 0,
'asc'
], [ 1,
'asc'
]];
})();//匿名函数里的自运行不影响其他外部的变量
} );
$.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"> |
表格大概是长这样的。
而 dataTables 的自带排序会将这一列视为 string 排序。 显然是不满足我们需求的。一开始以为要大动干戈,后来看了API文档后发现,dataTables 的第三方扩展支持还是很灵活的。官方文档中提供了两种方法: (1) Type based column sorting ; (2) Custom data source sorting
。我使用的是第一种方法。主要思路就是将单元格内容转成可排序的 float 类型。
首先创建一个文件叫
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(/&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));
}
});在前台页面中加入以下的 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>完成。
参考资料
我所遇到的项目结构是:
需要说明的是,我所命名的一个排序规则为: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;
})(),
datatables对于某一特定的列进行自定义排序的更多相关文章
- C# listview 单击列头实现排序 <二>
单击列头实现排序,首先在羡慕中添加下面的帮助实现的类:具体的代码: using System; using System.Collections; using System.Windows.Forms ...
- XtraReport交叉表隐藏列标题及自定义排序
1.隐藏列标题 用DevExpress PivotGrid report 做报表的时候,将字段拖放到报表中后,ColumnArea和DataArea会显示两个标题字段,如下图: 选中交叉表,设置以下属 ...
- vue drag 对表格的列进行拖动排序
用drag实现拖动表格列进行列排序 以下是用到的主要方法 1.dragstart 拖动开始返回目标对象 2.dragenter 拖动过程中经过的对象 3.dragend 拖动结束返回目标对象 ...
- js按照特定的中文字进行排序的方法
之前遇到过按照中文字符排序的需求很顺利的解决了,这次是按照特定的中文字进行排序,比如按照保守型,稳健型,平衡型,成长型,进取型进行排序. 可以使用localeCompare() 方法来实现中文按照拼音 ...
- DataTable列查询加排序
DataTable列查询加排序 DataRow[] drArray = dt.Select("ANLYCOM_ID='" + chSPrdtStblAnly.AnlyComId + ...
- 基于DataTables实现根据每个用户动态显示隐藏列,可排序
前言 在后台管理系统开发中,难免会出现列数太多的情况,这里提供一个解决方案:用户设置显示哪些列,每个用户互不影响,并且可以根据用户的习惯设置列的排序. 1.演示 2.html代码说明 3.java ...
- DataTables页面列点击排序
<!-- DataTables --> <script type="text/javascript" charset="utf8" src=& ...
- pandas取dataframe特定行/列
1. 按列取.按索引/行取.按特定行列取 import numpy as np from pandas import DataFrame import pandas as pd df=DataFram ...
- laravel 预加载特定的列
/**订单列表 0 已删除 1执行中 2 已过期 * * @param Request $request * * @return \Illuminate\Contracts\View\Factory| ...
随机推荐
- Hibernate的入门使用
数据在各个层次之间流转,在流转过程中会发生数据类型转换等一系列的交互问题.java与html的交互解决方案是struts2提供的OGNL(对象导航图语言),而java与数据库之间的技术解决方案是ORM ...
- CREATE DATABASE - 创建新数据库
SYNOPSIS CREATE DATABASE name [ [ WITH ] [ OWNER [=] dbowner ] [ LOCATION [=] 'dbpath' ] [ TEMPLATE ...
- Google Chrome浏览器调试
作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...
- 服务器中打开IIS管理器
1.选远程连接服务器,然后开始>控制面板>打开或关闭Windows功能>服务器管理器>web服务器>internet信息服务的展开下一项即可,如图:
- Swing实现个人简历
源码: import java.awt.Container;import java.awt.FlowLayout;import java.awt.Font; import javax.swing.*; ...
- MRC转ARC(2)
春节前抽空花了一天的时间将手头的工程从MRC转成了ARC,然后陆陆续续地修复一部分因为转ARC引起的内存泄漏和崩溃,到目前为止工程也算是比较稳定了,抽空记上一笔.(虽说这种事情这辈子估计都只会做这么一 ...
- [Python3网络爬虫开发实战] 2.5-代理的基本原理
我们在做爬虫的过程中经常会遇到这样的情况,最初爬虫正常运行,正常抓取数据,一切看起来都是那么美好,然而一杯茶的功夫可能就会出现错误,比如403 Forbidden,这时候打开网页一看,可能会看到“您的 ...
- python logging 日志使用
https://docs.python.org/3/library/logging.html1.日志级别 日志一共分成5个等级,从低到高分别是:DEBUG INFO WARNING ERROR CRI ...
- 集训第四周(高效算法设计)A题 Ultra-QuickSort
原题poj 2299:http://poj.org/problem?id=2299 题意,给你一个数组,去统计它们的逆序数,由于题目中说道数组最长可达五十万,那么O(n^2)的排序算法就不要再想了,归 ...
- JavaScript - 如果...没有方法(xjl456852修改)
本文是对下面这篇文章中存在的错误进行修改,并增加少量注释. 原文出处: JavaScript - 如果...没有方法 http://www.cnblogs.com/silin6/p/4367019.h ...