jquery 页面分页的实现
<!DOCTYPE html>
<html>
<head>
<title>分页</title>
<link rel="stylesheet" type="text/css" href="./css/page.css"></style>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<div class="">
<div class="container" id="container" style="min-width:400px;min-height: 600px;">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// 创建一个分页的实例对象，利用对象中的方法进行分页
var pageone = new PageInit('qA','../test3.json');
var pageInit = pageone.createPage(); $('#container').html(pageInit);
pageone.init('../test3.json');
pageone.operator();
})
</script>
</body>
</html>
index.js文件内容
// 本例仅仅实现了页面跳转向后台传递数据，后台根据具体参数返回数据我们显示在页面上
function PageInit(className,url){
var publicVar={} ;
var tempClassName = className;
var tempUrl = url;
var totalItem;
publicVar.init = function(tempUrl){
var parInit = {
'page':1,
'pagesize':10
}
this.reloadReplies(parInit);
}
publicVar.createPage = function(){
var html = `
<div class=${tempClassName}>
<div class="data-area"></div>
<div class="center">
<table class="pageinitial" >
<tr>
<td>
<select name="pageItemNum" class ="rows" >
<option value="10">10</option>
<option value="15">15</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</td>
<td class="division"> | </td>
<td>
<a href="javascript:void(0)" class="page-first">
</a>
</td>
<td>
<a href="javascript:void(0)" class="page-prev">
</a>
</td>
<td class="division"> | </td>
<td>
page <input class="page" value="1" style="width:30px;display:inline-block;text-align:center" readonly/>
</td>
<td>
of <span class="page-total"></span>
</td>
<td class="division"> | </td>
<td>
<a class="page-next" href="javascript:void(0)">
</a>
</td>
<td>
<a href="javascript:void(0)" class="page-last">
</a>
</td>
</tr>
</table>
</div>
</div>`
return html;
};
// 绑定标签的点击函数
publicVar.operator = function(tempUrl){
var _self = this;
$('.'+tempClassName+' .page-first').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
if(pageParams.page==maxPage){
$('.'+tempClassName+' .page-next').removeClass('page-disable');
$('.'+tempClassName+' .page-last').removeClass('page-disable');
_self.aAbled('.'+tempClassName+' .page-next');
_self.aAbled('.'+tempClassName+' .page-last'); }
if(pageParams.page>1) {
pageParams.page = 1;
$('.'+tempClassName+' .page').val(pageParams.page);
$('.'+tempClassName+' .page-total').html(maxPage);
$('.'+tempClassName+' .page-prev').addClass('page-disable');
$('.'+tempClassName+' .page-first').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-prev');
_self.aDisabled('.'+tempClassName+' .page-first');
_self.pagefresh(pageParams,tempUrl);
}
});
$('.'+tempClassName+' .page-prev').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
if(pageParams.page==maxPage){
$('.'+tempClassName+' .page-next').removeClass('page-disable');
$('.'+tempClassName+' .page-last').removeClass('page-disable');
_self.aAbled('.'+tempClassName+' .page-next');
_self.aAbled('.'+tempClassName+' .page-last');
}
if(pageParams.page>1){
pageParams.page = pageParams.page-1;
if(pageParams.page==1){
$('.'+tempClassName+' .page-prev').addClass('page-disable');
$('.'+tempClassName+' .page-first').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-prev');
_self.aDisabled('.'+tempClassName+' .page-first');
}
$('.'+tempClassName+' .page').val(pageParams.page);
$('.'+tempClassName+' .page-total').html(maxPage);
_self.pagefresh(pageParams,tempUrl);
}
});
$('.'+tempClassName+' .page-next').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
if(pageParams.page==1){
$('.'+tempClassName+' .page-prev').removeClass('page-disable');
$('.'+tempClassName+' .page-first').removeClass('page-disable');
_self.aAbled('.'+tempClassName+' .page-prev');
_self.aAbled('.'+tempClassName+' .page-first');
}
if(pageParams.page<maxPage){
pageParams.page = pageParams.page-1+2;
if(pageParams.page==maxPage){
$('.'+tempClassName+' .page-next').addClass('page-disable');
$('.'+tempClassName+' .page-last').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-next');
_self.aDisabled('.'+tempClassName+' .page-last');
}
$('.'+tempClassName+' .page').val(pageParams.page);
$('.'+tempClassName+' .page-total').html(maxPage);
_self.pagefresh(pageParams,tempUrl);
}
});
$('.'+tempClassName+' .page-last').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
if(pageParams.page==1){
$('.'+tempClassName+' .page-prev').removeClass('page-disable');
$('.'+tempClassName+' .page-first').removeClass('page-disable');
_self.aAbled('.'+tempClassName+' .page-prev');
_self.aAbled('.'+tempClassName+' .page-first');
}
if(pageParams.page<maxPage){
maxPage = Math.ceil(totalItem/pageParams.pagesize);
pageParams.page = maxPage;
$('.'+tempClassName+' .page').val(maxPage);
$('.'+tempClassName+' .page-total').html(maxPage);
$('.'+tempClassName+' .page-next').addClass('page-disable');
$('.'+tempClassName+' .page-last').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-next');
_self.aDisabled('.'+tempClassName+' .page-last');
_self.pagefresh(pageParams,tempUrl);
}
});
$('.'+tempClassName+' .rows').change(function(e){
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
$('.'+tempClassName+' .page-total').html(maxPage);
$('.'+tempClassName+' .page').val('1');
pageParams.page = $('.'+tempClassName+' .page').val();
$('.'+tempClassName+' .page-prev').addClass('page-disable');
$('.'+tempClassName+' .page-first').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-prev');
_self.aDisabled('.'+tempClassName+' .page-first');
if(maxPage==1){
$('.'+tempClassName+' .page-next').addClass('page-disable');
$('.'+tempClassName+' .page-last').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-next');
_self.aDisabled('.'+tempClassName+' .page-last');
}else{
$('.'+tempClassName+' .page-next').removeClass('page-disable');
$('.'+tempClassName+' .page-last').removeClass('page-disable');
_self.aAbled('.'+tempClassName+' .page-next');
_self.aAbled('.'+tempClassName+' .page-last');
}
_self.pagefresh(pageParams,tempUrl);
});
};
// 设置标签是否可以进行点击
publicVar.aDisabled = function(tempClassName) {
$(tempClassName).attr('disabled', true);
$(tempClassName).css('pointer-events', 'none');
};
publicVar.aAbled = function(tempClassName) {
$(tempClassName).attr('disabled', false);
$(tempClassName).css('pointer-events', 'auto');
};
// 获取当前页面信息页码页数和itemID
publicVar.curPage = function (tempClassName){
var rtn ={};
rtn.pagesize = $('.'+tempClassName+' .rows').val();
rtn.page = $('.'+tempClassName+' .page').val();
return rtn;
};
// 得到参数后刷新，可以根据不同的tempClassName来局部刷新不同的列表
publicVar.pagefresh = function (params,tempUrl){
this.reloadReplies(params,tempUrl);
};
publicVar.reloadReplies = function(pars){
_self = this;
var htmlItem ='';
var lenItem = '';
$.ajax({
url:tempUrl,
params:pars,
async: false,
success:function(data){
totalItem = data.total;
if(totalItem==0){
maxPageItem = 1;
}else{
maxPageItem = Math.ceil(totalItem/pars.pagesize);
}
if(pars.page==1){
$('.'+tempClassName+' .page-prev').addClass('page-disable');
$('.'+tempClassName+' .page-first').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-prev');
_self.aDisabled('.'+tempClassName+' .page-first');
}
if(pars.page==maxPageItem){
$('.'+tempClassName+' .page-next').addClass('page-disable');
$('.'+tempClassName+' .page-last').addClass('page-disable');
_self.aDisabled('.'+tempClassName+' .page-next');
_self.aDisabled('.'+tempClassName+' .page-last');
}else{
$('.'+tempClassName+' .page-next').removeClass('page-disable');
$('.'+tempClassName+' .page-last').removeClass('page-disable');
_self.aAbled('.'+tempClassName+' .page-next');
_self.aAbled('.'+tempClassName+' .page-last');
}
$('.'+tempClassName+' .page-total').html(maxPageItem);
$('.'+tempClassName+' .page').val(pars.page);
lenItem = data.List.length;
if(lenItem>0){
// data.rows.postReplys = convertTime(data.rows.postReplys);
htmlItem = _self.fn(data.List); }
$('.'+tempClassName+' .data-area').html(htmlItem);
}
});
};
// publicVar.createListItem = function(){ // }
publicVar.fn = function(item){
var html='';
for(var i=0;i<item.length;i++){
html+= '\
<div class="reply-item">\
<div class="user-portrait">\
<div class="portrait"><img src='+item[i].headIcon+'></div>\
</div>\
<div class="reply-detail">\
<div class="reply-user">'+item[i].Name+'</div>\
<div class="reply-content">'+item[i].reply_content+'</div>\
<div class="reply-last">\
<div class="reply-time">'+item[i].reply_time+'</div>\
<div class="reply-delete"><div style="color: #0011ff;width:50px;cursor:pointer" onclick="openDeleteReplyDialog()">delete</div></div>\
</div>\
</div>\
</div>\
'
}
return html;
}
return publicVar;
}
jquery 页面分页的实现的更多相关文章
- 转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- SpringMVC -jquery实现分页
效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- jquery动态分页
最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...
- jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
随机推荐
- TCP路由网络通信
路由器 实现跨网段通信 路由器的工作原理是基于路由器中的路由表来实现数据包的路径选择 当路由器收到一个数据包的时候,会读取数据包的目标IP地址,根据目标IP地址来匹配路由表中的规则 单个路由器不会 ...
- 005-优化web请求一-gzip压缩、http缓存控制和缓存校验[Pragma、Expires、Cache-Control、max-age、Last-Modified、用户刷新访问、避免过度304]
优化Web应用的典型技术:缓存控制头信息.Gzip.应用缓存.ETag.反应型技术[异步方法调用和WebSocket] 一.模板缓存 spring.thymeleaf.cache=true sprin ...
- jenkins 邮箱配置---腾讯企业邮箱
一,简单设置 1.登陆jenkins--> 系统管理 ---> 系统设置 2.邮箱就是发送者的邮箱,密码是登陆邮箱的密码 3.设置完以后,可以点击‘test configuration’, ...
- 超参数调试、Batch正则化和编程框架
1.调试处理 2.为超参数选择合适的范围 3.超参数在实践中调整:熊猫与鱼子酱 4.正则化网络的激活函数 5.将batch norm拟合进神经网络 6. 为什么Batch Norm会起作用? 7.测试 ...
- (转载)Spring定时任务的几种实现
spring框架定时任务 一．分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerT ...
- java 之多线程
多线程基本概念_程序_线程 1.1程序.进程.线程 程序:Program是一个指令的集合 进程:Process(正在执行中的程序)是一个静态的概念.进程是程序的一次静态执行过程,占用特定的地址空间.每 ...
- CSU 1862 The Same Game(模拟)
The Same Game [题目链接]The Same Game [题目类型]模拟 &题解: 写这种模拟题要看心态啊,还要有足够的时间,必须仔细读题,一定要写一步,就调试一步. 这题我没想到 ...
- 005-IIS处理过程
PipeLine调用过程ISAPIRuntime ProcessReqeustHttpRuntime ProcessRequestNoDemand ProcessRequestNow ProcessR ...
- div上下左右居中方法
方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...
- spark stream001
package stream.scala import java.io.PrintWriter import java.net.ServerSocket class LoggerSimulation ...