首页>>Jquery文字>>jquery表格排序和筛选表(2014-07-25)

jquery表格排序和筛选表

jquery表格排序和筛选表
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="container">  
  2.         <div id="example">  
  3.             <div class="tableFilter">  
  4.                 <form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:   
  5.                     <select id="column">  
  6.                         <option value="1">Firstname</option>  
  7.                         <option value="2">Lastname</option>  
  8.                         <option value="3">Department</option>  
  9.                         <option value="4">Start Date</option>  
  10.                     </select>  
  11.                     <input type="text" id="keyword" />  
  12.                     <input type="submit" value="Submit" />  
  13.                     <input type="reset" value="Clear" />  
  14.                 </form>  
  15.           </div>  
  16.           <table id="myTable" cellpadding="0" cellpadding="0">   
  17.             <thead>  
  18.                 <th axis="number">ID</th>  
  19.                 <th axis="string">Firstname</th>  
  20.                 <th axis="string">Lastname</th>  
  21.                 <th axis="string">Department</th>  
  22.                 <th axis="date">Start Date</th>  
  23.             </thead>  
  24.             <tbody>  
  25.                 <tr id="1">  
  26.                     <td class="rightAlign">1</td>  
  27.                     <td>Sam</td>  
  28.                     <td>Birch</td>  
  29.                     <td>Programming</td>  
  30.                     <td class="rightAlign">01/06/00</td>  
  31.                 </tr>  
  32.                 <tr id="2">  
  33.                     <td class="rightAlign">2</td>  
  34.                     <td>George</td>  
  35.                     <td>Lo</td>  
  36.                     <td>Support</td>  
  37.                     <td class="rightAlign">01/07/99</td>  
  38.                 </tr>  
  39.                 <tr id="3">  
  40.                     <td class="rightAlign">3</td>  
  41.                     <td>kevin</td>  
  42.                     <td>Walker</td>  
  43.                     <td>Programming</td>  
  44.                     <td class="rightAlign">01/06/05</td>  
  45.                 </tr>  
  46.                 <tr id="4">  
  47.                     <td class="rightAlign">4</td>  
  48.                     <td>Peter</td>  
  49.                     <td>Aland</td>  
  50.                     <td>Project Management</td>  
  51.                     <td class="rightAlign">23/10/06</td>  
  52.                 </tr>  
  53.                 <tr id="5">  
  54.                     <td class="rightAlign">5</td>  
  55.                     <td>Rachel</td>  
  56.                     <td>Dickinson</td>  
  57.                     <td>Design</td>  
  58.                     <td class="rightAlign">20/01/05</td>  
  59.                 </tr>  
  60.                 <tr id="6">  
  61.                     <td class="rightAlign">6</td>  
  62.                     <td>John</td>  
  63.                     <td>Tsang</td>  
  64.                     <td>Support</td>  
  65.                     <td class="rightAlign">05/10/05</td>  
  66.                 </tr>  
  67.             </tbody>  
  68.             <tfoot>  
  69.                 <tr>  
  70.                     <td></td>  
  71.                     <td></td>  
  72.                     <td></td>  
  73.                     <td></td>  
  74.                     <td></td>  
  75.                 </tr>  
  76.             </tfoot>  
  77.           </table>  
  78.           </div>  
  79.         <script type="text/javascript">  
  80.             var myTable = {};  
  81.             window.addEvent('domready', function(){  
  82.                 myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});  
  83.             });  
  84.         </script>  
  85.         </div>  

 


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