ajax json 表格排序，分页，自定义每页数量

ajax json 表格排序，分页，自定义每页数量

 点击表头可以排序，按照升序或者降序，另外支持多列排序

设置每页数量

演示

 

XML/HTML Code

1. <table id='example3'>  
2.   
3. <thead>  
4. <tr>  
5.  <th>ID</th>  
6.  <th>First name</th>  
7.  <th>Last name</th>  
8.  <th>Grade</th>  
9.  <th>Grade 2</th>  
10.  <th>Efficiency</th>  
11.  <th>Age</th>  
12.  <th>Company</th>  
13. </tr>  
14. </thead>  
15.   
16. <tbody>  
17. </tbody>  
18.   
19. </table>  

 

JavaScript Code

1. <script type='text/javascript'>  
2. $(function() {  
3.     $.ajax({  
4.         url: "example3.json",  
5.         dataType: "json"  
6.     }).done(function(data) {  
7.         console.log(data);  
8.         $("#example3").slimtable({  
9.             tableData: data  
10.         });  
11.     }).fail(function(param1,param2) {  
12.         console.log("error: "+param2);  
13.     });  
14. });  
15. </script>  

 example3.json

XML/HTML Code

1. [  
2.     [ "1", "ex1", "ex_a", "2,5", "2.5", "30%", "19", "ex_a1" ],  
3.     [ "2", "ex2", "ex_b", "5,4", "5.4", "28,5%", "33", "ex_b1" ],  
4.     [ "3", "ex3", "ex_c", "16,7", "16.7", "19,3%", "33", "ex_c1" ],  
5.     [ "4", "ex4", "ex_d", "2,8", "2.8", "1,8%", "28", "ex_b1" ],  
6.     [ "5", "ex6", "ex_e", "2,5", "2.5", "2,85 %", "44", "ex_a1" ],  
7.     [ "6", "ex7", "ex_f", "5,5", "5.5", "16%", "52", "ex_d1" ],  
8.     [ "7", "ex8", "ex_g", "6,8", "6.8", "1,9%", "39", "ex_e1" ],  
9.     [ "8", "ex9", "ex_h", "6,8", "6.8", "1,9 %", "28", "freejs.net" ]  
10. ]  

 

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