JavaScript控制页码的显示与隐藏
2024-09-02 05:12:42
前端页面开发分页显示功能时,一般都要求使用自定义的页码样式,直接用网上分页插件就比较麻烦了,这里记录一下工作中总结的一个比较简单通用的控制页码显示与隐藏的的js代码。
首先是使用时需要自己根据自己具体页面内容修改的代码:
//这里是需要修改的,换成自己页面的样式和id就行,还有查询方法也需要自己进行具体修改
var _page_pre = '<a href="javascript:searchData(PagePre);" class="go-page"><上一页</a>';//"上一页"的html
var _page_check = '<a href="javascript:void(0);" class="n check" >PageNow</a>';//"选中页码"的html
var _page_middle = '<a href="javascript:searchData(pageNum);" class="n" >pageNum</a>';//"普通页码"的html
var _page_next = '<a href="javascript:searchData(PageNext);" class="go-page"">下一页></a>';//"下一页"的html
var _page_id = "pagelist";//显示页码的容器的id
var sideNum = 4;//选中页两侧普通页的数量,可以自己定义 /**
* ajax查询数据
*/
function searchData(pageNow){
$.ajax({
type: "POST",
url: "",
data: "pageNum="+pageNow,//pageNow是必须的,其他参数根据自己需要可以再加,
dataType:"json",
success: function(json){
if(json.status == "ok"){
//省略了datalist_html的拼接
$("#datalist").html(datalist_html);//查询到当前页的具体数据,拼接好添加到页面里面
var total = json.pageTotal;//查询到的总页数
showPage(total,pageNow);//这里调用控制页码显示的方法
}
}
});
}
接下来才是通用的js代码,不需要做任何修改。
这里只实现了单纯页码的显示功能,“显示总页数”,“跳页”,“首页”,“最后一页”功能比较简单,自己根据下面的代码可以很容易加上的。
/**
* 控制页码显示
* @param pageCount 总页数
* @param pageNum 当前页
* @return
*/
function showPage(pageCount,pageNum){
var startNum = 0;
var endNum = 0;
//获取显示页码的起始值
if(pageNum<=sideNum){
startNum = 1;
}else{
if((pageNum+sideNum)>=pageCount){
if((2*sideNum+1)>=pageCount){
if((pageCount - 2*sideNum)>=1){
startNum = pageCount - 2*sideNum;
}else{
startNum = 1;
}
}else{
startNum = pageCount - 2*sideNum;
}
}else{
if((pageNum-sideNum)>=1){
startNum = pageNum - sideNum;
}else{
startNum = 1;
}
}
}
//获取显示页码的结束值
if(pageCount<=sideNum){
endNum = pageCount;
}else{
if((sideNum+pageNum)>=pageCount){
endNum = pageCount;
}else{
endNum = sideNum+pageNum;
if((sideNum+pageNum)<=(2*sideNum+1)){
if((2*sideNum+1)>=pageCount){
endNum = pageCount;
}else{
endNum = 2*sideNum+1;
}
}else{
endNum = sideNum + pageNum;
}
}
}
//生成页码html
var pageHtml = '';
if(pageNum > 1){//对“上一页”按钮的控制,这里可以根据自己需要选择隐藏还是置灰
pageHtml += _page_pre.replace(/PagePre/g, pageNum-1);
}
for (var i=startNum; i<=endNum; i++) {//控制中间页码
if(i==pageNum){
pageHtml += _page_check.replace(/PageNow/g, i);
}else{
pageHtml += _page_middle.replace(/pageNum/g, i);
}
}
if(pageNum<pageCount){//对“下一页”按钮的控制,这里可以根据自己需要选择隐藏还是置灰
pageHtml += _page_next.replace(/PageNext/g, pageNum+1);
}
//将拼好的页码html添加到页面上
$("#"+_page_id).html(pageHtml);
}
下面是实现效果:
最新文章
- 换肤系统(oocss方式)
- 121. Best Time to Buy and Sell Stock
- SQLSERVER中的ALLOCATION SCAN和RANGE SCAN
- Uva442 hdu 1082 Matrix Chain Multiplication
- 当BPM业务流程管理遇上制造业
- static 使用,静态变量
- (Python )模块、包
- 将Excel导入数据库
- Gson将参数放入实体类中进行包装之后再传递
- Mac上添加adb_usb.ini
- SQL server 跨库插入数据
- linux之SQL语句简明教程---TRIM
- Angularjs 基于karma和jasmine的单元测试
- MEF初体验之一:在应用程序宿主MEF
- UITableView的style详解
- 从输入一个URL到页面完全显示发生了什么?
- [android] 相对布局和单位简介
- java中的try-catch-finally异常处理(学习笔记)
- centos目录
- SpringBoot------Maven Clean报错
热门文章
- Fiddler 抓包工具怎么使用?怎么在Android手机端的APP抓包
- test case VS test scenario
- git command line 提交代码
- 微信小程序开发之保留小数(toFixed) 四舍五入 获取整数 string转int
- springboot整合dubbox与zookeeper
- Linux进程的原理及与信号的联系
- 网络基础-- 之 子网划分 and 一些基础解释
- Java中两个线程是否可以同时访问同一个对象的两个不同的synchronized方法?
- 标志寄存器在Debug中的表示
- Python开发——函数【迭代器、生成器、三元表达式、列表解析】