表格排序和过滤

表格排序和过滤

包括扩展的2个演示，是可以折叠的表格和分组的

演示

 

 

XML/HTML Code

1.   
2.        
3. <table id="table1">  
4.    <thead>  
5.      <tr>  
6.         <th data-type='int'>number (int)</th>  
7.         <th data-type='float'>number (float)</th>  
8.         <th>string</th>  
9.         <th data-type='date'>date</th>  
10.         <th data-sort='false'>do not sort</th>  
11.      </tr>  
12.    </thead>  
13.    <tbody>  
14.      <tr><td>2</td><td>-.18</td><td>apple</td><td>15.03.1986</td></tr>  
15.      <tr><td>15</td><td>88.5</td><td>banana</td><td>07.08.2004</td></tr>  
16.      <tr><td>-53</td><td>-858</td><td>orange</td><td>27.02.2086</td></tr>  
17.    </tbody>  
18. </table>       
19.        
20.   
21.        
22. <label for="filter2">Filter</label>     
23. <input type="text" name="filter1" value="" id="filter2" />  
24.   
25.        
26.        
27. <table id="table2">  
28.    <thead>  
29.      <tr>  
30.         <th id='t1' data-input='true' data-type='int'>number (int)</th>  
31.         <th id='t2' data-input='true' data-type='float'>number (float)</th>  
32.         <th id='t3' data-input='true'>string</th>  
33.         <th id='t4' data-input='true'>date</th>  
34.         <th id='t5' data-sort='false'>do not sort</th>  
35.      </tr>  
36.    </thead>  
37.    <tbody>  
38.      <tr>  
39.       <td><input type='text' value='2'></td>  
40.       <td><input type='text' value='-.18'></td>  
41.       <td><input type='text' value='apple'></td>  
42.       <td><input type='text' value='Mar 15, 1986'></td>  
43.      </tr>  
44.      <tr>  
45.       <td><input type='text' value='15'></td>  
46.       <td><input type='text' value='88.5'></td>  
47.       <td><input type='text' value='banana'></td>  
48.       <td><input type='text' value='Aug 07, 2004'></td>  
49.      </tr>  
50.      <tr>  
51.       <td><input type='text' value='-53'></td>  
52.       <td><input type='text' value='-858'></td>  
53.       <td><input type='text' value='orange'></td>  
54.       <td><input type='text' value='Feb 27, 2086'></td>  
55.      </tr>  
56.    </tbody>  
57.    <tfoot>  
58.      <tr><td><input type='text'></td>  
59.          <td><input type='text'></td>  
60.          <td><input type='text'></td>  
61.          <td><input type='text'></td>  
62.      </tr>       
63.    </tfoot>  
64. </table>       
65.   
66.        
67.        
68. <table id='cities'>  
69.    <thead>  
70.      <tr>  
71.         <th data-type='int'>Rank</th>  
72.         <th>City</th>  
73.         <th>Country</th>  
74.         <th data-type='int'>Population</th>  
75.         <th data-type='int'>Year</th>  
76.      </tr>  
77.    </thead>  
78.    <tbody>  
79. <tr>  
80.   <td>1</td><td>São Paulo</td><td>Brazil</td><td>11,316,149</td><td>2011</td>  
81.      </tr>  
82. <tr>  
83.   <td>2</td><td>Mexico City</td><td>Mexico</td><td>8,851,080</td><td>2010</td>  
84.      </tr>  
85. <tr>  
86.   <td>3</td><td>New York City</td><td>United States</td><td>8,175,133</td><td>2010</td>  
87.      </tr>  
88. <tr>  
89.   <td>4</td><td>Lima</td><td>Peru</td><td>7,605,742</td><td>2007</td>  
90.      </tr>  
91. <tr>  
92.   <td>5</td><td>Bogotá</td><td>Colombia</td><td>7,467,804</td><td>2011</td>  
93.      </tr>  
94. <tr>  
95.   <td>6</td><td>Rio de Janeiro</td><td>Brazil</td><td>6,355,949</td><td>2011</td>  
96.      </tr>  
97. <tr>  
98.   <td>7</td><td>Santiago</td><td>Chile</td><td>5,040,028</td><td>2010</td>  
99.      </tr>  
100. <tr>  
101.   <td>8</td><td>Los Angeles</td><td>United States</td><td>3,792,621</td><td>2010</td>  
102.      </tr>  
103. <tr>  
104.   <td>9</td><td>Buenos Aires</td><td>Argentina</td><td>2,891,082</td><td>2010</td>  
105.      </tr>  
106. <tr>  
107.   <td>10</td><td>Chicago</td><td>United States</td><td>2,695,598</td><td>2010</td>  
108.      </tr>  
109. <tr>  
110.   <td>11</td><td>Salvador</td><td>Brazil</td><td>2,693,605</td><td>2011</td>  
111.      </tr>  
112. <tr>  
113.   <td>12</td><td>Toronto</td><td>Canada</td><td>2,615,060</td><td>2011</td>  
114.      </tr>  
115. <tr>  
116.   <td>13</td><td>Brasília</td><td>Brazil</td><td>2,609,997</td><td>2011</td>  
117.      </tr>  
118. <tr>  
119.   <td>14</td><td>Fortaleza</td><td>Brazil</td><td>2,476,589</td><td>2011</td>  
120.      </tr>  
121. <tr>  
122.   <td>15</td><td>Belo Horizonte</td><td>Brazil</td><td>2,385,639</td><td>2011</td>  
123.      </tr>  
124. <tr>  
125.   <td>16</td><td>Guayaquil</td><td>Ecuador</td><td>2,366,902</td><td>2008</td>  
126.      </tr>  
127. <tr>  
128.   <td>17</td><td>Medellín</td><td>Colombia</td><td>2,343,049</td><td>2010</td>  
129.      </tr>  
130. <tr>  
131.   <td>18</td><td>Santiago de Cali</td><td>Colombia</td><td>2,219,714</td><td>2010</td>  
132.      </tr>  
133. <tr>  
134.   <td>19</td><td>Santo Domingo</td><td>Dominican Republic</td><td>2,169,300</td><td>2010</td>  
135.      </tr>  
136. <tr>  
137.   <td>20</td><td>Havana</td><td>Cuba</td><td>2,135,498</td><td>2010</td>  
138.      </tr>  
139.    </tbody>  
140. </table>      

 

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