Home  >  Article  >  Web Front-end  >  jquery tablesorter.js supports Chinese table sorting improvements_jquery

jquery tablesorter.js supports Chinese table sorting improvements_jquery

WBOY
WBOYOriginal
2016-05-16 18:39:431283browse

Code: I copied the code written by a netizen. I don’t remember where it came from. It was changed to support Chinese sorting and the sorting of control values. There is no way, my ability is limited, I can only do it. . .

Copy code The code is as follows:

//Converter, convert the field type of the column to Types that can be sorted: String, int, float
function convert(sValue, sDataType)
{
switch(sDataType)
{
case "int":
return parseInt(sValue );
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}
// Chinese character sorting method
function chrComp(a,b)
{
return a.localeCompare(b);
}
//Sorting function generator
function generateCompareTRs(iCol, sDataType,isinput,sDec)
{
return function compareTRs(oTR1, oTR2)
{
if(isinput == 1)
{
var vValue1 = convert(oTR1.getElementsByTagName("input")[iCol].value);
var vValue2 = convert(oTR2.getElementsByTagName("input")[iCol] .value);
}
else
{
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
var vValue2 = convert(oTR2.cells[ iCol].firstChild.nodeValue, sDataType);
}
if(sDec=='desc')
{
if(sDataType=='int')
{
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 <0 ? 1 : -1);
}
else if(sDataType =='cn')
{
if(chrComp(vValue1 ,vValue2)>0)
{
return -1;
}
else if(chrComp(vValue1,vValue2)<0)
{
return 1;
}
else
{
return 0;
}
}
else
{
if (vValue1 > vValue2) {
return -1;
} else if (vValue1 < vValue2) {
return 1;
} else {
return 0;
}
}
}
else if(sDec =='asc')
{
if(sDataType=='int')
{
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1) ;
}
else if(sDataType =='cn')
{
return chrComp(vValue1,vValue2);
}
else
{
if ( vValue1 > vValue2) {
return 1;
} else if (vValue1 < vValue2) {
return -1;
} else {
return 0;
}
}
}
};
}
//Reset the classname of the cell
function ChangeClsName(tr,num)
{
num = num%2?1 :2;
num.toString();
for ( var i = 0 ; i < tr.childNodes.length; i )
{
tr.childNodes[i].className = " row" num
}
}
/*Sort method (main function)
sTableID table ID
iCol represents column index
1, when it is not an input type, iCol represents It is the td of tr;
2, when it is input type, iCol indicates the input of tr;
sDataType indicates the data type of the cell or the data type of the value of the input. . The default is string, it can also be int, float. cn is Chinese
isinput indicates whether the sorted content is input (1 yes, 0 no)
sDec indicates reverse order or order (desc, default order), to avoid input After the value is changed, the order will be directly reversed when sorting.
*/
function sortTable(sTableID, iCol, sDataType, isinput, sDec)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0] ;
var colDataRows = oTBody.rows;
var aTRs = new Array;
//Put all columns into the array
for (var i=0; i < colDataRows.length; i )
{
aTRs[i] = colDataRows[i];
}
aTRs.sort(generateCompareTRs(iCol, sDataType,isinput, sDec));
var oFragment = document.createDocumentFragment( );
for (var i=0; i < aTRs.length; i )
{
oFragment.appendChild(aTRs[i]);
ChangeClsName(aTRs[i],i) ;
}
oTBody.appendChild(oFragment);
}

I finally have time to study jquery this week, which I have always wanted to learn. It's a pity that the company can't use it. In fact, after learning it, I still feel that it can be used. After knowing jqery, I looked at other people's plug-ins. jquery.tablesorter.js This plug-in is quite powerful. I tried it and found that it does not support Chinese. Look at the source code and it says
Copy the code The code is as follows:

/* sorting methods */
function multisort(table,sortList,cache) {
if(table.config.debug) { var sortTime = new Date(); }
var dynamicExp = "var sortWrapper = function(a,b) {", l = sortList.length;
for(var i=0; i < l; i ) {
var c = sortList[i][0];
var order = sortList[i][1];
var s = (getCachedSortType(table.config.parsers,c) == "text") ? ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ? "sortNumeric" : "sortNumericDesc");
var e = "e" i;
dynamicExp = "var " e " = " s "(a[" c "],b[" c "]); ";
dynamicExp = "if(" e ") { return " e "; } ";
dynamicExp = "else { ";
}
for(var i=0; i < l; i ) {
dynamicExp = "}; ";
}
dynamicExp = "return 0; ";
dynamicExp = "}; ";
eval(dynamicExp);
cache.normalized.sort(sortWrapper);
if(table.config.debug) { benchmark("Sorting on " sortList.toString() " and dir " order " time:", sortTime); }
return cache;
};
function sortText(a,b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
};
function sortTextDesc(a,b) {
return ((b < a) ? -1 : ((b > a) ? 1 : 0));
};
function sortNumeric(a,b) {
return a-b;
};
function sortNumericDesc(a,b) {
return b-a;
};
function getCachedSortType(parsers,i) {
return parsers[i].type;
};

一开始还以为会遇到一些困难的。没想到,我只需要把他的排序函数改一下就ok啦.

复制代码 代码如下:

function sortText(a,b) {
return a.localeCompare(b);
};
function sortTextDesc(a,b) {
return -a.localeCompare(b);
};


测试一下。中文,中英文一起,中间有列为空等都没问题了。
本来这个插件是有一个jquery.tablesorter.pack.js 压缩过后的才9kb,可是我只会改jquery.tablesorter.js (23kb)。要怎么把它变成jquery.tablesorter.pack.js 就不知道了。

ps:当然这个插件还有很多扩展功能,例如多列排序,各种例子等都有文档可以参考的。原文件和例子网上应该挺多的。有需要的 童鞋 可以留个邮箱给我
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn