/*制作分页*参数分别为，目标位置id，数据总数，当前页，每页显示条数，回调函数(即，点击分页按钮触发的方法)*其中class为pagebar_1和pagebar_2的区别是能上一页和下一页能否点击，以及颜色变化
*/
function getPageBar(targetId,total,currPage,rows,func){var totalPage=Math.ceil(total/rows);//总页数var prePageBar='';var nextPageBar='';if(currPage==1){prePageBar='<div class="pagebar_2"><</div>';}else{prePageBar='<div class="pagebar_1" onclick="prePage('+func+','+currPage+','+rows+');"><</div>';}if(currPage==totalPage){nextPageBar='<div class="pagebar_2">></div>';}else{nextPageBar='<div class="pagebar_1" onclick="nextPage('+func+','+currPage+','+rows+');">></div>';}$("#"+targetId).html(prePageBar+nextPageBar);
}//上一页
function prePage(func,currPage,rows){func(currPage-1,rows);
}
//下一页
function nextPage(func,currPage,rows){func(currPage+1,rows);
}//在ajax返回数据成功之后，调用方法getPageBar，比如：
function zxscwj(page,rows){$.ajax({type : 'get',url : '',data:{page:page,rows:rows},success : function(data) {//其他操作省略var total=data.result.total;getPageBar("pageBar_zxwj",total,page,rows,'zxscwj');}});
}

图片如图：

Jquery分页之（上一页，下一页）
Jquery分页之(上一页,下一页) 在工作中我们会经常用到分页功能,除了数据库实现分页查询和调用分页插件,前端也可以实现分页查询,接下来就有我来带着大家实现一个简单的分页效果. 分页就是将将过多的结 ...
GridView自定义分页样式（上一页，下一页，到第几页）（新手教程）
今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1).演示地址http://www.veryam. ...
GridView分页（第一页、上一页、下一页、最后页、当前页数/总页数）
前台GridView页脚代码: Code <PagerTemplate> <table width="100%"> ...
html分页首页上一页下一页,HTML静态分页（形如：首页，上一页，下一页，尾页）...
在HTML中有时候我们会用到静态分页,一次拿回一定量的数据结果条目,我们会以形如:第2页,共12页首页上一页下一页尾页的方式进行静态分页,以下是该种静态分页的代码,供兄弟姐妹们参考. fu ...
laravel5.5中添加对分页样式的修改上一页和下一页
博客原文地址http://www.xiegaosheng.com/post/view?id=93; laravel自带的分页样式有点丑,laravel支持自定义样式的, 想把上一页和下一页显示成汉字而 ...
分页实现-----首页、上一页、下一页、最后一页
分页实现例: 首页.上一页.下一页.最后一页 Bean中的代码 public class doPage { //定义当前页 private int nowPage; //定义每页显示的条数 priv ...
php+mysql实现分页：上一页，下一页
mysql里将数据分页显示的语句是:limit 5,1.5表示检索开始位置,1表示显示1页所以在php中要实现上一页,下一页就要传一个数据page给limit,就可以分页. 可以理解为三个步骤: ...
GridView数据库分页+自定义分页导航（二）：自定义分页导航。首页、上一页、下一页、尾页和跳转
完成图: 先进入模板编辑模式,选择[PagerTemplate],添加自己所需的导航控件列入这样的,上一页和下一页和GO使用[LinkButton],也可使用其他的控件,[注:LinkButton ...
点击切换上一页，下一页
代码用react实现点击切换上一页,下一页 ClickChange.js import React from 'react'; import './ClickChange.css'; import c ...

js简单分页，只有上一页和下一页

js简单分页，只有上一页和下一页相关推荐

最新文章

热门文章