自己写的,感觉返回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. python使用mysql的三个模块:mysql.connector、sqlalchemy、MySQLdb

    在python中使用mysql其实很简单,只要先安装对应的模块即可,那么对应的模块都有什么?官方也没指定也没提供,pcat就推荐自己遇到的3个模块:mysql.connector.sqlalchemy ...

  2. Win7下使用protel99se、protel99

    很多网友需要用的protel99se,由于该软件开发的时间比较就早,在现在笔记本普及,尤其是win7普及的情况下,用该软件着实让许多人头痛,有人选择安装XP系统,但这就牺牲了win7良好的操作体验.也 ...

  3. oracle在一个字符串中查找某个字符出现过几次

    SELECT LENGTH(REGEXP_REPLACE(REPLACE('123,45,6,5', ',', '@'),  '[^@]+',  '')) COUNT FROM DUAL; 返回结果为 ...

  4. VS2010/MFC对话框:向导对话框的创建及显示

    向导对话框的创建及显示 本节将为大家演示如何创建向导对话框. 仍然以前面的“加法计算器”的例子为基础,在其中加入向导对话框,我们可以用它来说明加法计算器的使用方法,一步一步引导用户操作,这也是比较常见 ...

  5. openStack juno for ubuntu12-04

    <一,preinstall basic conf,pre Env> 1,pwgen(openssl rand -hex 10) some Open-Stack services add a ...

  6. Android eng版系统烧录

    这里我只能记录下过程 Android有四层,最底层的Linux是一个kernel,然后是运行时库层,驱动大部分在这两层完成,接着是Framework层,主要是Android源码,最后是在源码基础上进行 ...

  7. 【deep learning学习笔记】Recommending music on Spotify with deep learning

    主要内容: Spotify是个类似酷我音乐的音乐站点.做个性化音乐推荐和音乐消费.作者利用deep learning结合协同过滤来做音乐推荐. 详细内容: 1. 协同过滤 基本原理:某两个用户听的歌曲 ...

  8. 【JAVA】导出jar包时,Class files on classpath not found

    是因为\META-INF\MANIFEST.MF文件里面配置错误 错误版本 Manifest-Version: 1.0Class-Path: 正确版本 Manifest-Version: 1.0Cla ...

  9. [C#绘图]Matrix类

    想要从入门到精通一门语言,最好的学习文档就是官方提供的文档,比如说OpenCV的学习,最权威的学习资料还是其官方的学习文档,C#和.net的最好的学习入门文档还是MSDN.但是好多人一开始真的不会用, ...

  10. codeforcese 498C. Array and Operations 网络流

    题目链接 给n个数, m个数对, 每个数对是两个下标加起来为奇数的两个数.每次操作可以使一个数对中的两个数同时除某个数, 除的这个数是这两个数的任意约数, 问这种操作最多可以做几次.n<100, ...