js分页--存储数据并进行分页
- //分页方法
- 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分页--存储数据并进行分页的更多相关文章
- vue+mock.js+element-ui模拟数据搞定分页
效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...
- 腾讯云图片鉴黄集成到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 ...
- 抓取Js动态生成数据且以滚动页面方式分页的网页
代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...
- scroll pagination.js数据重复加载、分页问题
scroll pagination.js数据重复加载.分页问题 解决办法 参考资料: http://blog.csdn.net/dyw442500150/article/details/1753242 ...
- easyui-datagrid连接数据库实现分页查询数据
一.利用MVC思想建立底层数据库: package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import o ...
- 【原创】10万条数据采用存储过程分页实现(Mvc+Dapper+存储过程)
有时候大数据量进行查询操作的时候,查询速度很大强度上可以影响用户体验,因此自己简单写了一个demo,简单总结记录一下: 技术:Mvc4+Dapper+Dapper扩展+Sqlserver 目前主要实现 ...
- vuejs实现本地数据的筛选分页
今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进 ...
- redis分页获取数据
php代码: 采用哈希类型存储数据,有序集合存储分页数据,进行倒序与正序的排序. $getGoodsInfo = M('goods_test')->select(); for($i=0;$i&l ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
随机推荐
- 常见linux命令释义(第六天)——shell环境变量
太懒了,这几天好像得了懒癌,一点都不想写博客.后来想想,知识嘛,还是分享出来的好.第一治自己的懒癌:第二顺便巩固下自己的知识. Linux的变量分为两种,一种是系统变量,是系统一经启动,就写进内存中的 ...
- Centos7下搭建KVM虚拟机
PRE-INSTALL ============================================================= kvm相关安装包及其作用 qemu-kvm 主要的K ...
- JavaWeb---总结(十五)JSP基础语法
一.JSP模版元素 JSP页面中的HTML内容称之为JSP模版元素. JSP模版元素定义了网页的基本骨架,即定义了页面的结构和外观. 二.JSP表达式 JSP脚本表达式(expression)用于将 ...
- 如何在maven中添加jar包
Maven 中央仓库地址: 1. http://www.sonatype.org/nexus/ 2. http://mvnrepository.com/ (本人推荐仓库) 3. http://repo ...
- 【原】redux异步操作学习笔记
摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...
- C#MVC路由配置 之 动态请求伪装静态Json来欺骗CND
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.Ignore ...
- Java——UDP
import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAddress; //===== ...
- Python + OpenCV2 系列:1 - 配置
Python+OpenCV2+Eclipse+Windos 8.1(32bits): 最初的目的是做图像处理,opencv强大的社区支持,让我想从matlab转到opencv框架下进行试验,而Pyth ...
- C++ Scripting
http://www.quepublishing.com/articles/article.aspx?p=26069
- Pixel & EM
http://www.freetype.org/freetype2/docs/glyphs/glyphs-2.html http://www.thomasphinney.com/2011/03/poi ...