//分页方法
var page = function(){
this.v = {
o:null,//ul父级层
home:null,
previous:null,
next:null,
last:null,
list:[],
pageSize:10,
pageIndex:0,
pageCount:0,
rowCount:0
};
this.init = function(){
var _this = this;
_this.v.o.find("li").each(function(i,o){
_this.v.list.push($(o).html());
}); _this.v.rowCount = _this.v.list.length;
_this.v.pageCount = parseInt((_this.v.rowCount + _this.v.pageSize - 1)/_this.v.pageSize);
_this.process(0); _this.addcolor([_this.v.home,_this.v.previous]); //首页
_this.v.home.click(function(){
_this.v.pageIndex = 0;
_this.process(_this.v.pageIndex);
_this.addcolor([_this.v.home,_this.v.previous]);
_this.removecolor([_this.v.next,_this.v.last]); });
//上一页
_this.v.previous.click(function(){
if(_this.v.pageIndex > 0){
_this.process(--_this.v.pageIndex); if(_this.v.pageIndex == 0)
_this.addcolor([_this.v.home,_this.v.previous]); _this.removecolor([_this.v.next,_this.v.last]);
}
});
//下一页
_this.v.next.click(function(){
if(_this.v.pageIndex < _this.v.pageCount-1){
_this.process(++_this.v.pageIndex); if(_this.v.pageIndex == _this.v.pageCount-1)
_this.addcolor([_this.v.next,_this.v.last]); _this.removecolor([_this.v.home,_this.v.previous]);
}
});
//尾页
_this.v.last.click(function(){
_this.v.pageIndex = _this.v.pageCount-1;
_this.process(_this.v.pageIndex); _this.addcolor([_this.v.next,_this.v.last]);
_this.removecolor([_this.v.home,_this.v.previous]);
});
};
this.process = function(n){
var _this = this;
_this.v.o.find("ul").empty();
for(var i=(n*_this.v.pageSize);i<_this.v.rowCount;i++){
if(i > 0 && i % (_this.v.pageSize*(n+1)) == 0){
break;
}
_this.v.o.find("ul").append("<li>"+_this.v.list[i]+"</li>");
}
}
this.addcolor = function(ac){
for(var j=0;j<ac.length;j++)
ac[j].addClass("page_disabled");
}
this.removecolor = function(rc){
for(var j=0;j<rc.length;j++)
rc[j].removeClass("page_disabled");
}
}; (function(){
//初始化按钮
var p1 = new page();
p1.v.o = $("#marquees1");
p1.v.home = $("#zb1");
p1.v.previous = $("#zb2");
p1.v.next = $("#zb3");
p1.v.last = $("#zb4");
p1.init();
}
)

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. wireshark过滤语法总结-重点偏移过滤

    http://chenjiji.com/post/3371.html 作者: CHAN | 发布: 2013 年 10 月 24 日 做应用识别这一块经常要对应用产生的数据流量进行分析. 抓包采用wi ...

  2. Xcode中插件在Xcode更新之后解决方法

    >新的解决方法地址:这里 但凡是更新了Xcode的版本,之前安装的Xcode的插件都不会使用,例如:XAlign或者猫神的VVDocument-Xcode插件 解决方法有很多而且很多地方都贴出来 ...

  3. JAVA jdbc获取数据库连接

    JDBC获取数据库连接的帮助类 import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManage ...

  4. 《Java疯狂讲义》(第3版)学习笔记 1 - 如何学习Java

    1.Java是一种面向对象语言,不要简单当做脚本使用.从基础学起,不要从Spring.J2EE.Hibernate和EJB开始学. 2.不要浮躁,应该扎扎实实先学好Java语言,然后按Java本身的学 ...

  5. Centos7安装Oracle12c

    环境: CentOS7@VMware12,分配资源:CPU:2颗,内存:4GB,硬盘空间:30GB Oracle12C企业版64位 过程纪要: root身份安装依赖包: compat-libstdc+ ...

  6. linux 相关快捷键

    linux 相关快捷键 http://linux.chinaunix.net/begin/2004-10-05/34.shtml#_Toc41417098 1.使用虚拟控制台登录后按“Alt+F2”键 ...

  7. JavaWeb学习笔记——jsp基础语法

    1.JSP注释 显式注释 <!-- 注释内容 --> 隐式注释,隐式注释在客户端无法看见 // /* */ <% 注释内容 %> 2.Scriptlet(小脚本程序) 所有嵌入 ...

  8. Wget命令下载、备份博客

    -np http://www.cnblogs.com/memory4young/p/ 参考资料: http://www.cnblogs.com/memory4young/p/wget-backup-b ...

  9. 硬盘安装win10

    http://hd.ruanmei.com/

  10. Ubuntu用作Server时出现乱码的解决方法

    下面给出解决办法: 1.用vi编辑器修改/etc/default/local文件 2.把原来的中文编码替换成下面的 LANG="en_US.UTF-8" LANGUAGE=&quo ...