偶然需要自己写一个分页的功能。这里把我写的分页功能记录下来。方便下次写分页的是直接拿过来用就可以了。
直接上代码
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
| // 页码
var page = 1;
var limit = 10;
/**
* 设置页码
*/
function setpage(count,page) {
$('#nav_page').html('');
// 算出一共有多少页
var all_page = Math.ceil(count / limit);
var str = ''; // html字符串
if(page > 1){
str += '<li onclick="page = page-1; get_data();" class="page-item">\n' +
' <a class="page-link" href="#" aria-label="Previous">\n' +
' <span aria-hidden="true">«</span>\n' +
' <span class="sr-only">上一页</span>\n' +
' </a>\n' +
' </li>';
}
if(all_page < 6){
for(var i=1; i <= all_page ; i++){
if(i == page){
str += '<li class="page-item" ><a class="page-link" href="#" style="background: #b1c8f7; ">'+i+'</a></li>';
}else{
str += '<li class="page-item" onclick="page = '+ i +'; get_data();"><a class="page-link" href="#">'+i+'</a></li>';
}
}
}else{
var end = page + 2;
// 页码的前面两个
for(var i = page - 2; i <= end; i++){
if(i <= 0){
end += 1;
continue;
}
if(i == page){
str += '<li class="page-item" ><a class="page-link" href="#" style="background: #b1c8f7; ">'+i+'</a></li>';
}else{
str += '<li class="page-item" onclick="page = '+ i +'; get_data();"><a class="page-link" href="#">'+i+'</a></li>';
}
}
}
if(page < all_page){
str += '<li onclick="page = page+1; get_data();" class="page-item">\n' +
' <a class="page-link" href="#" aria-label="Next">\n' +
' <span aria-hidden="true">»</span>\n' +
' <span class="sr-only">Next</span>\n' +
' </a>\n' +
' </li>';
}
$('#nav_page').html(str);
}
|
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <nav >
<ul id="nav_page" class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
|