首页 > 代码库 > jquery 表格排序，实时搜索表格内容

jquery 表格排序，实时搜索表格内容

2024-07-05 02:38:11   228人阅读

 

jquery 表格排序，实时搜索表格内容

 
jquery 表格排序，实时搜索表格内容
演示

 

 

XML/HTML Code
  1. <table class="table-sort">  
  2. <thead>  
  3. <tr>  
  4. <th class="table-sort">First Name</th>  
  5. <th class="table-sort">Last Name</th>  
  6. <th class="table-sort">Email</th>  
  7. <th>Phone Number</th>  
  8. </tr>  
  9. </thead>  
  10. <tbody>  
  11. <tr>  
  12. <td>John</td>  
  13. <td>Smith</td>  
  14. <td><a href="mailto:john.s">john.s</a></td>  
  15. <td>(613) 873-2982</td>  
  16. </tr>  
  17. <tr>  
  18. <td>Sean</td>  
  19. <td>MacIsaac</td>  
  20. <td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td>  
  21. <td>(613) 871-6191</td>  
  22. </tr>  
  23. <tr>  
  24. <td>Tim</td>  
  25. <td>Zarby</td>  
  26. <td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td>  
  27. <td>(613) 743-5389</td>  
  28. </tr>  
  29. <tr>  
  30. <td>Andrew</td>  
  31. <td>Nichols</td>  
  32. <td><a href="mailto:andy_money2003">andy_money2003</a></td>  
  33. <td>(613) 741-3384</td>  
  34. </tr>  
  35. <tr>  
  36. <td>Ally</td>  
  37. <td>O‘Neil</td>  
  38. <td><a href="mailto:allyoneil">allyoneil</a></td>  
  39. <td>(613) 642-9831</td>  
  40. </tr>  
  41. </tbody>  
  42. </table>  
  43. <br/>  
  44. <p>To make a table searchable, add the class ‘table-sort-search‘ to the <table> tag.<br/>  
  45. <br/>  
  46. <strong>Example:</strong></p>  
  47. <pre><code class="html"><table class="table-sort table-sort-search"></table></code></pre>  
  48. <br/>  
  49. <table class="table-sort table-sort-search">  
  50. <thead>  
  51. <tr>  
  52. <th class="table-sort">First Name</th>  
  53. <th class="table-sort">Last Name</th>  
  54. <th class="table-sort">Email</th>  
  55. <th>Phone Number</th>  
  56. </tr>  
  57. </thead>  
  58. <tbody>  
  59. <tr>  
  60. <td>John</td>  
  61. <td>Smith</td>  
  62. <td><a href="mailto:john.s">john.s</a></td>  
  63. <td>(613) 873-2982</td>  
  64. </tr>  
  65. <tr>  
  66. <td>Sean</td>  
  67. <td>MacIsaac</td>  
  68. <td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td>  
  69. <td>(613) 871-6191</td>  
  70. </tr>  
  71. <tr>  
  72. <td>Tim</td>  
  73. <td>Zarby</td>  
  74. <td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td>  
  75. <td>(613) 743-5389</td>  
  76. </tr>  
  77. <tr>  
  78. <td>Andrew</td>  
  79. <td>Nichols</td>  
  80. <td><a href="mailto:andy_money2003">andy_money2003</a></td>  
  81. <td>(613) 741-3384</td>  
  82. </tr>  
  83. <tr>  
  84. <td>Ally</td>  
  85. <td>O‘Neil</td>  
  86. <td><a href="mailto:allyoneil">allyoneil</a></td>  
  87. <td>(613) 642-9831</td>  
  88. </tr>  
  89. </tbody>  
  90. </table>  
  91. <br/>  
  92. <p>To make the search text input show the search match count, add the class ‘table-sort-show-search-count‘ to the <table> tag.<br/>  
  93. <br/>  
  94. <strong>Example</strong></p>  
  95. <pre><code><table class="table-sort table-sort-search table-sort-show-search-count"></table></code></pre>  
  96. <br/>  
  97. <table class="table-sort table-sort-search table-sort-show-search-count">  
  98. <thead>  
  99. <tr>  
  100. <th class="table-sort">First Name</th>  
  101. <th class="table-sort">Last Name</th>  
  102. <th class="table-sort">Email</th>  
  103. <th>Phone Number</th>  
  104. </tr>  
  105. </thead>  
  106. <tbody>  
  107. <tr>  
  108. <td>John</td>  
  109. <td>Smith</td>  
  110. <td><a href="mailto:john.s">john.s</a></td>  
  111. <td>(613) 873-2982</td>  
  112. </tr>  
  113. <tr>  
  114. <td>Sean</td>  
  115. <td>MacIsaac</td>  
  116. <td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td>  
  117. <td>(613) 871-6191</td>  
  118. </tr>  
  119. <tr>  
  120. <td>Tim</td>  
  121. <td>Zarby</td>  
  122. <td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td>  
  123. <td>(613) 743-5389</td>  
  124. </tr>  
  125. <tr>  
  126. <td>Andrew</td>  
  127. <td>Nichols</td>  
  128. <td><a href="mailto:andy_money2003">andy_money2003</a></td>  
  129. <td>(613) 741-3384</td>  
  130. </tr>  
  131. <tr>  
  132. <td>Ally</td>  
  133. <td>O‘Neil</td>  
  134. <td><a href="mailto:allyoneil">allyoneil</a></td>  
  135. <td>(613) 642-9831</td>  
  136. </tr>  
  137. </tbody>  
  138. </table>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_193.html

<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1400529329&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Fxiaochao12345%2Fp%2F3736963.html&dt=1400529331180&shv=r20140513&cbv=r20140417&saldr=sb&correlator=1400529330944&frm=20&ga_vid=241618604.1400321121&ga_sid=1400510967&ga_hid=1285465589&ga_fc=1&u_tz=480&u_his=676&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=12&adx=0&ady=0&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=dfnn5wfeyk&p=http%3A//www.cnblogs.com&dtd=68" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1400529329&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Fxiaochao12345%2Fp%2F3736963.html&dt=1400529331256&shv=r20140513&cbv=r20140417&saldr=sb&prev_slotnames=8660799060&correlator=1400529330944&frm=20&ga_vid=241618604.1400321121&ga_sid=1400510967&ga_hid=1285465589&ga_fc=1&u_tz=480&u_his=676&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=12&adx=304&ady=250&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=VK8Ykx4QGj&p=http%3A//www.cnblogs.com&dtd=45" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>


联系
我们