首页>>Jquery文字>>jquery 表格排序，实时搜索表格内容(2013-12-21)

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