//分页方法
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. Jacobian矩阵和Hessian矩阵

    1.Jacobian矩阵 在矩阵论中,Jacobian矩阵是一阶偏导矩阵,其行列式称为Jacobian行列式.假设 函数 $f:R^n \to R^m$, 输入是向量 $x \in R^n$ ,输出为 ...

  2. BZOJ树链剖分题目汇总

    1036,2157,2243,4034,4196;2325,2908,3083,3159,3531,3626,3999;可以不树剖:1146;2819,2843,4448,4530.

  3. [转发]dsdt解决睡眠唤醒死机

    登录 注册 首页 热门话题 最新发布   简单模式 详细模式 dsdt解决睡眠唤醒死机 Leave a reply 首先,感谢x5115x提供了一个相对比较完整的THINKPAD T410在MAC下的 ...

  4. Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互

    框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java   model文件夹下的 Global ...

  5. 视频直播APP开发分析

    视频直播APP开发到目前为止都还是热门的一个行业,而且发展到现在直播的种类非常多,很多行业都打入了直播行业,再也不是单纯的人物直播这么单一了.视频直播APP开发行业就像是吃螃蟹,来的早的人不懂如何吃, ...

  6. 10月21上午PHP基础

    新建的php文件必须要放在wamp安装目录下的www文件夹里.如果拿到别的地方,php无法运行,将显示错误. <?php?> //嵌入php的方式 <?php //嵌入php方式的开 ...

  7. FBX Software Development Kit

    FBX Software Development Kit The FBX Software Development Kit (FBX SDK) allows software developers t ...

  8. Tomcat服务器原理详解

    [目录]本文主要讲解Tomcat启动和部署webapp时的原理和过程,以及其使用的配置文件的详解.主要有三大部分: 第一部分.Tomcat的简介和启动过程 第二部分.Tomcat部署webapp 第三 ...

  9. 在Razor中如何引入命名空间?("import namespace in razor view") 【转】

    原文链接 找了半天,原来如此: 在aspx中: <%@ Import Namespace = "Martian.Areas.SFC.Models" %><%@ I ...

  10. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...