Jquerytablesort实现客服端的排序.docx

Jquery+tablesort 实现客服端的排序，能减轻服务器的承受能力，也能给用户带来很好的体验，所以推荐用 Jquery tablesort来实现分页和排序了Jquery tablesort 支持页面类table静态排序，无刷新，调用也很方便（支持字符串，数字，日期，等格式）唯一的要求，就是html的table标签内要包含thead和tbody部分，这可以调用HTML_Table:getHeader()生成thead，调用HTML_Table:getBody()生成tbody部分。然后在需要展示数据的页面引入jQuery和Tablesorter的js库文件，再加上几行代码即可实现客户端javascript对数据table的分页与排序，并且还支持动态修改每页数据行数，支持多列排序等。具体的例子和代码，都可以在本文的链接中找到，就不在这里多说了。 示例地址：/0518/jquery/Jquer-tablesorter.html 只需要设置table的id，部分代码： $(document).ready(function() $.tablesorter.defaults.widgets = zebra; 隔行换色的颜色 $(#myTable).tablesorter( myTable为table的Id textExtraction: function(node) return $(node).find(.findeValue).html(); , headers: 5: sorter: false ); );Table 格式如下： first namelast name age totaldiscountdate peter parker28 $9.9920% jul 6, 2006 8:14 am 官方示例地址：/Plugins/Tablesorter/tablesorter Jquery.TableSortjquery的Table表格排序插件-说明-用于把Table转为可排序的Table-使用-1、给设置标题行添加名自定义属性role=head2、标题行中需要排序的列添加自定义属性sort=true3、调用扩展方法，如：$(#tableId).sorttable();说明：用于把Table转为可排序的Table参数：JSON格式=普通参数=sorttingMsg:排序时显示的文字（默认为排序中）,sorttingMsgColor:排序时显示的文字的颜色（默认为#FFF）,allowMask:是否允许遮罩层（默认为true）,maskOpacity:遮罩层的透明度（默认为0.5）,maskColor:遮罩层的颜色（默认为#000）,ascImgUrl:升序图片（默认为不显示）,ascImgSize:升序图片大小（默认为8px）,descImgUrl:降序图片（默认为不显示）,descImgSize:降序图片大小（默认为8px）=回调函数=onSorted(cell):排序完成回调函数（参数：cell，当前排序列的头(一般是th或者td的jquery对象)）-配置参数-sorttingMsg:排序时显示的文字（默认为排序中）,sorttingMsgColor:排序时显示的文字的颜色（默认为#FFF）,allowMask:是否允许遮罩层（默认为true）,maskOpacity:遮罩层的透明度（默认为0.5）,maskColor:遮罩层的颜色（默认为#000）,ascImgUrl:升序图片（默认为不显示）,ascImgSize:升序图片大小（默认为8px）,descImgUrl:降序图片（默认为不显示）,descImgSize:降序图片大小（默认为8px） Js1. /*-2. |TableSort|3. |-|4. |CreatedbyErikArvidsson|5. |(/contact.html#erik)|6. |ForWebFX(/)|7. |-|8. |ADOM1basedscriptthatallowsanordinaryHTMLtabletobesortable.|9. |-|10. |Copyright(c)1998-2002ErikArvidsson|11. |-|12. |Thissoftwareisprovidedasis,withoutwarrantyofanykind,expressor|13. |implied,includingbutnotlimitedtothewarrantiesofmerchantability,|14. |fitnessforaparticularpurposeandnoninfringement.Innoeventshallthe|15. |authorsorcopyrightholdersbeliableforanyclaim,damagesorother|16. |liability,whetherinanactionofcontract,tortorotherwise,arising|17. |from,outoforinconnectionwiththesoftwareortheuseorother|18. |dealingsinthesoftware.|19. |-|20. |Thissoftwareisavailableunderthethreedifferentlicensesmentioned|21. |below.Tousethissoftwareyoumustchose,andqualify,foroneofthose.|22. |-|23. |TheWebFXNon-CommercialLicense/license.html|24. |Permitsanyonetherighttousethesoftwareinanon-commercialcontext|25. |freeofcharge.|26. |-|27. |TheWebFXCommerciallicense/commercial.html|28. |Permitsthelicenseholdertherighttousethesoftwareinacommercial|29. |context.Suchlicensemustbespecificallyobtained,howeveritsvalidfor|30. |anynumberofimplementationsofthelicensedsoftware.|31. |-|32. |GPL-TheGNUGeneralPublicLicense/licenses/gpl.txt|33. |Permitsanyonetherighttouseandmodifythesoftwarewithoutlimitations|34. |aslongaspropercreditsaregivenandtheoriginalandmodifiedsource|35. |codeareincluded.Requiresthatthefinalproduct,softwarederivatefrom|36. |theoriginalsourceoranysoftwareutilizingaGPLcomponent,suchas|37. |this,isalsolicensedundertheGPLlicense.|38. |-|39. |1998-?-?|Firstversion|40. |-|41. |Created1998-?-?|Allchangesareinthelogabove.|Updated2001-?-?|42. -*/43. 44. 45. vardom=(document.getElementsByTagName)?true:false;46. varie5=(document.getElementsByTagName&document.all)?true:false;47. vararrowUp,arrowDown;48. 49. if(ie5|dom)50. initSortTable();51. 52. functioninitSortTable()53. arrowUp=document.createElement(SPAN);54. vartn=document.createTextNode(5);55. arrowUp.appendChild(tn);56. arrowUp.className=arrow;57. 58. arrowDown=document.createElement(SPAN);59. vartn=document.createTextNode(6);60. arrowDown.appendChild(tn);61. arrowDown.className=arrow;62. 63. 64. 65. 66. functionsortTable(tableNode,nCol,bDesc,sType)67. vartBody=tableNode.tBodies0;68. vartrs=tBody.rows;69. vartrl=trs.length;70. vara=newArray();71. 72. for(vari=0;itrl;i+)73. ai=trsi;74. 75. 76. varstart=newDate;77. window.status=Sortingdata.;78. a.sort(compareByColumn(nCol,bDesc,sType);79. window.status=Sortingdatadone;80. 81. for(vari=0;itrl;i+)82. tBody.appendChild(ai);83. window.status=Updatingrow+(i+1)+of+trl+84. (Timespent:+(newDate-start)+ms);85. 86. 87. /checkforonsort 88. if(typeoftableNode.onsort=string)89. tableNode.onsort=newFunction(,tableNode.onsort);90. if(typeoftableNode.onsort=function)91. tableNode.onsort();92. 93. 94. functionCaseInsensitiveString(s)95. returnString(s).toUpperCase();96. 97. 98. functionparseDate(s)99. returnDate.parse(s.replace(/-/g,/);100. 101. 102. /*alternativetonumberfunction103. *Thisoneisslowerbutcanhandlenonnumericalcharactersin104. *thestringallowstringslikethefollow(aswellasalotmore)105. *tobeused:106. *1,000,000107. *1000000108. *100cm109. */110. 111. functiontoNumber(s)112. returnNumber(s.replace(/0-9./g,);113. 114. 115. functioncompareByColumn(nCol,bDescending,sType)116. varc=nCol;117. vard=bDescending;118. 119. varfTypeCast=String;120. 121. if(sType=Number)122. fTypeCast=Number;123. elseif(sType=Date)124. fTypeCast=parseDate;125. elseif(sType=CaseInsensitiveString)126. fTypeCast=CaseInsensitiveString;127. 128. returnfunction(n1,n2)129. if(fTypeCast(getInnerText(n1.cellsc)fTypeCast(getInnerText(n2.cellsc)132. returnd?+1:-1;133. return0;134. ;135. 136. 137. functionsortColumnWithHold(e)138. /findtableelement 139. varel=ie5?e.srcElement:e.target;140. vartable=getParent(el,TABLE);141. 142. /backupoldcursorandonclick 143. varoldCursor=table.style.cursor;144. varoldClick=table.onclick;145. 146. /changecursorandonclick 147. table.style.cursor=wait;148. table.onclick=null;149. 150. /theeventobjectisdestroyedafterthisthreadbutweonlyneed 151. /thesrcElementand/orthetarget 152. varfakeEvent=srcElement:e.srcElement,target:e.target;153. 154. /callsortColumninanewthreadtoallowtheuithreadtobeupdated 155. /withthecursor/onclick 156. window.setTimeout(function()157. sortColumn(fakeEvent);158. /oncedoneresorecursorandonclick 159. table.style.cursor=oldCursor;160. table.onclick=oldClick;161. ,100);162. 163. 164. functionsortColumn(e)165. vartmp=e.target?e.target:e.srcElement;166. vartHeadParent=getParent(tmp,THEAD);167. varel=getParent(tmp,TD);168. 169. if(tHeadParent=null)170. return;171. 172. if(el!=null)173. varp=el.parentNode;174. vari;175. 176. /typecasttoBoolean 177. el._descending=!Boolean(el._descending);178. 179. if(tHeadParent.arrow!=null)180. if(tHeadParent.arrow.parentNode!=el)181. tHeadParent.arrow.parentNode._descending=null;/resetsortorder 182. 183. tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);184. 185. 186. if(el._descending)187. tHeadParent.arrow=arrowUp.cloneNode(true);188. else189. tHeadParent.arrow=arrowDown.cloneNode(true);190. 191. el.appendChild(tHeadParent.arrow);192. 193. 194. 195. /gettheindexofthetd 196. varcells=p.cells;197. varl=cells.length;198. for(i=0;il;i+)199. if(cellsi=el)break;200. 201. 202. vartable=getParent(el,TABLE);203. /cantfail 204. 205. sortTable(table,i,el._descending,el.getAttribute(type);206. 207. 208. 209. 210. functiongetInnerText(el)211. if(ie5)returnel.innerText;/Notneededbutitisfaster 212. 213. varstr=;214. 215. varcs=el.childNodes;216. varl=cs.length;217. for(vari=0;il;i+)218. switch(csi.nodeType)219. case1:/ELEMENT_NODE 220. str+=getInnerText(csi);221. break;222. case3:/TEXT_NODE 223. str+=csi.nodeValue;224. break;225. 226. 227. 228. 229. returnstr;230. 231. 232. functiongetParent(el,pTagName)233. if(el=null)returnnull;234. elseif(el.nodeType=1&el.tagName.toLowerCase()=pTagName.toLowerCase()/Geckobug,supposedtobeuppercase 235. returnel;236. else237. ret