纯js制作页码导航
在网站里面都是ajax爆炸的今天,通过json格式来传递数据,动态加载内容。如果加载的是一个多页的列表页面,需要通过js来生成一个分页的导航。
效果如下:
先计算分页的页数
1 // JavaScript Document
2 //计算页数
3 function calculatePage(total,pageSize)
4 {
5 var page=total/pageSize;
6 if(total%pageSize>0)
7 return Math.ceil(page);
8 else
9 return page;
10 }
生成导航的函数如下:
1 //分页列表
2 function make_page_list(total,pageSize,pageIndex,page_sum){
3 html="";
4 var total_page=calculatePage(total,pageSize);
5 var firstPage='getPage('+1+')';
6 var lastPage='getPage('+total_page+')';
7 if(total_page>1){
8 var html='<table cellpadding="0" width="90%" cellspacing="0" height="40" align="center"> <tr>';
9 if(pageIndex>1){
10 html+='<td align="left"><a href="javascript:void(0)" onclick="'+firstPage+'">首页</a> ';
11 }else{
12 html+='<td align="left">首页 ';
13 }
14 var page=Math.floor(page_sum/2);
15
16 var begin=pageIndex-page;
17 var end=pageIndex+page;
18 begin=begin<1?1:begin;
19
20 var temp=end-begin;
21 if(temp<(page_sum-1)){
22 temp=page_sum-temp-1;
23 end=end+temp;
24 }
25 if(parseInt(end)>parseInt(total_page)){
26 temp=end-total_page;
27 begin=begin-temp;
28 end=total_page;
29 begin=begin<1?1:begin;
30 }
31
32 if(pageIndex>1){
33 html+='| <a href="javascript:getPage('+(pageIndex-1)+');">上一页</a> ';
34 }else{
35 html+='| 上一页 ';
36 }
37
38 if(pageIndex<total_page){
39 html+='| <a href="javascript:getPage('+(pageIndex+1)+')">下一页</a> ';
40 }else{
41 html+='| 下一页 ';
42 }
43 if(pageIndex<total_page)
44 html+='| <a href="javascript:'+lastPage+';">末页</a></td>';
45 else
46 html+='| 末页</td>';
47 html+='<td align="right">当前页:'+pageIndex+'/'+total_page+' ';
48 for(var c=begin;c<=end;c++){
49 if(c==pageIndex){
50 html+=' ['+c+'] ';
51 }else{
52 html+=' <a href="javascript:getPage('+c+');">['+c+']</a>';
53 }
54 }
55 html+='</td></tr></table>';
56 }
57 return html;
58
59 }
其中getPage函数是来获得ajax异步获取第某一页的数据的。你可以通过修改样式来达到不同的显示效果。
作者:划风
邮箱:emaisi@hotmail.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)