自己写的,感觉返回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得到分页栏的更多相关文章

  1. JS-网页中分页栏

    原理 三部分 我给分页栏分成了3部分 上一页:调用prePage()函数 下一页:调用nextPage()函数 带有数字标识的部,调用skipPage()函数 prePage函数 function p ...

  2. EasyUI的DataGrid 分页栏英文改中文解决方案

    (一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最 ...

  3. Mvc 分页栏扩展方法

    using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...

  4. JS表格分页组件:fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年)

    一.背景         之前在秒针工作的时候,某js高级project师写了非常多自己的组件.当中一套是分页组件.叫做st-grid. 只是在我看来,bug太多.我常常给他反馈bug,我也不清楚为啥 ...

  5. JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)

    一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...

  6. django-pagination 分页栏长度控制

    在分页页数很多时,分页样式会很长影响美观 我们可以用两个方式控制: 1.找到django-pagination里的pagination\pagination.html,在<ul class=&q ...

  7. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  8. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  9. iOS开发-分页栏和选取器的使用

    一.分页栏 创建一个新的项目,Subclass of的值选中UIViewController,然后在storyboard中删除根视图,在右下方拖出一个Tab Bar Controller 新增分页,只 ...

随机推荐

  1. 解决:sudo: parse error in /etc/sudoers near line 24 ...报错

    ubuntu系统下由于添加用户权限的时候直接用的vim对 /etc/sudoers 文件编辑,保存退出的时候,再使用sudo su 等等命令一直报错如下: sudo: parse error in / ...

  2. Telnet自动登录

    http://zw7534313.iteye.com/blog/1603808 http://network.51cto.com/art/201007/212255_all.htm (s=`stty ...

  3. QT完美转换特殊字符的大小写

    Util::ShowMessage(QString::fromUtf8("ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØŒŠþÙÚÛÜÝŸ€")); Util::ShowMess ...

  4. CCNA实验(2) -- Static Route

    1.静态路由R1:ip route 22.1.1.0 255.255.255.0 12.1.1.2 2.静态汇总路由R1:ip route 22.1.0.0 255.255.0.0 12.1.1.2 ...

  5. Ubuntu下安装Wine&WineQQ+Phpstorm+wps+svn+vim(计划任的使用)+flashplayer+curl扩展

    一.安装Wine 1.添加PPA sudo add-apt-repository ppa:ubuntu-wine/ppa 2.更新列表 sudo apt-get update 3.安装Wine sud ...

  6. system.io.file创建

    在实际开发中,如果用的文件名不能确定位置.或名字.可以使用GUID类来命名函数.Guid 结构标识全局唯一标示符.其NewGuid结构可以初始化一个新历.该方法语法格式如下: public stati ...

  7. 用JavaScript判断横屏竖屏问题

    判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...

  8. Android应用开发基础篇(10)-----Menu(菜单)

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/28/2372101.html 一.概述 Menu,简单来理解就是当你按下手机的“menu”键时所 ...

  9. JQuery中判断checkbox是否选中与禁用鼠标右键

    if ($("#wds_checkbox").attr("checked")) { flag = ; } else { flag = ; } 禁用鼠标右键 // ...

  10. 获取执行计划——EXPLAN PLAN

    一般获取执行计划有四种途径:1.执行explain plan,查询结果输出表.2.查询动态性能视图,它显示缓存在库缓存中的执行计划(有时查不出结果是因为执行计划已经不在库缓存中).3.查询AWR或St ...