<ul id="page">
<li class="pagetest">1</li>
<li class="pagetest">2</li>
<li class="pagetest">3</li>
<li class="pagetest">4</li>
<li class="pagetest">5</li>
<li class="pagetest">6</li>
<li class="pagetest">7</li>
<li class="pagetest">8</li>
<li class="pagetest">9</li>
<li class="pagetest">10</li>
<li class="pagetest">11</li>
<li class="pagetest">12</li>
</ul>
<div id="pageDom"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="dibu">
<script>
var pageInfo={PageSize:null,TotalItemCount:null,PageNumber:null,PageCount:null,HasPreviousPage:null,HasNextPage:null,frontPageSize:5,backPageSize:4,pageListDomID:null,pageNumberDomID:null};
pageInfo.pageListDomID="page";
pageInfo.pageNumberDomID="pageDom";
pageInfo.PageSize=2; GetPageInfo(2); function GetPageInfo(pageNumber)
{
$("#"+pageInfo.pageListDomID).children().hide().slice((pageNumber-1)*pageInfo.PageSize,pageNumber*pageInfo.PageSize).show(); pageInfo.TotalItemCount=$("#"+pageInfo.pageListDomID).children().length;
pageInfo.PageNumber=pageNumber;
pageInfo.PageCount=Math.ceil(pageInfo.TotalItemCount/pageInfo.PageSize);
if(pageInfo.PageNumber>1)
{
pageInfo.HasPreviousPage=true;
}else
{
pageInfo.HasPreviousPage=false;
}
if(pageInfo.PageNumber<pageInfo.PageCount)
{
pageInfo.HasNextPage=true;
}else
{
pageInfo.HasNextPage=false;
} updatePage(pageInfo.pageNumberDomID);
} function updatePage(id)
{
$("#"+id).empty();
if (pageInfo.HasPreviousPage)
{
$("#"+id).append('<span class="hag"><a href="javascript:GetPageInfo(pageInfo.PageNumber - 1);">上一页</a></span>');
}
for (var i = pageInfo.PageNumber - pageInfo.frontPageSize; i <= pageInfo.PageNumber + pageInfo.backPageSize; i++)
{
if (i >= 1 && i <= pageInfo.PageCount)
{
if (pageInfo.PageNumber == i)
{
$("#"+id).append('<span class="hag"><a class="on">'+i+'</a></span>');
}
else
{
$("#"+id).append('<span class="hag"><a href="javascript:GetPageInfo('+i+');">'+i+'</a></span>');
}
}
}
if (pageInfo.HasNextPage)
{
$("#"+id).append('<span class="hag"><a href="javascript:GetPageInfo(pageInfo.PageNumber +1);">下一页</a></span>');
}
}
</script>
</div>
  

写个js 分页玩玩(原创)的更多相关文章

  1. 自写JS分页工具【基于JQ】

    好久没有来逛园子,也好久没有更新博客,就像沉睡已久的人忽然被叫醒,忽然就被园友的回复惊醒了.园友提出了关于我之前一篇文章的疑问--可那已经是半年以前的博客了,加上我一直觉得分享给大家的应该是我最新的思 ...

  2. 手写Koa.js源码

    用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...

  3. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  4. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  5. [转]jquery.pagination.js分页

    本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...

  6. 纯JS前端分页方法(JS分页)

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  7. js分页小结

     今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

  8. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  9. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

随机推荐

  1. Android中ImageView的属性

    资源使用 Android 中支持三种格式的位图文件:.png(首选), .jpg(可接受),.gif(不建议) 为什么首推 PNG 呢? 官网的描述如下: 注:在构建过程中,可通过 aapt 工具自动 ...

  2. SQL Server 置疑、可疑、正在恢复

    一.出错情况 有些时候当你重启了数据库服务,会发现有些数据库变成了正在恢复.置疑.可疑等情况,这个时候DBA就会很紧张了,下面是一些在实践中得到证明的方法. 在一次重启数据库服务后,数据库显示正在恢复 ...

  3. dubbo之回声测试

    回声测试 回声测试用于检测服务是否可用,回声测试按照正常请求流程执行,能够测试整个调用是否通畅,可用于监控. 所有服务自动实现 EchoService 接口,只需将任意服务引用强制转型为 EchoSe ...

  4. dubbo之集群容错

    在集群调用失败时,Dubbo 提供了多种容错方案,缺省为 failover 重试. 集群容错模式 1. Failover Cluster 失败自动切换,当出现失败,重试其它服务器 .通常用于读操作,但 ...

  5. Sobel算子取代:基于特定点方向的canny边缘检测

    前言: Canny边缘检测使用了Sobel算子,计算dx和dy两个方向,对于特定方向的边缘检测,可以作少量修改. 代码: 计算特定方向上的边缘 void CannyOrient( cv::Mat &a ...

  6. 图像连通域检测的2路算法Code

    本文算法描述参考链接:http://blog.csdn.net/icvpr/article/details/10259577 两遍扫描法: (1)第一次扫描: 访问当前像素B(x,y),如果B(x,y ...

  7. Node.js 常用Mongoose方法

    Node.js 手册查询-Mongoose 方法 一.Schema 一种以文件形式存储的数据库模型骨架,无法直接通往数据库端,也就是说它不具备对数据库的操作能力.可以说是数据属性模型(传统意义的表结构 ...

  8. 关于java中的继承

    我们都知道Java中的继承是复用代码.扩展子类的一种方式,继承使得Java中重复的代码能够被提取出来供子类共用,对于Java程序的性能以及修改和扩展有很大的意义,所以这是一个非常重要的知识点. 那么对 ...

  9. Object.assign和序列/反序列

    Object.assign let testObj = { a:[1,2,4], b:{ name:'ls', school:['huf','yelu'], parent:{ father:'lili ...

  10. tomcat映射java目录 sever.xml

    <Valve className="org.apache.catalina.authenticator.SingleSignOn" />        --> & ...