分享一个自己写的table表格排序js插件(高效简洁)_javascript技巧

像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法，就没有使用)、原生态js的table排序插件等，最后比较看了下——采用了一个原生态js的table排序插件,并在其基础上做了些修改，虽有些勉强或有些地方使用不太舒服，但最算是比较好的实现了当时需要的功能。而前两天，对原有表格做了点儿修改——增加隔行换色的功能，问题就出现了，——效果错乱；检查分析了下，问题出在其table排序插件代码上——其原代码写的比较难理解，修改还不如重新自己写一个table排序插件。

说写就写，table排序其实很简单：就是取出所有排序列的值并存放在数组中(并且各列对应行对象也存放到一个数组中),然后对排序列的值数组排序(并对行对象数组排序)。下面贴出table排序插件代码：

复制代码 代码如下:

/**
* @description Table sorting implementation
* @author Blog:http://www.cnblogs.com/know/
* @date 2011-10-28
**/
(function () {
//Initialization configuration object
var _initConfig = null;
var _tableObj = null, _tbodyObj = null, _tBodyIndex = 0;
//Object that stores the (ordered) row array in each current sorting mode - this variable is only useful when IsLazyMode=true
var _trJqObjArray_Obj = null;
/**
*/ Function_GetOnValueArray (Trjqobjarr, TDIndex, TD_VALATTR, TD_DATTYPE) {
VAR TDORDERVALR = New Array (); dval; _tbodyObj.find ("TR" ).each(function (i, trItem) {
trObj = $(trItem);
trJqObjArr.push(trObj);
tdObj = trObj.find("td")[tdIndex];
tdObj = $(tdObj);
tdVal = td_valAttr ? tdObj.attr(td_valAttr) : tdObj.text();
tdVal = _GetValue(tdVal, td_dataType);
tdOrderValArr.push(tdVal);
});
return tdOrderValArr;
}
/**
* Method to add sorting method (rule)
* @private
* @param trJqObjArr: (external input) array to store sorted rows, tdIndex: index of sorting column, td_valAttr: fetch of sorting column Value attribute, td_dataType: value type of sorting column
**/
function _GetJqObjById(id) {
return "string" == typeof (id) ? $("#" id) : $(id);
};
/**
* Methods that return jQuery objects
* @private
**/
function _Sort(tdIndex, options) {
var trJqObjArr = null;
if (_initConfig.IsLazyMode) {
!_trJqObjArray_Obj && (_trJqObjArray_Obj = {});
trJqObjArr = _trJqObjArray_Obj[tdIndex];
}
var isExist_trJqObjArr = true ;
if (!trJqObjArr ) {
isExist_trJqObjArr = false;
trJqObjArr = new Array();
var tdOrderValArr = _GetOrderTdValueArray(trJqObjArr, tdIndex, options.ValAttr, options.DataType);
var sort_len = tdOrderValArr.length - 1;
var isExchanged = false, compareOper = options.Desc ? ">" : "<";
for (var i = 0; i < sort_len; i ) {
isExchanged = false ;
for (var j = sort_len; j > i; j--) {
if (eval(tdOrderValArr[j] compareOper tdOrderValArr[j - 1])) {
_ExchangeArray(tdOrderValArr, j );
//Exchange the order of row objects in the array
_ExchangeArray(trJqObjArr, j);
isExchanged = true;
}
}
//If not after one comparison Exit the loop when exchanging
if (!isExchanged)
break;
}
_initConfig.IsLazyMode && (_trJqObjArray_Obj[tdIndex] = trJqObjArr);
}
if (trJqObjArr) {
if (options.Toggle) {
_initConfig.IsLazyMode && isExist_trJqObjArr && trJqObjArr.reverse();
options.Desc = !options.Desc;
}
_ShowTable(trJqObjArr);
}
}
/**
* Sorting method
* @private
* @param tdIndex: index of sorting column, options: rule configuration object of sorting column
**/
function _ShowTable(trJqObjArr) {
_tbodyObj.html("");
for (var n = 0, len = trJqObjArr.length; n < len; n ) {
_tbodyObj.append(trJqObjArr[n]);
$.isFunction(_initConfig.OnShow) && (_initConfig.OnShow(n, trJqObjArr[n], _tbodyObj ));
}
}
/**
* Display the sorted table
* @private
* @param trJqObjArr: Sorted array of tr objects
**/
function _ExchangeArray(array, j) {
var temp = array[j];
array[j ] = array[j - 1];
array[j - 1] = temp;
}
/**
* Method to exchange items in an array
* @private
* @param array: array, j: index of the tail item of the exchange array item
**/
function _GetValue(tdVal, td_dataType) {
switch (td_dataType) {
case "int":
return parseInt(tdVal) || 0;
case "float":
return parseFloat(tdVal) || 0;
case " date":
return Date.parse(tdVal) || 0;
case "string":
default:
return tdVal.toString() || "";
}
}
/**
* Method to add sorting method (rule)
* @private
* @param tdVal: the value of the sorting column, td_dataType: the value type of the sorting column
**/
function _SetOrder(obj, index, options) {
var orderSettings = {
ValAttr: false, //Value attribute of sorting column, default For: innerText
DataType: "string", //The value type of the sorting column (available values: int|float|date|string)
OnClick: null, //Method triggered when sorting (click)
Desc: true, //(Whether it is descending order) sorting method, the default is: descending order
Toggle: true, //Switch the sorting method
DefaultOrder: false //Whether it is the default sorting method
} ;
$.extend(orderSettings, options);
orderSettings.DataType = orderSettings.DataType.toLowerCase();
obj = _GetJqObjById(obj);
//Bind the event that triggers sorting
obj.bind("click", function () {
_Sort(index, orderSettings);
$.isFunction(orderSettings.OnClick) && orderSettings.OnClick();
});
orderSettings.DefaultOrder && _Sort(index, orderSettings);
}
var _api = {
Init: function (obj, tBodyIndex, options) {
if (obj == null || typeof (obj) == undefined) {
alert("TableOrder初始化参数为空或有误！");
return;
}
_tableObj = _GetJqObjById(obj);
_tBodyIndex = tBodyIndex || 0;
_tbodyObj = _tableObj.find("tbody:eq(" _tBodyIndex ")");
options = options || {};
_initConfig = {
IsLazyMode: true, //是否是懒惰模式，默认为:true
OnShow: null //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj
};
$.extend(_initConfig, options);
_trJqObjArray_Obj = null;
},
SetOrder: function (obj, index, options) {
if (_tableObj == null) {
alert("_tableObj尚未初始化！");
return;
}
_SetOrder(obj, index, options);
}
};
window.TableOrderOper = _api;
})();

其使用如下：

复制代码 代码如下:

名称 / 类型	上传时间	大小
JSCSS	2008/9/12 8:51:09	433247
AJAX	2008/3/6 20:12:23	11394
EXT	2008/10/4 20:21:54	351
Index	2008/10/4 20:24:11	14074
ORDER	2008/10/4 20:24:11	2844

代码中注释我都尽量写的比较清楚了，需要补充说明的是：

1.js使用的是闭包，我强调代码要尽可能的简洁易懂。

2.IsLazyMode属性设置，IsLazyMode=true,适用于当前要排序的表格是不变的，即不会有ajax的增删改行的操作，而且你看代码后就可以看出的一个好处：把要排序列的对应的行对象只一次遍历，并将排序后的行对象数组保存在全局对象中，下次排序时直接通过tdIndex(排序列的索引)取出对应的行对象数组,并将数组反转，即可实现排序的效果，可以在一定程度上提高代码执行效率(性能); IsLazyMode=false, 即适用于当前要排序的表格会改变，如有ajax的增删改行的操作的情况。

3.考虑一般要排序的表格数据量都不大，其中的数组排序使用的是冒泡排序算法。

4.OnShow: null //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj ——可方便用于设置排序后的表格的换行样式等，也出于对性能优化方面的考虑。

好了，最后，附上插件js和demo，目前的实现只能说是能很好的满足我当前项目中的需求或适用于于大多数的场景，如果有没有考虑到或不好的地方，希望各位路过的朋友，能毫不客气的拍砖留言，大家互相交流学习！

OrderTable.rar

原文地址： cnblogs know