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

Posted 2021-02-12 mqxnongmin

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