1. 程式人生 > >ajax json 表格排序,分頁,自己定義每頁數量

ajax json 表格排序,分頁,自己定義每頁數量

ans val span 5.5 排序。 itl mod sheet .ajax

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 表格排序,分頁,自己定義每頁數量