目前网上分页的例子比较多,但是对其原理不是很了解,平时用的时候只是拿来调用,今天花了点时间,采用面向对象方式写了一个demo。对其方法做了封装,对外只提供一个调用接口。

window.loadPage = function(obj,data){
  var p = new Pagation(obj,data);
p.showPageHtml();
}

 根据后台传送的数据,实现同步分页功能。具体代码如下:

/**
* 同步分页
*/
(function(window){
function Pagation(obj,data){
this.obj = obj;
this.dataArr = data;
this.currPage = 1;
this.pageSize = 10;//一页显示多少条数据
this.totalData = this.dataArr.length;
this.totalPage = Math.ceil(this.totalData/this.pageSize);
} /**
* 根据页码跳转
* @param {Object} pageNo
*/
Pagation.prototype.gotoPage = function(pageNo){
this.currPage = pageNo;
this.showPageData();
} /**
* 显示分页基本架构
*/
Pagation.prototype.showPageHtml = function(){
var start = (this.currPage - 1) * this.pageSize;
var end = this.currPage * this.pageSize;
var _this = this;
var html = "<div class='pageHeader'><a class='firstPage' href='javascript:void(0)'>首页</a>  <a class='prevPage' href='javascript:void(0)'>上一页</a>  <span class='pageNoList'></span><a class='nextPage' href='javascript:void(0)'>下一页</a>  <a class='lastPage' href='javascript:void(0)'>尾页</a></div>"; html+="<div class='pageContent'></div><div class='pageFoot'>共<span class='totalPage'></span>页,当前第<span class='currPage'></span>页,共<span class='totalData'></span>条数据</div>"; $(_this.obj).html(html); //首页
$(_this.obj).find(".firstPage").click(function(){
_this.gotoPage(1);
}); //尾页
$(_this.obj).find(".lastPage").click(function(){
_this.gotoPage(_this.totalPage);
}); //上一页
$(_this.obj).find(".prevPage").click(function(){
if(_this.currPage > 1) {
_this.gotoPage(_this.currPage - 1);
}
}); //下一页
$(_this.obj).find(".nextPage").click(function(){
if(_this.currPage < _this.totalPage) {
_this.gotoPage(_this.currPage + 1);
}
}); this.showPageData();
} /**
* 显示分页数据
*/
Pagation.prototype.showPageData = function(){
var start = (this.currPage - 1) * this.pageSize;
var end = this.currPage * this.pageSize;
var html = ""; for(var i = start; i < end; i++) {
var data = this.dataArr; if(data[i]) {
html+= '<p>'+data[i]+'</p>';
}
} this.pageNoList();
$(this.obj).find(".pageContent").html(html);
$(this.obj).find(".totalPage").html(this.totalPage);
$(this.obj).find(".currPage").html(this.currPage);
$(this.obj).find(".totalData").html(this.totalData);
} /**
* 显示页码
*/
Pagation.prototype.pageNoList = function(){
var _this = this;
var html = "";
var endCount = this.currPage + 2; if(endCount > this.totalPage) {
endCount = this.totalPage;
} var startCount = this.currPage - 2; if(startCount <= 0) {
startCount = 1;
} for(var i = startCount; i <= endCount;i++) {
if(this.currPage == i) {
html+='<span>'+i+'</span>  ';
} else {
html+="<a class='pageNo' href='javascript:void(0)'>"+i+"</a>  ";
}
} $(this.obj).find(".pageNoList").html(html); $(this.obj).find(".pageNoList").find(".pageNo").each(function(){
$(this).click(function(){
_this.gotoPage(parseInt($(this).html()));
});
});
} /**
* 将接口共享出去
* @param {Object} obj
* @param {Object} data
*/
window.loadPage = function(obj,data){
var p = new Pagation(obj,data);
p.showPageHtml();
} })(window); $(function(){
var demoData = []; for(var i = 1; i<= 200; i++) {
demoData.push(i);
} loadPage($("#pagation"),demoData);
});

  代码数据只是个demo,具体数据显示,可以根据自身的数据格式显示,可以是json格式。

javascript同步分页的更多相关文章

  1. 如何实现 javascript “同步”调用 app 代码

    在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...

  2. MvcPager使用的Demo(同步分页)

    最近接触了一下MvcPager,昂...来做个笔记吧 其实,我喜欢前后端分离,分页这种东西前端负责的地方,后端不用顾问,这里的MvcPager有点让我想起服务器控件,毕竟用到了HtmlHelper. ...

  3. JavaScript显示分页按钮

    /** * 获取分页按钮 * @param total_page 总页数 * @param current_page 当前页 * @param num 每页显示多少个分页按钮 * @returns { ...

  4. javascript 同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面 ...

  5. 不需要JAVAScript完成分页查询功能

    分页查询之前已经说过,现在用另一种方法实现,换汤不换药.但是更简单. view层代码: 控制层代码: 业务逻辑层,主要看一下方法count1()的代码: count1()方法的功能就是控制翻页,如果传 ...

  6. 纯原生javascript实现分页效果

    随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...

  7. [转载]Javascript 同步异步加载详解

    http://handyxuefeng.blog.163.com/blog/static/4545217220131125022640/ 本文总结一下浏览器在 javascript 的加载方式. 关键 ...

  8. PouchDB:JavaScript同步数据库

    简介 PouchDB是受 Apache CouchDB启发为Web设计的一款占用空间少的数据库.PouchDB项目的目标是帮助开发者构建线上和线下都能很好地使用的Web应用程序,在应用程序离线的时候, ...

  9. javascript同步和异步的区别与实现方式

    javascript语言是单线程机制.所谓单线程就是按次序执行,执行完一个任务再执行下一个. 对于浏览器来说,也就是无法在渲染页面的同时执行代码. 单线程机制的优点在于实现起来较为简单,运行环境相对简 ...

随机推荐

  1. 深入理解:Linear Regression及其正则方法

    这是最近看到的一个平时一直忽略但深入研究后发现这里面的门道还是很多,Linear Regression及其正则方法(主要是Lasso,Ridge, Elastic Net)这一套理论的建立花了很长一段 ...

  2. [知了堂学习笔记]_eclipse引入svn插件,并将项目同步到svn

    1. eclipse中不存在SVN问题的解决 1.1发现Team->Share project 下没有svn. 1.2下载安装svn插件. 选择help->Eclipse Marketpl ...

  3. 关于jwplayer 处理进度条禁止快进的处理方法。

    今天在处理一个关于jwplayer  第一次播放禁止快进,但是可以后退的一个需求.开始在网上去查一些方法,有几个方法是换皮肤,禁止点击,但是和我的初衷不是很一致,还有一种方式是官网查看了API接口的方 ...

  4. 2017-06-27(useradd usermod userdel 禁止普通用户登录)

    useradd useradd  -g  组名  用户名  (添加新用户,并将其添加到指定的主用户组) useradd  -g  组名  -G 附属组名  用户名  (添加新用户,并将其添加至指定主用 ...

  5. java1.8--Optional类

    身为一名Java程序员,大家可能都有这样的经历:调用一个方法得到了返回值却不能直接将返回值作为参数去调用别的方法.我们首先要判断这个返回值是否为null,只有在非空的前提下才能将其作为其他方法的参数. ...

  6. 关于oracle视图小结

    关于oracle的视图小记:一. 视图:就是对SQL语句的封装,使用起来更方便.不易出错 优点: 1.简化数据操作:视图可以简化用户处理数据的方式 2.着重于特定数据:不必要的数据或敏感的数据可以 不 ...

  7. JAVA中文件与Byte数组相互转换的方法

    JAVA中文件与Byte数组相互转换的方法,如下: public class FileUtil { //将文件转换成Byte数组 public static byte[] getBytesByFile ...

  8. 【SqlServer系列】浅谈SQL Server事务与锁(上篇)

    一  概述 在数据库方面,对于非DBA的程序员来说,事务与锁是一大难点,针对该难点,本篇文章视图采用图文的方式来与大家一起探讨. “浅谈SQL Server 事务与锁”这个专题共分两篇,上篇主讲事务及 ...

  9. google的grpc在golang中的使用

    GRPC是google开源的一个高性能.跨语言的RPC框架,基于HTTP2协议,基于protobuf 3.x,基于Netty 4.x. 前面写过一篇golang标准库的rpc包的用法,这篇文章接着讲一 ...

  10. nodejs爬虫笔记(四)---利用nightmare解决加载更多问题

    目标: 解决页面加载更多问题.笔记三中,我们只爬取到网页的部分信息,而点击加载更多后的页面内容是没有提取到的.开始我的想法是找到加载更多的数据接口(可参照:http://www.jianshu.com ...