分享学习心得,记录学习笔记
文章:44   访问:119477
今天是:
2020年02月19日 星期三
  >   文章列表   >   文章详情
  1. /*使用方法*/
  2. // createPaginate({
  3. // // 分页框名称
  4. // elename : "#page",
  5. // // 最后一页
  6. // lastpage : 10,
  7. // // 页码按钮数量
  8. // column_num : 5,
  9. // success:function(currPage){
  10. //
  11. // }
  12. // });
  13. function createPaginate(conf,currPage = 1){
  14. // 分页框名称
  15. var page_frame_name = conf.elename;
  16. // 最后一页
  17. var last_page = conf.lastpage;
  18. // 页码按钮数量
  19. var column_num = conf.column_num;
  20. // 当前页码
  21. var curr_page = currPage;
  22. // 分页框架
  23. var page_frame = $(page_frame_name);
  24. // 页码最大增减量
  25. var max_fix = (column_num-1)/2;
  26. // 当前增减量
  27. var fix_item = 0-max_fix;
  28. page_frame.addClass('fp-paginate');
  29. page_frame.append("<span >第"+curr_page+"/"+last_page+"页</span>");
  30. page_frame.append("<a href='javascript:void(0)'>首页</a>");
  31. if (curr_page - 1 > 0) {
  32. page_frame.append("<a href='javascript:void(0)'>上一页</a>");
  33. }
  34. for (var i=0;i<column_num;i++)
  35. {
  36. if (fix_item < 0 && curr_page + fix_item > 0) {
  37. page_frame.append("<a href='javascript:void(0)'>"+(curr_page+fix_item)+"</a>");
  38. }
  39. if (0===fix_item) {
  40. page_frame.append("<a href='javascript:void(0)' id='fp-currpage'>"+curr_page+"</a>");
  41. }
  42. if (fix_item > 0 && curr_page + fix_item <= last_page) {
  43. page_frame.append("<a href='javascript:void(0)'>"+(curr_page+fix_item)+"</a>");
  44. }
  45. fix_item++;
  46. }
  47. if (curr_page+1 <= last_page) {
  48. page_frame.append("<a href='javascript:void(0)'>下一页</a>");
  49. }
  50. page_frame.append("<a href='javascript:void(0)'>尾页</a>");
  51. page_frame.append("<i ></i><input type='text' id='fp-inp-goto' placeholder='go' value='1'><button id='fp-btn-go' >跳转</button>");
  52. // 按钮监听
  53. $(page_frame_name).find("a").click(function(){
  54. var page_a = $(this);
  55. var btn_name = page_a.data('name');
  56. switch (btn_name){
  57. case 'page-number': curr_page = Number(page_a.html()); break;
  58. case 'page-first': curr_page = 1; break;
  59. case 'page-pre': curr_page = curr_page-1; break;
  60. case 'page-next': curr_page = curr_page+1; break;
  61. case 'page-last': curr_page = last_page; break;
  62. }
  63. conf.success(curr_page);
  64. page_frame.html('');
  65. createPaginate(conf,curr_page);
  66. });
  67. $(page_frame_name).find("#fp-btn-go").click(function() {
  68. curr_page = Number($("#fp-inp-goto").val());
  69. conf.success(curr_page);
  70. page_frame.html('');
  71. createPaginate(conf,curr_page);
  72. });
  73. }
  1. /*翻页*/
  2. .fp-paginate{width: 100%;height: 40px;font-size: 14px;color: #404040;}
  3. .fp-span{margin-right: 5px;}
  4. .fp-a{text-decoration: none;color:#404040;padding: 0 5px;border: 1px solid white;}
  5. .fp-a:hover{color:black;border: 1px solid gray;}
  6. .fp-currpage{background-color:#404040;color:white;}
  7. .fp-inp-goto{width: 40px;border-radius: 3px;border: 1px solid gray;padding-left: 10px;outline: none;}
  8. .fp-btn-go{background-color: white;border: 1px solid gray;border-radius: 3px;margin-left: 5px;}
  9. .fp-btn-go:hover{background-color: #eee;border-radius: 3px;cursor: pointer;}

image

友情链接 doywb

2018-2019 Copyright© 米灵尔 小熊 豫ICP备15007436号-1

豫公网安备 41152302000146号