自己写的,感觉返回html代码蠢蠢的,但是新手并不知道怎么写更好的,感觉这样子也蛮简单。记录下来,以后来越改越好。

  1. //获得分页栏。注意indexSize为奇数,这样也比较好看
  2. //totalNum:数据库总记录数,pageSize:每页显示的记录数,indexSize:要显示几个页码,比如下边显示 1 2 3 4 5 indexSize就=5, page:当前页码
  3. function getPageIndex(totalNum, pageSize, indexSize, page) {
  4. var pageIndex = "";
  5. //如果总记录数大于页码显示数量才进行计算
  6. if (totalNum > pageSize) {
  7. var totalPage = 0;
  8. if (totalNum % pageSize == 0) {
  9. totalPage = totalNum / pageSize;
  10. }
  11. else {
  12. totalPage = Math.floor(totalNum / pageSize) + 1;
  13. }
  14. //情况1 总页数<页码数
  15. if (totalPage < indexSize) {
  16. for (var i = 1; i <= totalPage; i++) {
  17. pageIndex += "<li";
  18. if (i == page) {
  19. pageIndex += " class='active'";
  20. }
  21. pageIndex += ">";
  22. pageIndex += "<a>" + i + "</a>";
  23. pageIndex += "</li>";
  24. }
  25. }
  26. //情况2 总页数>页码数 并且 当前页数位于最后后半段 如 25 26 27 28 29的28页
  27. else if (totalPage > indexSize && totalPage - page <= ((indexSize - 1) / 2)) {
  28. for (var i = totalPage - indexSize + 1; i <= totalPage; i++) {
  29. pageIndex += "<li";
  30. if (i == page) {
  31. pageIndex += " class='active'";
  32. }
  33. pageIndex += ">";
  34. pageIndex += "<a>" + i + "</a>";
  35. pageIndex += "</li>\n";
  36. }
  37. }
  38. //情况3 总页数>页码数 并且 当前页数位于最前前半段 如 1 2 3 4 5的2页
  39. else if (totalPage > indexSize && page <= ((indexSize + 1) / 2)) {
  40. for (var i = 1; i <= indexSize; i++) {
  41. pageIndex += "<li";
  42. if (i == page) {
  43. pageIndex += " class='active'";
  44. }
  45. pageIndex += ">";
  46. pageIndex += "<a>" + i + "</a>";
  47. pageIndex += "</li>\n";
  48. }
  49. }
  50. //正常情况
  51. else {
  52. for (var i = parseInt(page) - Math.floor(indexSize / 2); i <= parseInt(page) + Math.floor(indexSize / 2); i++) {
  53. pageIndex += "<li";
  54. if (i == page) {
  55. pageIndex += " class='active'";
  56. }
  57. pageIndex += ">";
  58. pageIndex += "<a>" + i + "</a>";
  59. pageIndex += "</li>\n";
  60. }
  61. }
  62. //上一页 下一页
  63. if (page == 1) {
  64. pageIndex = "<li class='disabled'><a>上一页</a></li>" + pageIndex + "<li><a>下一页</a></li>";
  65. } else if (page == totalPage) {
  66. pageIndex = "<li><a>上一页</a></li>" + pageIndex + "<li class='disabled'><a>下一页</a></li>";
  67. } else {
  68. pageIndex = "<li><a>上一页</a></li>" + pageIndex + "<li><a>下一页</a></li>";
  69. }
  70. }
  71. return pageIndex;
  72. }

  

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. bzoj 2141 : 排队 分块

    题目链接 2141: 排队 Time Limit: 4 Sec  Memory Limit: 259 MBSubmit: 1169  Solved: 465[Submit][Status][Discu ...

  2. java使用验证码进行登录验证

    随机生成4位验证码,将生成的4位数字字母数字放入session private static void outputVerifyCode(HttpServletRequest request, Htt ...

  3. iOS 使用xib创建cell的两种初始化方式

    曾几何时,被自己坑过,为了防止下次继续被自己坑,我决定了!在每个我能看到的地方,都把问题写一遍!!! 方法一: ? 1 2 3 4 第一步: [self.collectionView register ...

  4. 简单介绍一下ODI的几个基本概念

    简单介绍一下ODI的几个基本概念   ODI的几个基本概念是本文我们主要要介绍的内容,接下来我们就开始介绍这一过程,一起来看看吧! 什么是资料库 ODI资料库可安装在任何支持ANSIISO89的数据库 ...

  5. 什么是epoll

    什么是epoll epoll是什么?按照man手册的说法:是为处理大批量句柄而作了改进的poll.当然,这不是2.6内核才有的,它是在2.5.44内核中被引进的(epoll(4) is a new A ...

  6. Checking Network Configuration requirements Failed

    安装oracle执行检查,出现 Checking Network Configuration requirements ... Check complete. The overall result o ...

  7. Java面试题之七

    三十四.编码转换,怎样实现将GB2312 编码的字符串转换为ISO-8859-1 编码的字符串. String a=new String("中".getBytes("gb ...

  8. 超高性价比USB转CAN适配器,2500V工业级隔离,兼容ZLG软件

    淘宝链接: http://item.taobao.com/item.htm?spm=a230r.1.14.16.QGsAZg&id=20134109594&initiative_new ...

  9. 借助树的概率dp(期望)+数学-好题-hdu-4035-Maze

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4035 题目意思: 有n个房间,有n-1条通道连接这n个房间(每两个房间之间有且只有一条路,所以实际上 ...

  10. BSTR、char*和CString转换

    (1) char*转换成CString 若将char*转换成CString,除了直接赋值外,还可使用CString::Format进行.例如: char chArray[] = "This  ...