js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由

 

1. //page(JSON对象);所有属性见代码中ops

2. define(function (require, exports, module) {

3. module.exports= function(os){

4. //可用配置属性

5. var ops = {

6. total:0 //记录数

7. , page:0 //当前页

8. , count:0 //或当前记录数

9. , side:5 //当前页左右数字页个数

10. , per:5 //每页条数

11. //模板的值非''才显示,占位符有{=page},{=maxPage},{=total},{=currentPage}

12. , firstTPL:'<a href="?{=page}">首页</a>' //首页模板

13. , lastTPL:'<a href="?{=page}">末页</a>' //末页模板

14. , prevTPL:'<a href="?{=page}">上页</a>' //上页模板

15. , nextTPL:'<a href="?{=page}">下页</a>' //下页模板

16. , prevSideTPL:'<a href="?{=page}"><<</a>' //前组模板(快退)

17. , nextSideTPL:'<a href="?{=page}">>></a>' //后组模板(快进)

18. , numberTPL:'<a href="?{=page}">{=page}</a>' //页码形式模板

19. , pageTPL:'<a href="#{=page}">{=page}</a>' //当前页码模板

20. , jumpTPL:'' //跳转form

21. };

22. for (var o in ops)

23. o in os && (ops[o]=os[o]);

24. function parseTPL(tpl,json) {

25. if (!tpl)

26. return '';

27. json.maxPage = ops.maxp;

28. json.total = ops.total;

29. json.currentPage = ops.page;

30. return String(tpl).replace(/\{\=(\w+)\}/g,function($0,$1){

31. return json[$1]||'';

32. });

33. }

34.  

35. var pages = '';

36. (!+ops.per || ops.per < 1) && (ops.per = 5);

37. if (!+ops.total || ops.total <= ops.per )

38. return pages;//只有一页

39. ops.maxp = Math.ceil(ops.total/ops.per);//最大页

40.  

41. //得到当前页码与偏移

42. if (ops.count > 0) {//使用条数方式

43. ops.count > ops.total && (ops.count = ops.total);

44. ops.page = Math.ceil(ops.count/ops.per);//数据位移转换成页,余+1

45. } else if (ops.page > 1){//页码式

46. ops.page > ops.maxp && (ops.page = ops.maxp);

47. ops.count = ops.page*ops.per;

48. } else {

49. ops.count = 0;

50. ops.page = 1;

51. }

52.  

53. ops.nums = ops.side*2+1;//总数字页为*2+1

54.  

55. console.log(ops);

56. //首页/上页,左边页面码,page>side出现

57. if (ops.page > ops.side+1)

58. pages += parseTPL(ops.firstTPL,{page:1})

59. + parseTPL(ops.prevTPL,{page:ops.page-1});

60.  

61. //快退:

62. var prevp = ops.page - ops.nums;

63. if (prevp > 1 )

64. pages += parseTPL(ops.prevSideTPL,{page:prevp});

65.  

66. //中间左边/右边的页码

67. for (var fi = ops.side, sidel=sider='',pl=pr=ops.page;fi >0; fi--) {

68. //左边页面码

69. if (--pl >= 1)

70. sidel = parseTPL(ops.numberTPL,{page:pl}) + sidel;

71. //右边页码

72. if (++pr <= ops.maxp)

73. sider += parseTPL(ops.numberTPL,{page:pr});

74. }

75.  

76. pages += sidel

77. + parseTPL(ops.pageTPL,{page:ops.page})

78. + sider;

79.  

80. //快进按钮

81. var nextp = ops.page + ops.nums;

82. if (ops.maxp > nextp )

83. pages += parseTPL(ops.nextSideTPL,nextp);

84.  

85. //最后的按钮

86. if (ops.maxp- ops.page > ops.side)

87. pages += parseTPL(ops.nextTPL,{page:ops.page+1})

88. +parseTPL(ops.lastTPL,{page:ops.maxp});

89.  

90. //跳转

91. if (ops.page > ops.side || ops.maxp-ops.page >ops.side)

92. pages += parseTPL(ops.jumpTPL,{page:ops.page});

93.  

94. return pages;

95. }

96. });

 

使用方法

seajs见seajs.org

或者改写成普通的插件

seajs.use('chrd/page/1.0/page.js#?kdkddddddgdkk',function(p){page = p({total:1000,page:25});console.log(page);})

Object {total: 1000, page: 25, count: 125, side: 5, per: 5…}

page.js:55

<a href="?1">首页</a><a href="?24">上页</a><a href="?14">&lt;&lt;</a><a href="?20">20</a><a href="?21">21</a><a href="?22">22</a><a href="?23">23</a><a href="?24">24</a><a href="#25">25</a><a href="?26">26</a><a href="?27">27</a><a href="?28">28</a><a href="?29">29</a><a href="?30">30</a><a href="?">&gt;&gt;</a><a href="?26">下页</a><a href="?200">末页</a>

 

 

https://blog.youkuaiyun.com/qidizi/article/details/10717845?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.nonecase