码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-03-06 19:24:42      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:log   statistic   bottom   json   ica   value   link   igp   排序   

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

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

标签:log   statistic   bottom   json   ica   value   link   igp   排序   

原文地址:https://www.cnblogs.com/mqxnongmin/p/10485161.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!