page.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. function page_ctrl(data_obj) {
  2. //分页元素
  3. var obj_box = (data_obj.obj_box !== undefined) ? data_obj.obj_box : function() { return; };
  4. //总共数据条数
  5. var total_item = (data_obj.total_item !== undefined) ? parseInt(data_obj.total_item) : 0;
  6. //每页显示数据条数
  7. var per_num = (data_obj.per_num !== undefined) ? parseInt(data_obj.per_num) : 5;
  8. //当前页数
  9. var current_page = (data_obj.current_page !== undefined) ? parseInt(data_obj.current_page) : 1;
  10. //总页数
  11. var total_page = Math.ceil(total_item / per_num);
  12. // if (total_page < 2) { return; }
  13. //插入放数据的div
  14. $(obj_box).html('<div class="page_content"></div>');
  15. //插入放页码的div
  16. $(obj_box).html('<div class="page_ctrl"></div>');
  17. function page_even() {
  18. //只能传达数字
  19. var regPos = /^\d+$/;
  20. //如果当前页数不是数字
  21. if (regPos.test(current_page)) {
  22. current_page = current_page < 1 ? 1 : (current_page > total_page ? total_page : current_page);
  23. } else {
  24. current_page = 1;
  25. }
  26. //调用 回调函数
  27. data_obj.change_content(per_num, current_page);
  28. var inp_val = (current_page == total_page) ? 1 : current_page;
  29. //分页div前半部分
  30. var append_html = '<span class="page_total">共 ' + total_page + ' 页</span><button class="iconfont icon-xiangzuo prev_page"></button>';
  31. //页码数量
  32. for (var i = 0; i < total_page - 1; i++) {
  33. if (total_page > 8 && current_page > 6 && i < current_page - 3) {
  34. if (i < 2) {
  35. append_html += '<button class="page_num">' + (i + 1) + '</button>';
  36. } else if (i == 2) {
  37. append_html += '<span class="page_dot">...</span>';
  38. }
  39. } else if (total_page > 8 && current_page < total_page - 3 && i > current_page + 1) {
  40. if (current_page > 6 && i == current_page + 2) {
  41. append_html += '<span class="page_dot">...</span>';
  42. } else if (current_page < 7) {
  43. if (i < 8) {
  44. append_html += '<button class="page_num">' + (i + 1) + '</button>';
  45. } else if (i == 8) {
  46. append_html += '<span class="page_dot">...</span>';
  47. }
  48. }
  49. } else {
  50. if (i == current_page - 1) {
  51. append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
  52. } else {
  53. append_html += '<button class="page_num">' + (i + 1) + '</button>';
  54. }
  55. }
  56. }
  57. //生成最后一页
  58. if (current_page == total_page) {
  59. append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
  60. } else {
  61. append_html += '<button class="page_num">' + (i + 1) + '</button>';
  62. }
  63. //分页div后半部分
  64. append_html += '<button class="iconfont icon-xiangyou next_page"></button><span class="page_total">到第</span><input class="input_page_num" type="text" ><span class="page_text">页</span><button class="to_page_num">确定</button>';
  65. $(obj_box).children('.page_ctrl').append(append_html);
  66. //左右分页按钮监控
  67. if (current_page == 1) {
  68. $(obj_box + ' .page_ctrl .prev_page').attr('disabled', 'disabled').addClass('btn_dis');
  69. } else {
  70. $(obj_box + ' .page_ctrl .prev_page').removeAttr('disabled').removeClass('btn_dis');
  71. }
  72. if (current_page == total_page) {
  73. $(obj_box + ' .page_ctrl .next_page').attr('disabled', 'disabled').addClass('btn_dis');
  74. } else {
  75. $(obj_box + ' .page_ctrl .next_page').removeAttr('disabled').removeClass('btn_dis');
  76. }
  77. };
  78. page_even();
  79. //给按钮绑定点击事件
  80. $(obj_box + ' .page_ctrl').on('click', 'button', function() {
  81. var that = $(this);
  82. if (that.hasClass('prev_page')) {
  83. if (current_page != 1) {
  84. current_page--;
  85. that.parent('.page_ctrl').html('');
  86. page_even();
  87. }
  88. } else if (that.hasClass('next_page')) {
  89. if (current_page != total_page) {
  90. current_page++;
  91. that.parent('.page_ctrl').html('');
  92. page_even();
  93. }
  94. } else if (that.hasClass('page_num') && !that.hasClass('current_page')) {
  95. current_page = parseInt(that.html());
  96. that.parent('.page_ctrl').html('');
  97. page_even();
  98. } else if (that.hasClass('to_page_num')) {
  99. current_page = parseInt(that.siblings('.input_page_num').val());
  100. that.parent('.page_ctrl').html('');
  101. page_even();
  102. }
  103. });
  104. }