基于jQuery ajax翻页分页特效代码

基于jQuery ajax翻页分页特效代码

用于纯html或ajax数据渲染翻页使用,引入jq,引入本人编写的paging.js,初始化,传入列表标识、初始页(选传,默认1)、每页列表数、列表总数、回调(选传,用于ajax),demo使用方法:当前为模拟ajax翻页,想使用纯html切换,只需要把131~134注释去掉,把初始化回调去掉就可以了。

使用方法
CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
.pagenation {
padding: 40px 30px 60px 0;
color: #666;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;}

.pagenation .pagenum {
float: left;
min-width: 30px;
padding: 3px 5px;
text-align: center;
margin-right: 5px;
cursor: pointer;
font-size: 14px;
border-radius: 3px;
background: #f5f5f5;
border: 1px solid #ddd;
box-sizing: border-box;
}

.pagenation .pagenum.indexpage, .pagenation .pagenum.lastpage, .pagenation .pagenum.nextpage {
background: rgba(255,255,255,0);
color: #d9cfce;
}

.pagenation .pagenum.indexpage.active, .pagenation .pagenum.lastpage.active, .pagenation .pagenum.nextpage.active {
    background-color: #f5f5f5;
    color: #999;
}

    .pagenation .pagenum.indexpage.active a, .pagenation .pagenum.lastpage.active a, .pagenation .pagenum.nextpage.active a {
        color: #999;
    }

.pagenation .pagenum.pagetext, .pagenation .pagenum.totalpage {
border-radius: 0px;
background: rgba(255,255,255,0);
border: none;
}

.pagenation .pagenum a {
color: #999;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}

.pagenation .pageswiperbox {
min-width: 35px;
max-width: 175px;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}

.pagenation .pageswiper {
width: auto;
}

.pagenation .pageswiper .pagenum {
display: inline-block;
float: none;
}

.pagenation .pagenum.curpage {
background: rgba(255,255,255,0);
color: #FE7200;
border: none;
}

.pagenation .pagenum.curpage a {
color: #FE7200;
display: block;
width: 100%;
}

.pagenation .pageinput {
text-align: center;
border: 1px solid #e5e5e5;
width: 40px;
margin: 0 3px;
line-height: 17px;
box-sizing: border-box;
vertical-align: top;
}

.pagenation .pagesubbtn {
background: rgba(255,255,255,0);
}

.pagenation .pagesubbtn a {
color: #d9cfce;
}

.pagenation .pagesubbtn.active {
background: #f5f5f5;
}

.pagenation .pagesubbtn a {
color: #999;
}

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  var options = {
      list:".list",//列表标识
      currentPage:1,//初始页(选传,默认1)
      pageSize:5,//每页列表数
      listTotal:31,//列表总数(选传),不传为list总数
      callback:function(currentPage){//翻页回调(可填,可做ajax请求),不传为纯html切换
          loadData(ajaxDemo(currentPage))
      }
  }
  $("#pageBox").paging(options)
  function ajaxDemo(page,pageSize){
      if(!pageSize)var pageSize = 5;
      var data = {},arr=[];
      for(var i = 1;i<=31;i++){
          arr.push(i);
          if(i==pageSize){
              data[1]=arr;
              arr=[];
          }else if(i==pageSize*2){
              data[2]=arr;
              arr=[];
          }else if(i==pageSize*3){
              data[3]=arr;
              arr=[];
          }else if(i==pageSize*4){
              data[4]=arr;
              arr=[];
          }else if(i==pageSize*5){
              data[5]=arr;
              arr=[];
          }else if(i==pageSize*6){
              data[6]=arr;
              arr=[];
          }else if(i==31){
              data[7]=arr;
              arr=[];
          }
      }
      return data[page];
  }
  function loadData(data){
      console.log("callback")
      $("#pageBox").empty();
      for(var i = 0;i<data.length;i++){
          $("#pageBox").append("<li class='list'>"+data[i]+"</li>");
      }
  }
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论