Jquery selects a column of the table and sorts the table implementation principle_jquery

There are many Jquery plug-ins for sorting tables on the front end, and their functions are also very powerful. For example, Jquery Data Tables is quite powerful in processing tables. It can sort, search, paging and other operations on tables, but I have not studied them carefully. Realization principle.

In order to better understand the principle of sorting tables on the front end, and to further learn Jquery, I decided to use Jquery to implement a small function of sorting tables.

The main idea of ​​this implementation is: get the column number of the header cell clicked by the mouse, traverse the data rows, get the html in each , and get the html under each tag Correspond to the content in the tag of the obtained column number, and obtain the type attribute value of the tag. The html of , the content of , and the type of will be obtained. The attribute values ​​are spliced ​​into strings and added to the array array, and then all the html in the table are blanked. Different methods are used to compare the contents of according to the different type attribute values, and the contents of are compared based on the comparison results. Sort the array, and then reassign the sorted array elements to the empty . If the column has already been sorted, invert the array directly. Three types of sorting rules are provided: numerical, string, and IP address. The string type sorting rule uses the localeCompare method of JavaScript, which supports the sorting of Chinese character strings. Unfortunately, this method is not compatible with Google Chrome. Therefore, the sorting results of Chinese character strings on Google Chrome will be incorrect.

HTML code list:

Copy code The code is as follows:

View Code

序号	书名	价格（元）	出版时间	印刷量（册）	IP
1	狼图腾	29.80	2009-10	50000	192.168.1.125
2	孝心不能等待	29.80	2009-09	800	192.68.1.125
3	藏地密码2	28.00	2008-10		192.102.0.12
4	藏地密码1	24.80	2008-10		215.34.126.10
5	设计模式之禅	69.00	2011-12		192.168.1.5
6	轻量级 Java EE 企业应用实战	99.00	2012-04	5000	192.358.1.125
7	Java 开发实战经典	79.80	2012-01	2000	192.168.1.25
8	Java Web 开发实战经典	69.80	2011-11	2500	215.168.54.125

tableSort.js code list:

Copy code The code is as follows:

View Code
$(document).ready(function(){
var tableObject = $('#tableSort'); //Get the table object with id tableSort
var tbHead = tableObject.children('thead'); //Get thead under the table object
var tbHeadTh = tbHead.find('tr th');// Get th under tr under thead
var tbBody = tableObject.children('tbody');//Get tbody under table object
var tbBodyTr = tbBody.find('tr');//Get tbody tr under the tr
var sortIndex = -1;
tbHeadTh.each(function() {//Traverse th under tr of thead
var thisIndex = tbHeadTh.index($(this));// Get the column number where th is located
$(this).mouseover(function(){
tbBodyTr.each(function(){//Collate tr under tbody
var tds = $(this).find ("td");//Get the td object collection whose column number is the parameter index
$(tds[thisIndex]).addClass("hover");
});
}).mouseout( function(){
tbBodyTr.each(function(){
var tds = $(this).find("td");
$(tds[thisIndex]).removeClass("hover") ;
});
});
$(this).click(function() {
var dataType = $(this).attr("type");
checkColumnValue( thisIndex, dataType);
});
});
$("tbody tr").removeClass();//First remove all css classes of tr under tbody
$(" tbody tr").mouseover(function(){
$(this).addClass("hover");
}).mouseout(function(){
$(this).removeClass("hover ");
});
//Sort the table
function checkColumnValue(index, type) {
var trsValue = new Array();
tbBodyTr.each(function() {
var tds = $(this).find('td');
trsValue.push(type ".separator" $(tds[index]).html() ".separator" $(this). html());
$(this).html("");
});
var len = trsValue.length;
if(index == sortIndex){
trsValue .reverse();
} else {
for(var i = 0; i < len; i ){
type = trsValue[i].split(".separator")[0];
for(var j = i 1; j < len; j ){
value1 = trsValue[i].split(".separator")[1];
value2 = trsValue[j]. split(".separator")[1];
if(type == "number"){
value1 = value1 == "" ? 0 : value1;
value2 = value2 == "" ? 0 : value2;
if(parseFloat(value1) > parseFloat(value2)){
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[ i] = temp;
}
} else if(type == "ip"){
if(ip2int(value1) > ip2int(value2)){
var temp = trsValue[j ];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
} else {
if (value1.localeCompare(value2) > 0) {//This method is not compatible with Google Chrome
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
}
}
}
for(var i = 0; i < len; i ){
$("tbody tr:eq(" i ")"). html(trsValue[i].split(".separator")[2]);
}
sortIndex = index;
}
//IP converted to integer
function ip2int( ip){
var num = 0;
ip = ip.split(".");
num = Number(ip[0]) * 256 * 256 * 256 Number(ip[1]) * 256 * 256 Number(ip[2]) * 256 Number(ip[3]);
return num;
}
})

Run result:

Special thanks to the netizen "Xia のHanfeng". It would be difficult to complete the Jquery related operations without the help of "Xia のHanfeng". I am still very satisfied with this effect, but the process of splicing strings in the implemented operation is a bit cumbersome, not simple and clear enough, and needs to be improved.