首页>>Jquery文字>>表格排序和过滤(2014-01-09)

表格排序和过滤

包括扩展的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