html分页
程序员文章站
2022-07-02 14:49:48
1.CSS 1 /* 2 * 页数按钮样式 3 */ 4 .page_div span:nth-of-type(2){ 5 float: right; 6 } 7 .page_div a:last-child{ 8 margin-right: 0; 9 } 10 .page{ 11 padding- ......
1.CSS
1 /*
2 * 页数按钮样式
3 */
4 .page_div span:nth-of-type(2){
5 float: right;
6 }
7 .page_div a:last-child{
8 margin-right: 0;
9 }
10 .page{
11 padding-right: 21px;
12 }
13 .page_div a {
14 min-width: 30px;
15 height: 28px;
16 border: 1px solid #a6acb7;
17 text-align: center;
18 margin: 0 3px;
19 cursor: pointer;
20 line-height: 28px;
21 color: #000;
22 font-size: 13px;
23 display: inline-block;
24 background: #fff;
25 }
26
27 .page_div .current {
28 color: #FFFFFF;
29 border: none !important;
30 background-color: #44884f;
31
32 }
33 .page_div .current:hover{
34 color: #FFFFFF;
35 border: none !important;
36 background-color: #44884f;
37 }
38 .totalPages {
39 margin: 0 10px;
40 }
41
42 .totalPages span,
43 .totalSize span {
44 color: #0073A9;
45 margin: 0 5px;
46 }
47
48 /*end分页引用外部样式*/
2.HTML
1 <div class="p_pager"> 2 <p class="page_div" id="page"> 3 4 </p> 5 </div>
3.JS
1 (function($, window, document, undefined) {
2 //定义分页类
3 function Paging(element, options) {
4 this.element = element;
5 //传入形参
6 this.options = {
7 pageNo: options.pageNo||1,
8 totalPage: options.totalPage,
9 totalSize:options.totalSize,
10 callback:options.callback
11 };
12 //根据形参初始化分页html和css代码
13 this.init();
14 }
15 //对Paging的实例对象添加公共的属性和方法
16 Paging.prototype = {
17 constructor: Paging,
18 init: function() {
19 this.creatHtml();
20 this.bindEvent();
21 this.pageBtnHover();
22 },
23 //分页翻页按钮hover效果
24 pageBtnHover: function () {
25 $("#nextPage")
26 .on("mouseout",
27 function () {
28 $(this).find("img").attr("src", "/img/rightButtonPage.png");
29 });
30 $("#prePage")
31 .on("mouseout",
32 function () {
33 $(this).find("img").attr("src", "/img/leftButtonPage.png");
34 });
35 $("#nextPage")
36 .on("mouseover",
37 function () {
38 $(this).find("img").attr("src", "/img/pa_right_per.png");
39 });
40 $("#prePage")
41 .on("mouseover",
42 function () {
43 $(this).find("img").attr("src", "/img/pa_left_per.png");
44 });
45 },
46 creatHtml: function () {
47
48 var me = this;
49 var content = "";
50 var current = me.options.pageNo;
51 var total = me.options.totalPage;
52 var totalNum = me.options.totalSize;
53 content += "<span>显示 <select id='selectPage'><option>10</option><option>25</option><option>50</option><option>100</option></select> 项结果<span class='page'></span>显示第1至" + totalNum+"项结果，共"+total+"页</span>";
54 content += "<span><a id='prePage'><img src='/img/leftButtonPage.png'></a>";
55
56 //总页数大于6时候
57 if(total > 6) {
58 //当前页数小于5时显示省略号
59 if(current < 5) {
60 for(var i = 1; i < 6; i++) {
61 if(current == i) {
62 content += "<a class='current'>" + i + "</a>";
63 } else {
64 content += "<a>" + i + "</a>";
65 }
66 }
67 content += ". . .";
68 content += "<a>"+total+"</a>";
69 } else {
70 //判断页码在末尾的时候
71 if(current < total - 3) {
72 for(var i = current - 2; i < current + 3; i++) {
73 if(current == i) {
74 content += "<a class='current'>" + i + "</a>";
75 } else {
76 content += "<a>" + i + "</a>";
77 }
78 }
79 content += ". . .";
80 content += "<a>"+total+"</a>";
81 //页码在中间部分时候
82 } else {
83 content += "<a>1</a>";
84 content += ". . .";
85 for(var i = total - 4; i < total + 1; i++) {
86 if(current == i) {
87 content += "<a class='current'>" + i + "</a>";
88 } else {
89 content += "<a>" + i + "</a>";
90 }
91 }
92 }
93 }
94 //页面总数小于6的时候
95 } else {
96 for(var i = 1; i < total + 1; i++) {
97 if(current == i) {
98 content += "<a class='current'>" + i + "</a>";
99 } else {
100 content += "<a>" + i + "</a>";
101 }
102 }
103 }
104 content += "<a id='nextPage'><img src='/img/rightButtonPage.png'></a></span>";
105 me.element.html(content);
106 },
107 //添加页面操作事件
108 bindEvent: function() {
109 var me = this;
110 me.element.off('click', 'a');
111 me.element.on('click', 'a', function() {
112 var num = $(this).html();
113 var id=$(this).attr("id");
114 if(id == "prePage") {
115 if(me.options.pageNo == 1) {
116 me.options.pageNo = 1;
117 } else {
118 me.options.pageNo = +me.options.pageNo - 1;
119 }
120 } else if(id == "nextPage") {
121 if(me.options.pageNo == me.options.totalPage) {
122 me.options.pageNo = me.options.totalPage
123 } else {
124 me.options.pageNo = +me.options.pageNo + 1;
125 }
126
127 } else if(id =="lastPage") {
128 me.options.pageNo = me.options.totalPage;
129 }else{
130 me.options.pageNo = +num;
131 }
132 me.creatHtml();
133 if(me.options.callback) {
134 me.options.callback(me.options.pageNo);
135 }
136 });
137 }
138 };
139 //通过jQuery对象初始化分页对象
140 $.fn.paging = function(options) {
141 return new Paging($(this), options);
142 }
143 })(jQuery, window, document);
4.调用
1 (function ($, window, document, undefined) {
2 $.extend({
3 pageTest: function (options) {
4 var settings = {
5 row: 10,
6 };
7 getData();
8 function getData() {
9 //调用接口获取数据
10 //....
11 //显示分页
12 showPage();
13 }
14
15 function showPage(pageNo, total) {
16 var totalPage = Math.ceil(total / settings.row);
17 $("#page").paging({
18 pageNo: pageNo,
19 totalPage: totalPage,
20 totalSize: total,
21 callback: function (num) {
22 settings.page = num;
23 //调用接口获取数据
24 getData();
25 }
26 });
27 $("#selectPage").val(settings.row);
28 }
29 }
30 });
31
32 })(jQuery, window, document);