JQuery DataTables 列自己定义数据类型排序

使用JQ DataTables 的时候。希望某列数据能够进行自己定义排序。操作例如以下:(以中文排序和百分比排序为例)

1:定义排序类型:

//百分率排序
jQuery.fn.dataTableExt.oSort[‘number-fate-asc‘]  = function(s1,s2) {
	s1 = s1.replace(‘%‘,‘‘);
	s2 = s2.replace(‘%‘,‘‘);
	return s1-s2;
};

jQuery.fn.dataTableExt.oSort[‘number-fate-desc‘] = function(s1,s2) {
	s1 = s1.replace(‘%‘,‘‘);
	s2 = s2.replace(‘%‘,‘‘);
	return s2-s1;
};
//中文排序
jQuery.fn.dataTableExt.oSort[‘chinese-string-asc‘]  = function(s1,s2) {
	return s1.localeCompare(s2);
};
jQuery.fn.dataTableExt.oSort[‘chinese-string-desc‘] = function(s1,s2) {
	return s2.localeCompare(s1);
}; 

2:指定排序的列:

$(‘#flexme1‘).dataTable({
	"aoColumns": [
		null,
		{ "sType": "chinese-string" },//中文排序列
		null,
		{ "sType": "number-fate" },//百分率排序
		null,
		null
	]
}); 
时间: 2024-10-03 02:17:38

JQuery DataTables 列自己定义数据类型排序的相关文章

JQuery DataTables 列自定义数据类型排序

使用JQ DataTables 的时候,希望某列自定义类型数据可以进行排序,操作如下: 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt.oSort['number-fate-asc']  = function(s1,s2) { s1 = s1.replace('%',''); s2 = s2.replace('%',''); return s1-s2; }; jQuery.fn.dataTableExt.oSort['number-fate-desc'] = f

jquery.dataTables动态列

jquery.dataTables  版本1.10.7 直接上代码: 0.table <table id="popReportTable"> <thead> <tr id="trId"> <td>显示名,这里可以给tr一个id,然后用$("#trId").html("列名...")来改变显示列名</td> </tr> </thead> <

jquery datatables设置每列不同的颜色

html代码如下,主要通过设置aoColumnDefs的属性, aTargets表示具体哪一列.希望对大家有用啊,自己也是查了好多外文网站,最后才搞定这种办法 引用常用的库是: <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript"

jquery DataTables表格插件的使用(网页数据表格化及分页显示)

DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用DataTables: 只需要在html或ejs下引用写好的样式表css和脚本文件js,对应代码如下: 1 <head> 2 <link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css"

jquery datatables api

原文地址 学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/2006942 分别导入css和js文件 <link href="~/Content/bootstrap.css" rel="stylesheet" /> <link href="~/Content/datatables/css/dataTa

jquery datatables api (转)

学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/2006942 1:导入包: URL:http://www.datatables.net/ 分别导入css和js文件 Html代码   <style type="text/css" title="currentStyle"> @import "css/dem

JQuery插件之Jquery.datatables.js用法及api

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "

jquery datatables 的常见参数配置

1:导入包: URL:http://www.datatables.net/ 分别导入css和js文件 Html代码   <</span>style type="text/css" title="currentStyle"> @import "css/demo_page.css"; @import "css/demo_table.css"; @import "css/demo_table_jui

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel