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

由于项目上需要，自己花时间写了一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js，
仿EasyUI，数据列启用自定义排序后，该列标题后将出现向上或者向下的三角形，点击列标题设置新的排序参数。使用方法都直接写在js里了，没什么技术难度，就直接上代码吧。

//css文件
/********************************************************************************
 * Copyright (C) Corporation. All rights reserved.
 * 
 * Author      :  lihaitao 
 * Email        : [email protected]
 * 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        : [email protected]
 * 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有效
//要求表格基本结构
/*
                        //第一种方法让th启用自定义排序  data-field为对应数据库中表字段         
            
    //tr
    

    

        

           
ID
开始时间
           
结束时间
           
创建时间
 
        
                
    
    


//调用实例
 $("#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("");
            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 的，当然可以用于其他语言的。