We have to reorder the TR of the table with jquery.

With the help of the powerful jquery library, the table data columns are sorted by some simple JS code. The sort is displayed by adjusting the order of the table's TR, all on the client, without the need to interact with the server, thereby easing the server's pressure. See demo please click here.

Implementation of the sort of JS code is as follows:

The code is as follows

Copy Code

function Tablesort (jqtableobj) { Jqtableobj.find (' thead th '). Click ( function () { var DataType = $ (this). attr (' DataType ') | | ' Text '; var index = jqtableobj.find (' thead th '). Index (this) + 1; var arr = []; var row = Jqtableobj.find (' tbody tr '); $.each (row, function (i) {arr[i] = row[i]}); if ($ (this). Hasclass (' current ')) { Arr.reverse (); } else { Arr.sort (UTILS.SORTSTR (index, DataType)) Jqtableobj.find (' thead th '). Removeclass (' current '); $ (this). addclass (' current '); } var fragment = Document.createdocumentfragment (); $.each (arr, function (i) { Fragment.appendchild (Arr[i]); }); Jqtableobj.find (' tbody '). Append (fragment); } ); var Utils = (function () { function Sortstr (index, DataType) { return function (A, b) { var atext=$ (a). Find (' td:nth-child (' + index + ') '). attr (' _order ') | | $ (a). Find (' td:nth-child (' + index + ') '). text (); var btext=$ (b). Find (' td:nth-child (' + index + ') '). attr (' _order ') | | $ (b). Find (' td:nth-child (' + index + ') '). text (); if (dataType!= ' text ') { Atext=parsenontext (Atext, DataType); Btext=parsenontext (Btext, DataType); return atext > Btext? -1:btext > Atext? 1:0; } else { Return Atext.localecompare (Btext) } } } function Parsenontext (data, DataType) { Switch (dataType) { Case ' int ': return parseint (data) | | 0 Case ' float ': return parsefloat (data) | | 0 Default: return Filterstr (data) } } Filter Chinese characters and $ function Filterstr (data) { if (!data) { return 0; } Return parsefloat (Data.replace (/^[\ $a-za-z\u4e00-\u9fa5]* (. *?) [A-za-z\u4e00-\u9fa5]*$/, ' $ ')]; } return {' Sortstr ': sortstr}; })(); }

For the above code to work, you need to notice a few points in the original table.
1, the table Head of the TR its parent element is THEAD, the other table header column uses th, at the same time to use the DataType property name to indicate the type of data, type can be text (default), int and float;
2. The TR parent element that displays the table data is tbody, the column that displays the data is TD, you can use the _order property to specify the true value of the field.

The table example is as follows:

The code is as follows

Copy Code

<table> <thead> <tr> <th datatype= "int" >ID</th> <th datatype= "Text" >Username</th> <th datatype= "float" class= "current" >Revenue</th> </tr> </thead> <tbody> <tr> <td>1032</td> <td>Zhang</td> &LT;TD _order= "127579" >$ 127,579.00</td> </tr> <tr> <td>1074</td> <td>gm1</td> &LT;TD _order= "37331" >$ 37,331.00</td> </tr> </tbody> <tfoot> <tr> <th colspan= "2" >Summary</th> <th>$ 164,910.00 </tr> </tfoot> </table>