js实现分页
类别:Web前端 浏览量:286
时间:2015-1-13 js实现分页
js实现分页一、实现思路
前端JS进行逻辑判断、组织分页Html代码,然后通过ajax异步从后台获取数据
二、实现方式
1、JS组织分页代码
/**
* 其中会传入三个参数,另外在代码中有一个方法beginPostTestResult(page),
* 该方法是需要自己写的方法,该方法的作用就是向后台发出请求,得回数据的方法;
* @param page 当前页
* @param maxPage 最大页
* @param liId 你要把这个页分的显示放在哪个li中,传入liId
*/
function initPageInfo(page,maxPage,liId){
$("#"+liId).html("");
var kongge = " ";
var firstPage = "首页";
var prePage = "上一页";
var endPage = "末页";
var nextPage = "下一页";
if(page < 1){
page = 1;
}
if(page > maxPage ){
page = maxPage ;
}
if(page == 1 && page < maxPage){
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}
else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}
else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
}
$(“#”+liId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
}
2、异步从后台获取数据
function beginPostTestResult(page){
$.post(url,{参数},function(data,state,response){
//TODO你的操作
//注意:参数page 都要是整形的,不能是字符型
initPageInfo(page,maxPage,liId);
},”json”);
}
标签:分页
您可能感兴趣
- js实现分页
- python yield 使用浅析(yii框架使用分页的方法分析)
- sql语句实现分页(SQL 窗口函数实现高效分页查询的案例分析)
- jquery ajax详细教程(jquery+Ajax实现简单分页条效果)
- thinkphp5 api开发(thinkphp5框架前后端分离项目实现分页功能的方法分析)
- laravel分页(laravel5.5添加echarts实现画图功能的方法)
- node.js express 上线(node+express实现分页效果)
- dedecms分页效果(织梦dedecms将列表页重复的第一页去除的方法)
- dedecms频道封面不能修改内容(DEDECMS内容页分页过多、过长问题最佳解决方案)
- redis新增数据分页(Scrapy-Redis结合POST请求获取数据的方法示例)
- 织梦列表页分页怎么用(织梦首页和列表页怎么调用自定义字段)
- dedecms文章顺序(dedecms 分页标题提取方法)
- dedecms主表内容(DEDECMS最为常用的分页标签及分页样式代码)
- dedecms分页修改(Dedecms图片加上Alt和Title等属性的修改方法)
- mysql limit越大越慢(MySQL limit分页大偏移量慢的原因及优化方案)
- dedecms分页修改(dedecms 自动审核会员发表的最新文章的修改方法)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
热门推荐
- mysql中group_concat
- 数据库的创建关键字(数据库 关键字一览表)
- 服务器启动nginx服务的命令(Nginx服务器添加Systemd自定义服务过程解析)
- cookie httponly属性
- dedecms漏洞防范(浅析DedeCMS投票模块漏洞的解决方法)
- python响应处理post请求(Python3模拟curl发送post请求操作示例)
- sqlserver2016的安装(Sql Server2016 正式版安装程序图解教程)
- 云虚拟主机和普通虚拟主机的区别(云主机为什么要比虚拟主机贵?)
- 目前主流的web服务器有哪些(什么是WEB服务器? 常用的WEB服务器有哪些?)
- 云服务器增加硬盘分区(云服务器硬盘要根据业务类型选择)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9