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”);
}
标签:分页
您可能感兴趣
- 后端ui框架排名(前后端结合实现amazeUI分页效果)
- easyui combogrid分页
- 织梦列表页分页怎么用(织梦首页和列表页怎么调用自定义字段)
- ASP.NET自定义分页类
- node.js express 上线(node+express实现分页效果)
- 织梦dedecms的时间调用标签(dedecms/织梦专题节点列表内容实现分页的方法介绍)
- tp5框架源码分析(tp5框架无刷新分页实现方法分析)
- thinkphp5 api开发(thinkphp5框架前后端分离项目实现分页功能的方法分析)
- 小程序实现左右滑动窗口(小程序实现分页效果)
- mysql表锁行锁和分页锁(MySQL 不停机不锁表主从搭建)
- 织梦栏目设置封面显示不正常(织梦列表页分页错位分页显示为竖排的解决方法)
- mssql 存储过程查询语句(MSSQL分页存储过程完整示例支持多表分页存储)
- sql语句实现分页(SQL 窗口函数实现高效分页查询的案例分析)
- dedecms列表分页代码(Dedecms文章设置推荐后列表页标题自动加粗的解决方法)
- thinkphp分页效果怎样(thinkphp5+layui实现的分页样式示例)
- dedecms文章顺序(dedecms 分页标题提取方法)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
热门推荐
- css中:first-child
- css3菜单特效(CSS3实现精美横向滚动菜单按钮)
- yii框架使用教程(Yii框架分页技术实例分析)
- 阿里云服务器扩容了怎么恢复(一条命令解决阿里云服务器系统盘空间不足问题)
- python真的能高效处理excel报表吗(Python数据报表之Excel操作模块用法分析)
- web服务器架设和管理(浅谈Web服务器的安装与配置)
- python变量指向讲解(详解python中init方法和随机数方法)
- sqlserver 使用SSMS运行sql脚本的六种方法(sqlserver 使用SSMS运行sql脚本的六种方法)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- python开启多线程(python 多线程重启方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9