一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js（附ajax例子）

由于项目上需要，自己花时间写了一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js，

仿EasyUI，数据列启用自定义排序后，该列标题后将出现向上或者向下的三角形，点击列标题设置新的排序参数。使用方法都直接写在js里了，没什么技术难度，就直接上代码吧。

//css文件
/********************************************************************************
* Copyright (C) Corporation. All rights reserved.
*
* Author      :  lihaitao
* Email        : lhtzbj12@126.com
* Create Date  :  2016-11-15
* Description  : 表格自定义排序插件的样式
*
*
* Revision History:
*      Date         Author               Description
*      2016-11-15   lihaitao               create
*

*********************************************************************************/

.sortable-sort-default, .sortable-sort-asc, .sortable-sort-desc {
display: inline-block;
width: 8px !important;
height: 11px !important;
background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAALCAIAAADN+VtyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABzSURBVChTY/gPAT9uLY4J6Lv4A8r9/x8sARQNFGUAAnaTTpgcA0IUAmByDBtikUQhACzHcHbLakxw9B7EDmyAod1CHgNoF+78xHBxhhuaJewmrWe/gIz6gSwHEQUZBTYQKgcXBQK45T9uHdx7HSb6//9/AFztmH+QWaTdAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
background-position: center center;
background-repeat: no-repeat;
}

.sortable-sort-asc {
background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAIAAAD38zoCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABFSURBVBhXY/gPAwsv/tjVUfj//wsIFyox4+IPBlE3BgaGDbGiEDmQBFwUAiByDHOv/EcWhQCgHMOaWz9SU+tSUcHhKYUAuK0+12A7dLIAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}

.sortable-sort-desc {
background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAIAAAD38zoCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABESURBVBhXYzg8pTAVHdStufWDYUOsKAMaEHWbe+U/w///L1DkRN1mXPzx/z9IAghgcjBRIIBIAMGLXR2FC2Gi////BwD4gD7X7i0baAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}

//js文件
/********************************************************************************
* Copyright (C) Corporation. All rights reserved.
*
* Author      :  lihaitao
* Email        : lhtzbj12@126.com
* Create Date  :  2016-11-15
* Description  : 表格自定义排序插件
*
*
* Revision History:
*      Date         Author               Description
*      2016-11-15   lihaitao               create
*

*********************************************************************************/
//自定义排序插件，传入当前表格加载数据的排序规则orderby、direction，以及回调函数
//callback为点击th后激发的回调函数，给回调传两个值，新的orderby和direction
//有两种方法让th启用自定义排序
//一、在DOM中，给th添加属性data-field(数据库中表字段)和data-sortable="true"
//二、调用插件的初始化语句中给参数columns附值
//两种方法可以同时使用，如果对同一th使用了两种方法，则以columns有效
//要求表格基本结构
/*
<table id="dataGrid">
<thead>
<tr>
<th data-field="Id" data-sortable="true">ID</th>                        //第一种方法让th启用自定义排序  data-field为对应数据库中表字段
<th>开始时间</th>
<th>结束时间</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
//tr
</tbody>
</table>
//调用实例
$("#dataGrid").Sortable({
orderby:'CreateTime', //当前数据已按CreateTime排序                              direction:'desc',     //当前数据已按降序排序
columns:[{ index: 1, field: 'StartTime' }, { index: 3, field: 'CreateTime' }],  //第二种方法让th启用自定义排序：表格中可用于排序的列index第th的索引,field为对应数据库中表字段
callback:function(orderby,direction){                                           //回调函数，当点击th时回调
//do something
//orderBy,direction为点击后要向服务器请求的新参数
}
});
*/
(function ($) {
$.fn.Sortable = function (options) {
var table = this;
var orderby = options.orderby;
var direction = options.direction;
var callback = options.callback;
var columns = options.columns;
if (columns == undefined)
columns = [];
//找出表中th有属性 data-field 和 data-sortable=‘true’的th,填充columns
$(this).find("th").each(function (i, e) {
if ($(e).attr("data-field") != null &&
$(e).attr("data-field").length > 0 &&
$(e).attr("data-sortable") != null &&
$(e).attr("data-sortable") == "true") {
var entity = { index: i, field: $(e).attr("data-field") };
//判断当前th是否在columns已存在，不存在则加入
if ($(columns).filter(function (ci, ce) { return ce.index == i; }).length == 0) {
columns.push(entity);
}
}
})
$(columns).each(function (i, c) {
var th = $(table).find("th:eq(" + c.index + ")");
if (th.length == 0) return true;
e = th[0];
$(e).attr("data-field", c.field);
//设置鼠标样式
$(e).css("cursor", "pointer");
//添加i
var sonI = $(e).children("i");
if (sonI.length == 0) $(e).append("<i></i>");
sonI = $(e).children("i").removeClass();
//判断是否当前已经排序字段
var nextdirection = 'asc';
if (c.field == orderby) {
if (direction == "asc") {
sonI.addClass("sortable-sort-asc");
nextdirection = "desc";
} else {
sonI.addClass("sortable-sort-desc");
nextdirection = "asc";
}
}
else {
sonI.addClass("sortable-sort-default")
}
//添加点击事件，必须先off，否则会重复触发
$(e).off('click');
$(e).on('click', function () {
if (callback) {
callback(c.field, nextdirection);
}
});

});
return this;
};
})(jQuery);

附例子：

点这里去下载

附的例子是asp.net mvc的，但插件是基于jQuery 的，当然可以用于其他语言的。