1. //分页方法
  2. var page = function(){
  3. this.v = {
  4. o:null,//ul父级层
  5. home:null,
  6. previous:null,
  7. next:null,
  8. last:null,
  9. list:[],
  10. pageSize:10,
  11. pageIndex:0,
  12. pageCount:0,
  13. rowCount:0
  14. };
  15. this.init = function(){
  16. var _this = this;
  17. _this.v.o.find("li").each(function(i,o){
  18. _this.v.list.push($(o).html());
  19. });
  20.  
  21. _this.v.rowCount = _this.v.list.length;
  22. _this.v.pageCount = parseInt((_this.v.rowCount + _this.v.pageSize - 1)/_this.v.pageSize);
  23. _this.process(0);
  24.  
  25. _this.addcolor([_this.v.home,_this.v.previous]);
  26.  
  27. //首页
  28. _this.v.home.click(function(){
  29. _this.v.pageIndex = 0;
  30. _this.process(_this.v.pageIndex);
  31. _this.addcolor([_this.v.home,_this.v.previous]);
  32. _this.removecolor([_this.v.next,_this.v.last]);
  33.  
  34. });
  35. //上一页
  36. _this.v.previous.click(function(){
  37. if(_this.v.pageIndex > 0){
  38. _this.process(--_this.v.pageIndex);
  39.  
  40. if(_this.v.pageIndex == 0)
  41. _this.addcolor([_this.v.home,_this.v.previous]);
  42.  
  43. _this.removecolor([_this.v.next,_this.v.last]);
  44. }
  45. });
  46. //下一页
  47. _this.v.next.click(function(){
  48. if(_this.v.pageIndex < _this.v.pageCount-1){
  49. _this.process(++_this.v.pageIndex);
  50.  
  51. if(_this.v.pageIndex == _this.v.pageCount-1)
  52. _this.addcolor([_this.v.next,_this.v.last]);
  53.  
  54. _this.removecolor([_this.v.home,_this.v.previous]);
  55. }
  56. });
  57. //尾页
  58. _this.v.last.click(function(){
  59. _this.v.pageIndex = _this.v.pageCount-1;
  60. _this.process(_this.v.pageIndex);
  61.  
  62. _this.addcolor([_this.v.next,_this.v.last]);
  63. _this.removecolor([_this.v.home,_this.v.previous]);
  64. });
  65. };
  66. this.process = function(n){
  67. var _this = this;
  68. _this.v.o.find("ul").empty();
  69. for(var i=(n*_this.v.pageSize);i<_this.v.rowCount;i++){
  70. if(i > 0 && i % (_this.v.pageSize*(n+1)) == 0){
  71. break;
  72. }
  73. _this.v.o.find("ul").append("<li>"+_this.v.list[i]+"</li>");
  74. }
  75. }
  76. this.addcolor = function(ac){
  77. for(var j=0;j<ac.length;j++)
  78. ac[j].addClass("page_disabled");
  79. }
  80. this.removecolor = function(rc){
  81. for(var j=0;j<rc.length;j++)
  82. rc[j].removeClass("page_disabled");
  83. }
  84. };
  85.  
  86. (function(){
  87. //初始化按钮
  88. var p1 = new page();
  89. p1.v.o = $("#marquees1");
  90. p1.v.home = $("#zb1");
  91. p1.v.previous = $("#zb2");
  92. p1.v.next = $("#zb3");
  93. p1.v.last = $("#zb4");
  94. p1.init();
  95. }
  96. )

js分页--存储数据并进行分页的更多相关文章

  1. vue+mock.js+element-ui模拟数据搞定分页

    效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...

  2. 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后? js获取某个日期

    腾讯云图片鉴黄集成到C#   官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...

  3. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  4. scroll pagination.js数据重复加载、分页问题

    scroll pagination.js数据重复加载.分页问题 解决办法 参考资料: http://blog.csdn.net/dyw442500150/article/details/1753242 ...

  5. easyui-datagrid连接数据库实现分页查询数据

    一.利用MVC思想建立底层数据库: package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import o ...

  6. 【原创】10万条数据采用存储过程分页实现(Mvc+Dapper+存储过程)

    有时候大数据量进行查询操作的时候,查询速度很大强度上可以影响用户体验,因此自己简单写了一个demo,简单总结记录一下: 技术:Mvc4+Dapper+Dapper扩展+Sqlserver 目前主要实现 ...

  7. vuejs实现本地数据的筛选分页

    今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进 ...

  8. redis分页获取数据

    php代码: 采用哈希类型存储数据,有序集合存储分页数据,进行倒序与正序的排序. $getGoodsInfo = M('goods_test')->select(); for($i=0;$i&l ...

  9. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

随机推荐

  1. 常见linux命令释义(第六天)——shell环境变量

    太懒了,这几天好像得了懒癌,一点都不想写博客.后来想想,知识嘛,还是分享出来的好.第一治自己的懒癌:第二顺便巩固下自己的知识. Linux的变量分为两种,一种是系统变量,是系统一经启动,就写进内存中的 ...

  2. Centos7下搭建KVM虚拟机

    PRE-INSTALL ============================================================= kvm相关安装包及其作用 qemu-kvm 主要的K ...

  3. JavaWeb---总结(十五)JSP基础语法

    一.JSP模版元素 JSP页面中的HTML内容称之为JSP模版元素.  JSP模版元素定义了网页的基本骨架,即定义了页面的结构和外观. 二.JSP表达式 JSP脚本表达式(expression)用于将 ...

  4. 如何在maven中添加jar包

    Maven 中央仓库地址: 1. http://www.sonatype.org/nexus/ 2. http://mvnrepository.com/ (本人推荐仓库) 3. http://repo ...

  5. 【原】redux异步操作学习笔记

    摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...

  6. C#MVC路由配置 之 动态请求伪装静态Json来欺骗CND

    public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.Ignore ...

  7. Java——UDP

    import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAddress; //===== ...

  8. Python + OpenCV2 系列:1 - 配置

    Python+OpenCV2+Eclipse+Windos 8.1(32bits): 最初的目的是做图像处理,opencv强大的社区支持,让我想从matlab转到opencv框架下进行试验,而Pyth ...

  9. C++ Scripting

    http://www.quepublishing.com/articles/article.aspx?p=26069

  10. Pixel & EM

    http://www.freetype.org/freetype2/docs/glyphs/glyphs-2.html http://www.thomasphinney.com/2011/03/poi ...