自己写的,感觉返回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. PHP上传图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. ObjectiveC 文件操作一

    1,引用和使用文件 NSFileManager 是一个单例对象,在mac应用中可以获取任何地址,在IOS中获取的是相对应的应用程序的地址.可以使用 defaultManager 来得到当前应用程序地址 ...

  3. LINUX诞生

    编辑 Linux[1]  是一类Unix计算机操作系统的统称.Linux操作系统也是自由软件和开放源代码发展中最著名的例子.在1991 年的十月,由一个名为 Linus Torvalds的年轻芬兰大学 ...

  4. DNS解析

    大家好,今天51开源给大家介绍一个在配置文件,那就是/etc/resolv.conf.很多网友对此文件的用处不太了解.其实并不复杂,它是DNS客户机配置文件,用于设置DNS服务器的IP地址及DNS域名 ...

  5. CCNA实验(5) -- OSPF

    enableconf tno ip do loenable pass ciscoline con 0logg syncexec-t 0 0line vty 0 4pass ciscologg sync ...

  6. 第八届河南省赛C.最少换乘(最短路建图)

    C.最少换乘 Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 94  Solved: 25 [Submit][Status][Web Board] De ...

  7. iOS设计模式——MVC(Model-View-Controller)

    Modol View Controller(MVC)是一种最早的也是最成功的可重用的设计模式,70年代的时候首次在smaltalk编写的程序中成功使用.基于MVC设计 模式,Cocoa整体架构可以划分 ...

  8. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  9. cocos2dx中Action汇总

    本文由qinning199原创, 转载请注明:http://www.cocos2dx.net/?p=119 今天总结一下cocos2dx中的一些Action动作,其中To表示到达某个点,而By表示偏移 ...

  10. Laravel 单元测试

    前言 今天是第十三周周一,虽然接下来的时间会比较忙,比如各科的课设.考试.磨锤子.但是还是有种涅槃重生的感觉,昨晚的睡眠确实不怎么样,但是今天十分精神,已经想不起来多久没有这么早起了~让我累并快乐着吧 ...