js得到分页栏
自己写的,感觉返回html代码蠢蠢的,但是新手并不知道怎么写更好的,感觉这样子也蛮简单。记录下来,以后来越改越好。
- //获得分页栏。注意indexSize为奇数,这样也比较好看
- //totalNum:数据库总记录数,pageSize:每页显示的记录数,indexSize:要显示几个页码,比如下边显示 1 2 3 4 5 indexSize就=5, page:当前页码
- function getPageIndex(totalNum, pageSize, indexSize, page) {
- var pageIndex = "";
- //如果总记录数大于页码显示数量才进行计算
- if (totalNum > pageSize) {
- var totalPage = 0;
- if (totalNum % pageSize == 0) {
- totalPage = totalNum / pageSize;
- }
- else {
- totalPage = Math.floor(totalNum / pageSize) + 1;
- }
- //情况1 总页数<页码数
- if (totalPage < indexSize) {
- for (var i = 1; i <= totalPage; i++) {
- pageIndex += "<li";
- if (i == page) {
- pageIndex += " class='active'";
- }
- pageIndex += ">";
- pageIndex += "<a>" + i + "</a>";
- pageIndex += "</li>";
- }
- }
- //情况2 总页数>页码数 并且 当前页数位于最后后半段 如 25 26 27 28 29的28页
- else if (totalPage > indexSize && totalPage - page <= ((indexSize - 1) / 2)) {
- for (var i = totalPage - indexSize + 1; i <= totalPage; i++) {
- pageIndex += "<li";
- if (i == page) {
- pageIndex += " class='active'";
- }
- pageIndex += ">";
- pageIndex += "<a>" + i + "</a>";
- pageIndex += "</li>\n";
- }
- }
- //情况3 总页数>页码数 并且 当前页数位于最前前半段 如 1 2 3 4 5的2页
- else if (totalPage > indexSize && page <= ((indexSize + 1) / 2)) {
- for (var i = 1; i <= indexSize; i++) {
- pageIndex += "<li";
- if (i == page) {
- pageIndex += " class='active'";
- }
- pageIndex += ">";
- pageIndex += "<a>" + i + "</a>";
- pageIndex += "</li>\n";
- }
- }
- //正常情况
- else {
- for (var i = parseInt(page) - Math.floor(indexSize / 2); i <= parseInt(page) + Math.floor(indexSize / 2); i++) {
- pageIndex += "<li";
- if (i == page) {
- pageIndex += " class='active'";
- }
- pageIndex += ">";
- pageIndex += "<a>" + i + "</a>";
- pageIndex += "</li>\n";
- }
- }
- //上一页 下一页
- if (page == 1) {
- pageIndex = "<li class='disabled'><a>上一页</a></li>" + pageIndex + "<li><a>下一页</a></li>";
- } else if (page == totalPage) {
- pageIndex = "<li><a>上一页</a></li>" + pageIndex + "<li class='disabled'><a>下一页</a></li>";
- } else {
- pageIndex = "<li><a>上一页</a></li>" + pageIndex + "<li><a>下一页</a></li>";
- }
- }
- return pageIndex;
- }
js得到分页栏的更多相关文章
- JS-网页中分页栏
原理 三部分 我给分页栏分成了3部分 上一页:调用prePage()函数 下一页:调用nextPage()函数 带有数字标识的部,调用skipPage()函数 prePage函数 function p ...
- EasyUI的DataGrid 分页栏英文改中文解决方案
(一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最 ...
- Mvc 分页栏扩展方法
using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...
- JS表格分页组件:fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年)
一.背景 之前在秒针工作的时候,某js高级project师写了非常多自己的组件.当中一套是分页组件.叫做st-grid. 只是在我看来,bug太多.我常常给他反馈bug,我也不清楚为啥 ...
- JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)
一.背景 之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...
- django-pagination 分页栏长度控制
在分页页数很多时,分页样式会很长影响美观 我们可以用两个方式控制: 1.找到django-pagination里的pagination\pagination.html,在<ul class=&q ...
- 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- iOS开发-分页栏和选取器的使用
一.分页栏 创建一个新的项目,Subclass of的值选中UIViewController,然后在storyboard中删除根视图,在右下方拖出一个Tab Bar Controller 新增分页,只 ...
随机推荐
- bzoj 2141 : 排队 分块
题目链接 2141: 排队 Time Limit: 4 Sec Memory Limit: 259 MBSubmit: 1169 Solved: 465[Submit][Status][Discu ...
- java使用验证码进行登录验证
随机生成4位验证码,将生成的4位数字字母数字放入session private static void outputVerifyCode(HttpServletRequest request, Htt ...
- iOS 使用xib创建cell的两种初始化方式
曾几何时,被自己坑过,为了防止下次继续被自己坑,我决定了!在每个我能看到的地方,都把问题写一遍!!! 方法一: ? 1 2 3 4 第一步: [self.collectionView register ...
- 简单介绍一下ODI的几个基本概念
简单介绍一下ODI的几个基本概念 ODI的几个基本概念是本文我们主要要介绍的内容,接下来我们就开始介绍这一过程,一起来看看吧! 什么是资料库 ODI资料库可安装在任何支持ANSIISO89的数据库 ...
- 什么是epoll
什么是epoll epoll是什么?按照man手册的说法:是为处理大批量句柄而作了改进的poll.当然,这不是2.6内核才有的,它是在2.5.44内核中被引进的(epoll(4) is a new A ...
- Checking Network Configuration requirements Failed
安装oracle执行检查,出现 Checking Network Configuration requirements ... Check complete. The overall result o ...
- Java面试题之七
三十四.编码转换,怎样实现将GB2312 编码的字符串转换为ISO-8859-1 编码的字符串. String a=new String("中".getBytes("gb ...
- 超高性价比USB转CAN适配器,2500V工业级隔离,兼容ZLG软件
淘宝链接: http://item.taobao.com/item.htm?spm=a230r.1.14.16.QGsAZg&id=20134109594&initiative_new ...
- 借助树的概率dp(期望)+数学-好题-hdu-4035-Maze
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4035 题目意思: 有n个房间,有n-1条通道连接这n个房间(每两个房间之间有且只有一条路,所以实际上 ...
- BSTR、char*和CString转换
(1) char*转换成CString 若将char*转换成CString,除了直接赋值外,还可使用CString::Format进行.例如: char chArray[] = "This ...