zoukankan      html  css  js  c++  java

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

    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
  • 相关阅读:
    oracle添加字段，备注
    oracle对日期date类型操作的函数
    查询效率例子收藏
    webuploader.min.js 简单例子
    select 数字/字符串/count(参数)/sum(数字) from table
    oracle常用分析函数 over(partition by xxx order by xxx)
    LigerUi遮罩的两个方法
    LigerUI子父窗口之间传参问题
    LigerUi自动检索输入
    LigerUi折叠与展开
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3736963.html
Copyright © 2011-2022 走看看