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