Using the solt() function and file fragmentation to achieve the front-end sorting of the table, compatible with the IE6 original ecology
May 30, 2021 Article blog
Table of contents
Table sorting in the use of web pages is also a lot, especially some information systems output a dense layer of tables to show people, customers will certainly put forward the table sorting requirements. M
any people think that the sorting of tables must be done through the database backend, using statements with order by asc/desc, and then taking advantage of ajax seems perfect. Y
ou don't really have to deal with databases at all. G
iven any table at the front end, you can use the sort() function and file fragmentation to sort the front end of the table. T
here's a advanceTable plug-in in jquery that does this, but what's not so bad about this plug-in? A
s with the usual plug-ins, the code is written with smallpox, without any comments, not easy to change at all, and can not be implemented in any table, any browser. H
ere's a way to do this by leveraging Javascript's IE6-compatible original, plug-in-free, database-free approach.
First, the basic objectives
In the following table in the web page, click on any of the header to achieve sorting, and then click to achieve reverse ordering
Second, HTML layout
This won't be out of mind. L earned the web page know how the form is whole. T he only thing to note is that the implementation of hover mouse hand-type representation, before and after placing a <a style"cursor:pointer; " > it's okay to clip it, don't worry about clicking to jump, no href attribute. Set an id for myTable for this table to make it easier to do things later.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>表格排序</title>
</head>
<body>
<table width="100%" id="myTable">
<thead>
<tr>
<th onclick="SortTable('myTable',0)"><a style="cursor:pointer;">ID</a></th>
<th onclick="SortTable('myTable',1)"><a style="cursor:pointer;">用户名</a></th>
<th onclick="SortTable('myTable',2)"><a style="cursor:pointer;">地点</a></th>
</tr>
</thead>
<tbody>
<tr> <td>1</td> <td>黄</td> <td>Antwerp</td> </tr>
<tr> <td>2</td> <td>赵</td> <td>Brussels</td> </tr>
<tr> <td>3</td> <td>张</td> <td>Netherlands</td> </tr>
<tr> <td>4</td> <td>李</td> <td>Gierle</td> </tr>
<tr> <td>5</td> <td>陈</td> <td>London</td> </tr>
<tr> <td>6</td> <td>李</td> <td>Mechelen</td> </tr>
<tr> <td>7</td> <td>钱</td> <td>Lier</td> </tr>
<tr> <td>8</td> <td>唐</td> <td>Luik</td> </tr>
<tr> <td>9</td> <td>莫</td> <td>北京</td> </tr>
<tr> <td>10</td> <td>王</td> <td>香港</td> </tr>
<tr> <td>11</td> <td>陈</td> <td>Lille</td> </tr>
</tbody>
</table>
</body>
</html>
Third, the core script
The key is to write about the softfunction() sort function, using the idea of file fragmentation
<script> //这个东西是用来判断是不是逆序
var IsAsc=true; function SortTable(TableID,Col){
IsAsc=!IsAsc;
var DTable=document.getElementById(TableID);
Var dbody = DTABLE.TBODIES [0]; // Come to all nodes in TBODY
Var Datarows = dbody.rows; // You can take all line nodes in TBODY, DATAROWS is equivalent to 1 array // to save the value of the array of arrays to normal array operations
var MyArr=new Array();
for(var i=0;i<DataRows.length;i++){
MyArr[i]=DataRows[i];
} // Judgment the column of last sorting and this time is not the same column
if(DBody.CurrentCol==Col){
Myarr.reverse (); //
} else{
// JavaScript requirements must be sort (function ())
Write your own function, write it, what do you think is less than, how is it greater than, how is it equal to myarr.sort (// passed the object is an arbitrary two elements of myarr this array TR1 and TR2, line 1Line 2
function compare(TR1,TR2){
VAR value1, value2; // If you are in the sort number, that is, in the comparison ID, the leftmost list, 0 column, then I must process if IF (COL == 0) {////Take a custom label of the current line and the custom label of the latter line
value1=parseInt(TR1.cells[Col].innerHTML);
value2=parseInt(TR2.cells[Col].innerHTML);
IF (value1 <value2) // (1) The former is less than the latter Return (1);
Else IF (Value1> Value2) // 1 represents the former greater than the latter
Return 1; ELSE // 0 represents two values equal RETURN 0;} / / otherwise, in accordance with the string of ELSE {// Transform the column to the value in the cell into a string again to compare
Value1 = tr1.cells [col] .innerhtml + "" "; value2 = tr2.cells [col] .innerhtml +" "; // directly call JavaScript's Chinese comparison method, this method can automatically compare the string and return the corresponding resultof
Return Value1.localeCompare (Value2);}});} // Create a document fragment, add all the rows into it, equivalent to a temporary shelf, if you add it directly to Document.Body, you will insert a line, refreshOnce, if the data will affect the user experience // first put all the lines inside, then add the line inside the hull stand, so that the table will only refresh once.// Just like you go to the store, you must first write the items (line) to buy on the list (document fragment), then all the supermarkets purchase, and will not think of the same thing.
var frag=document.createDocumentFragment(); for(var i=0;i<MyArr.length;i++){ frag.appendChild(MyArr[i]);//将数组里的行全部添加到文档碎片中 } DBody.appendChild(frag);//将文档碎片中的行全部添加到 body中 DBody.CurrentCol=Col;//记录下当前排序的列 } </script>
Note: If the cell is not stored in a normal value how to do, or there is a bunch of things in the cell, you can give all cells a custom property, by comparing the custom properties of this cell, after the sort function value changed to TR1.cells (Col.getAttribute (")" can become more than the value of this custom property, this kind of situation is more of a big project in the dynamic web page.
Recommended lessons: JavaScript micro-class, ES6 micro-class