Table sorting using jquery

$ (Document ). ready (function () {// jquery plug-in form. FN. alterrowcolors = function () {$ ('tbody TR: odd', this ). removeclass ('even '). addclass ('odd'); $ ('tbody TR: even', this ). removeclass ('odd '). addclass ('even'); return this;} // 1. in this case, the function is used as jquery. A new property defined by FN is not an isolated function, so that the function is registered as a plug-in, // 2. use the keyword "this". Inside a plug-in, this indicates the jquery object that calls the plug-in. // 3. finally, this is returned at the end of the function. This value can be returned so that the new method can continue to attach other methods. VaR $ sortorder = 0; // sorting type 1 indicates ascending order, and 0 indicates descending order var $ table = $ ('table # shop'); $ table. alterrowcolors (); $ ('th', $ table ). each (function (column) {// process three possible sorting fields. The comparison method is Var findsortkey; if ($ (this ). is ('. sort-title ') | $ (this ). is ('. sort-author ') {findsortkey = function ($ cell) {return $ cell. find ('. sort-title '). text (). touppercase () + ''+ $ cell. text (). touppercase () ;}} else if ($ (this ). is ('. sort-date ')) {Findsortkey = function ($ cell) {return date. parse ('1' + $ cell. text () ;}} else if ($ (this ). is ('. sort-price') {findsortkey = function ($ cell) {var key = parsefloat ($ cell. text (). replace (/^ [^/D.] */, '') return isnan (key )? 0: Key ;}// sort if (findsortkey) {$ (this ). addclass ('clickable '). hover (function () {$ (this ). addclass ('hover '); var $ Title = $ sortorder = 0? 'Ascending Order ': 'descending Order'; $ (this ). ATTR ('title', 'by' + comment (this).html () + $ title + '');}, function () {$ (this ). removeclass ('hover ');}). click (function () {$ sortorder = 0? 1: 0; var rows = $ table. find ('tbody> tr '). get (); $. each (rows, function (index, row) {row. sortkey = findsortkey ($ (ROW ). children ('td '). eq (column) ;}); // sort method rows. sort (function (a, B) {if ($ sortorder = 1) {// ascending if (. sortkey <B. sortkey) Return-1; if (. sortkey> B. sortkey) return 1; return 0;} else {// descending order if (. sortkey <B. sortkey) return 1; if (. sortkey> B. sortkey) Return-1; return 0 ;}}); // Add the sorted object to $ table $. each (rows, function (index, row) {$ table. children ('tbody '). append (ROW); row. sortkey = NULL;}); // indicates the $ table sorted by a column. find ('td '). removeclass ('sorted '). filter (': Nth-child (' + (column + 1) + ')'). addclass ('sorted'); // rename the style of the parity row $ table. alterrowcolors () ;};}}); // page effect var currentpage = 0; // var pagesize = 10 on the current page; // The number of lines per page (excluding the header) // bind the paging event $ table. BIND ('repaginate', function () {$ table. find ('tbody tr '). hide (). slice (currentpage * pagesize, (currentpage + 1) * pagesize ). show () ;}); var numrows = $ table. find ('tbody tr '). length; // number of records var numpages = math. ceil (numrows/pagesize); // total number of pages var $ pager =$ ('<Div class = "page"> </div> '); // pagination Div for (VAR page = 0; page <numpages; Page ++) {// Add a link to the paging tag $ ('<a href = "#"> <span>' + (page + 1) + '</span> </a> '). BIND ("click", {"Newpage": Page}, function (event) {currentpage = event. data ["Newpage"]; $ table. trigger ("repaginate ");}). appendto ($ pager); $ pager. append ("");} $ pager. insertafter ($ table); // insert table $ table into the paging Div. trigger ("repaginate"); // initialization });