//分页方法
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. 怎样用命令行编译C#程序

    1. 把程序拷贝至记事本 2.另存为*cs格式 3.找到VS2015提供的命令提示 4.要把命令行指向程序所在的目录(可以有个小软件) 如果在其他的盘符,先敲D:,然后再cd 5.输入csc hell ...

  2. C#------EntityFramework实体加载数据库SQLServer(MySQL)

    一.SQLServer数据库创建表Company,包含ID,CName,IsEnabled三列 二.(1)VS新建一个DXApplication工程,名为CompanyManageSystem (2) ...

  3. eshop截取字符串长度 和去掉省略号

    <!-- {if $goods.goods_brief} --> {$goods.goods_brief|truncate:17}<!-- {/if} --> 去掉省略号: 找 ...

  4. ServletContext

    1.为什么需要servletContext    需求1 需求2 --------------->解决之道servletContext     servletContext 1.ServletC ...

  5. iOS-设置UIPageControl 显示图片

    UIPageControl 的默认样式是几个小圆点,系统没有提供属性供我们自定义这几个小圆点的样式,不过我们依然可以使用KVC来自定义PageControl的显示样式 UIPageControl *p ...

  6. sql server 得到数据库字典

    SELECT      表名=case   when   a.colorder=1   then   d.name   else   ''   end,    表说明=case   when   a. ...

  7. html中的 button,input-button, image, input-image的区别

    hmtl中 为了验证 form的 action提交属性, 是指 表单提交到的 页面, 可以是任意 性质的页面, 如:html页面, php页面, asp页面等都可以, 实际在测试的时候, 可以就写 提 ...

  8. oracle vm virtualbox右ctrl切换显示模式

    转自: http://blog.csdn.net/lyc_daniel/article/details/44195515 virtualbox里面有个HOME键,注意这个HOME键不一定是键盘上的HO ...

  9. Kmeans算法的K值和聚类中心的确定

    0 K-means算法简介 K-means是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一. K-means算法的基本思想是:以空间中k个点为中心进行聚类,对最靠近他们的对象归类.通过迭代的 ...

  10. Ubuntu之Mysql安装及基本设置

    No1. Mysql 安装 sudo apt-get install mysql-server mysql-client 记得root密码别忘了. No2. 验证Mysql安装 sudo servic ...