test-default.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <link href="mricode.pagination.css" rel="stylesheet" />
  8. <script src="jquery-2.1.4.min.js"></script>
  9. <script src="mricode.pagination.js"></script>
  10. </head>
  11. <body>
  12. <div>
  13. <div>
  14. pageIndex <input id="pageIndex" type="text" name="name" value="0" />
  15. pageSize <input id="pageSize" type="text" name="name" value="10" />
  16. total <input id="total" type="text" name="name" value="216" />
  17. <button id="btn_init" type="button">初始化</button>
  18. <button id="btn_render" type="button">重新生成</button>
  19. <button id="btn_destroy" type="button">销毁</button>
  20. <button id="btn_isInited" type="button">是否初始化</button>
  21. </div>
  22. </div>
  23. <div id="page" class="m-pagination"></div>
  24. <div id="eventLog"></div>
  25. <script>
  26. btn_init.onclick = function () {
  27. //if ($("#page").pagination()) {
  28. // $("#page").pagination('destroy');
  29. //}
  30. $("#page").pagination({
  31. pageIndex: pageIndex.value,
  32. pageSize: pageSize.value,
  33. total: total.value,
  34. debug: true,
  35. showInfo: true,
  36. showJump: true,
  37. showPageSizes: true,
  38. pageElementSort: ['$page', '$size', '$jump', '$info']
  39. });
  40. }
  41. btn_render.onclick = function () {
  42. $("#page").pagination('setPageIndex', pageIndex.value);
  43. $("#page").pagination('setPageSize', pageSize.value);
  44. $("#page").pagination('render', total.value);
  45. }
  46. btn_destroy.onclick = function () {
  47. $("#page").pagination('destroy');
  48. alert('销毁:$("XXX").pagination("destroy")');
  49. }
  50. btn_isInited.onclick = function () {
  51. var isInited = $("#page").pagination();
  52. var text = '判断是否初始化:$("XXX").pagination() 返回Boolean \r当前:' + (isInited ? "已初始化" : "未初始化");
  53. alert(text);
  54. }
  55. $("#page").on("pageClicked", function (event, data) {
  56. $("#eventLog").append('EventName = pageClicked , pageIndex = ' + data.pageIndex + '<br />');
  57. }).on('jumpClicked', function (event, data) {
  58. $("#eventLog").append('EventName = jumpClicked , pageIndex = ' + data.pageIndex + '<br />');
  59. }).on('pageSizeChanged', function (event, data) {
  60. $("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + data.pageSize + '<br />');
  61. });
  62. </script>
  63. </body>
  64. </html>