自己写的,感觉返回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. 深入理解urllib、urllib2及requests

    urllib and urllib2 区别 –博主提示:下面的是python2中的用法,python3需要做出相应修改. urllib和urllib2模块都做与请求URL相关的操作,但他们提供不同的功 ...

  2. opengl 正方体+模拟视角旋转

    // first_3D.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <GL/glut.h> #includ ...

  3. MySQL 用户登录与操作执行

    一个用户可以不登录进Mysql 数据库,由两方面的因数决定 1.你是谁:也就是mysql 数据库中记录的用户名和密码,在SQL Server数据库,中只要求说明你是谁就可以登录了,可是mysql 不是 ...

  4. Android学习路径图

    一个PHPer转战Android学习过程: 直接跨过java的学习,原因有我之前看过毕向东和张孝祥的Java基础课程,虽然中间好几次看睡着,但java的环境是能跑起来的.我建议大家如果没有Java基础 ...

  5. 关于Struts2的碎碎念

    一:安全,还是安全 我入行比较晚,那会Spring MVC什么的都很流行了,一直觉得struts2作为一个Web MVC框架实在太笨重了点.所以虽然之前一直在用,但是其实没有真正研究过. 今天公司又遇 ...

  6. c/c++测试程序运行时间

    算法分析中需要对各种算法进行性能测试,下面介绍两种通用的测试方法,由于只用到标准c语言函数,所以在各种平台和编译器下都能使用. 方法1: clock()函数 开始计时:start = clock() ...

  7. 关于js封装框架类库之属性操作

    在对DOM对象操作时,往往都要涉及到其属性的操作,为了提高开发效率,同时兼顾浏览器的性能,在这简单的封装了几个常见的属性.因为是模块化,在这只是引入了部分代码,其他代码在前几篇模块封装中有写.如有不足 ...

  8. [SAP] 外部系统调用SAP web service用户验证的简单方法

    场景: 一个Java系统调用SAP系统提供的web service,除了根据WSDL生成的代理类,调用相应方法,传入相应参数外,还等需要使用SAP提供的用户信息进行身份验证,最简单的方法是在soap请 ...

  9. [NOIP1999提高] CODEVS 1047 邮票面值设计(dfs+dp)

    dfs出邮票的各种面值,然后dp求解. ------------------------------------------------------------------------------- ...

  10. codeforces 622C. Optimal Number Permutation 构造

    题目链接 假设始终可以找到一种状态使得值为0, 那么两个1之间需要隔n-2个数, 两个2之间需要隔n-3个数, 两个3之间隔n-4个数. 我们发现两个三可以放到两个1之间, 同理两个5放到两个3之间. ...