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 新增分页,只 ...
随机推荐
- glib源码安装使用方法
glib库是GTK+和GNOME工程的基础底层核心程序库,是一个综合用途的实用的轻量级的C程序库,它提供C语言的常用的数据结构的定义.相关的处理函数,有趣而实用的宏,可移植的封装和一些运行时机能,如事 ...
- QTabWiget Change Color 改变颜色(每个QWidget都有一个自己的调色板palette,设置它的颜色,然后setAutoFillBackground即可)
Qt中的QTabWiget 类提供了一个便签控件,但是这个控件默认初始化的颜色是白色,和原窗口的颜色不同,看起来非常的违和,所以我们希望将其的背景颜色设为当前窗口的背景颜色.我们所要做的就是先将应用程 ...
- 《windows程序设计》学习_2.2:初识消息,双键的使用
/* 双键的使用 */ #include <windows.h> LRESULT CALLBACK WndProc(HWND,UINT,WPARAM,LPARAM); int WINAPI ...
- ssh的学习
快毕业了.临走前帮导师搭建了gerrit,git服务器,其中涉及ssh的知识,就总结了下.希望对大家有帮助 一.前言(ssh出世的原因) 万物有因就有果,既然ssh存在,就必然有它存在的理由! 许多网 ...
- Objective-C中NSArray和NSMutableArray的基本用法
/*---------------------NSArray---------------------------*/ //创建数组 NSArray *array1 = [NSArray arrayW ...
- word排版论文小结
毕业论文如何用WORD排版 本人折腾了一晚上看别人的百度经验,做个总结,方便后人看懂,其实特别简单 用WORD自动生成页码 第一种情况:从第一页或者从第二页开始设置页码 这种情况只要“插入-> ...
- ajax联动
1.编写html代码,引入ajax文件 <script type="text/javascript" src="js/ajax.js"></s ...
- JavaSE_ Java基础 总目录(1~6)
JavaSE学习总结第01天_Java概述01.01 计算机概述01.02 计算机硬件和软件概述01.03 软件开发和计算机语言概述01.04 人机交互01.05 键盘功能键和快捷键01.06 如何打 ...
- Linux中ssh的免密码登陆
原理: Hadoop的各个节点要实时的进行各种通信的,ssh就是能让各个节点免密码的相互访问相互通信. 操作步骤: 这里用的加密方式是非对称的加密方式,具体的操作是: <1>执行命令ssh ...
- mysql 查询条件中文问题
这是mysql字符编码的问题,因为mysql默认的字符编码为latin1它并不识别中文,所以在读取查询语句时会出现乱码 从而使查询条件不正确所以我们只需要更改它的字符编码就可以一般都是用utf8 这里 ...