//分页方法
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. 《JavaScript权威指南》学习笔记 第三天 找个对象

    现实生活中真的对象没有找到,在JavaScript 里左一个对象又一个对象,搞的我也是晕晕乎乎不知所云.人事复杂,人心难懂.我虽然是文科生,但是也不善于巧言.还是在js里面找找对象吧.那么我们今天就从 ...

  2. ECMAScript严格模式简介

    写在前面 大家都知道使用"use strict"表示使用ECMAScript进行严格模式,使用"use strict"有两种方式 在文件头部写上它(使得整个脚本 ...

  3. GitHub的三个按钮

    star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,可以收到通知 fork 的作用是参与,目的是你可以增加新的内容,然后 Pull Request,把你的修 ...

  4. 10 months then free? 10个月,然后自由

    Parole board to recommend Oscar Pistorius be released in August 假释委员会将建议奥斯卡·皮斯托瑞斯在8月份被释放 By Don Melv ...

  5. 访问cv::Mat中的数据时遇到的指针类型问题

    在用Opencv的时候由于下图原本的图像尺寸是1111*1111,要进行resize,代码如下: cv::Mat img = cv::imread("//Users//apple//td3/ ...

  6. Oracle - 数据库的实例、表空间、用户、表之间关系

    完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等): 2) Oracle数据库实例则是一组Ora ...

  7. Java——字符集:Charset

  8. C++ 纯虚函数接口,标准 C 导出 DLL 函数的用法

    CMakeLists.txt project(virtual) # 创建工程 virtual add_library(virtual SHARED virtual.cpp) # 创建动态连接库 lib ...

  9. Robot Framework--12 RFS+AutoItLibrary测试web对话框

    转自:http://blog.csdn.net/tulituqi/article/details/21871247 Selenium2library在我们实际测试web页面的时候基本上已经够用了,不过 ...

  10. Robot Framework--03 案例及资源区

    转自:http://blog.csdn.net/tulituqi/article/details/7585387 这个区域是我们案例结构设计的一个关键区域,这里可以清晰的看到我们整个工程的结构. 还记 ...