项目组自己编写的js分页标签(百度分页)
Oracle根据当前页码和条数算开始页和结束页:
int startrow = (currentPage - 1) * size + 1;
int endrow = currentPage * size;
/*** 分页工具*/ (function($) {$.extend({PageUtil:{}})})(jQuery);(function($) { $.extend($.PageUtil,{//默认每页条数_pageSize:10,//获取数据请求链接_getDataUrl:"",//检索条件form的Id_filedFormId:"",//显示区域的Id_showId:"",//默认显示翻页标签个数_showPageTagNum:5,//当前选中页_nowSelectedPageTagNum:1,//加载图片路径_loadImage:"",//初始化init: function(option){var $self = this;return $.extend(true,$self,option); },loadDataValid: function(){return false;},loadData: function(pageNum){ var $self=this;$self.showLoadDiv();var flg=this.loadDataValid();if(flg){return false;}$('.page').html('');//清空分页var params = {};params["pageNumber"] = pageNum; params["objectsPerPage"] = $self._pageSize; if($self._filedFormId!=""){var $arrparams = $("#"+$self._filedFormId).find("input,select");var fields = $arrparams.serializeArray();$.each(fields,function(n,m){params[m.name] = m.value; }); } $.ajax({type : "post",async : false,url : this._getDataUrl,data : params,success : function(data) {data=JSON.parse(data);data["pageNum"]=pageNum;$self.genericHTML(data);}});}, genericHTML:function(data){var $self=this;$self.genericPageTag(parseInt(data.pageNum),parseInt(data.totalPage));$self.genericHTMLContent(data);$self.closeLoadDiv();},genericHTMLContent: function(json){}, genericPageTag: function(pageNum,pageCount){//count:数据条数;pageNum:当前页码;pageCount:总页数if(pageCount<=0){$('.page').hide();return false;}else{$('.page').show();}var $self=this;var pageTagHTML='';//翻页标签拼接pageTagHTML+='<a name="firstPage">首页</a>'; if(pageCount<=$self._showPageTagNum){ pageTagHTML+='<span name="prePage">上一页</span>';for(var i = 1; i <= pageCount; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';} pageTagHTML+='<span name="nextPage" >下一页</span>';}else{ pageTagHTML+='<span name="prePageTags"><<</span>';pageTagHTML+='<span name="prePage">上一页</span>'; var showPageTagMaxNum=pageNum-1+$self._showPageTagNum;if(showPageTagMaxNum<pageCount){if(pageNum==1){for(var i = pageNum; i <= showPageTagMaxNum; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';}}else{ for(var i = pageNum-1; i <showPageTagMaxNum; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';}}}else{for(var i = pageCount-$self._showPageTagNum+1; i <= pageCount; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';}} pageTagHTML+='<span name="nextPage" >下一页</span>';pageTagHTML+='<span name="nextPageTags">>></span>';}pageTagHTML+='<a name="endPage">末页</a>';if(pageCount!=1){$('.page').html(pageTagHTML); }//翻页标签事件绑定//页码翻页 $('.page').find("a[name=pageTag]").bind("click",function(){var pageParam = $(this).attr("attrVal"); pageParam =parseInt(pageParam);$self._nowSelectedPageTagNum=pageParam;$self.loadData($(this).attr("attrVal"));});//<<$('.page').find("span[name=prePageTags]").bind("click",function(){var pageParam =$('.page').find("a[name=pageTag]:first").attr("attrVal"); pageParam =parseInt(pageParam);var pageFirstParam=1;if(pageParam-$self._showPageTagNum<1){pageFirstParam=1; }else{pageFirstParam=pageParam-$self._showPageTagNum; }$self.genericPageTag(pageFirstParam,pageCount);});//>>$('.page').find("span[name=nextPageTags]").bind("click",function(){var pageParam =$('.page').find("a[name=pageTag]:first").attr("attrVal"); pageParam =parseInt(pageParam);if(pageParam+$self._showPageTagNum<=pageCount){$self.genericPageTag(pageParam+$self._showPageTagNum,pageCount);} });//首页$('.page').find("a[name=firstPage]").bind("click",function(){$self._nowSelectedPageTagNum=1;$self.loadData('1');});//末页$('.page').find("a[name=endPage]").bind("click",function(){$self._nowSelectedPageTagNum=pageCount;$self.loadData(pageCount);});//上一页$('.page').find("span[name=prePage]").bind("click",function(){var pageParam = $(".Selected",$('.page')).attr("attrVal");if(pageParam==undefined){pageParam=$self._nowSelectedPageTagNum;}pageParam = parseInt(pageParam); if(pageParam<=1){return false;}$self._nowSelectedPageTagNum=pageParam-1;$self.loadData(pageParam-1);});//下一页$('.page').find("span[name=nextPage]").bind("click",function(){var pageParam = $(".Selected",$('.page')).attr("attrVal");if(pageParam==undefined){pageParam=$self._nowSelectedPageTagNum;}pageParam =parseInt(pageParam);if(pageParam>=pageCount){return false;}$self._nowSelectedPageTagNum=pageParam+1;$self.loadData(pageParam+1);}); $self.addCheckedCss(this._nowSelectedPageTagNum,pageCount);}, //显示加载图片showLoadDiv: function(){$("img[name='loadImg']").attr("style","display: block; margin-left: 310px;");},//加载图片消失closeLoadDiv: function(){$("img[name='loadImg']").attr("style","display: none; margin-left: 310px;");},addCheckedCss:function(pageNum,pageCount){//若当前页为第一页if(pageNum==1){$('.page').find("a[name=firstPage]").attr("style","cursor:default");$("span[name='prePage']").attr("style","cursor:default");}else{$('.page').find("a[name=firstPage]").attr("style","cursor:pointer;color:black;");$("span[name='prePage']").attr("style","cursor:pointer;color:black;");}//若当前页为最后一页if(pageNum==pageCount){$('.page').find("a[name=endPage]").attr("style","cursor:default");$("span[name='nextPage']").attr("style","cursor:default");}else{$('.page').find("a[name=endPage]").attr("style","cursor:pointer;color:black;");$("span[name='nextPage']").attr("style","cursor:pointer;color:black;");}//给第一批和最后一批加上对应选择样式var flag1=0;var flag2=0;$("a[name='pageTag']").each(function(){if(parseInt($(this).text())==1){flag1=1;}if(parseInt($(this).text())==pageCount){flag2=1;}});if(flag1==1){$("span[name='prePageTags']").attr("style","cursor:default");}else{$("span[name='prePageTags']").attr("style","cursor:pointer;color:black;");}if(flag2==1){$("span[name='nextPageTags']").attr("style","cursor:default");}else{$("span[name='nextPageTags']").attr("style","cursor:pointer;color:black;");}}}); })(jQuery);
上面是分页标签 page.js 引入此文件。然后页面只需要传入json数据给它即可分页,写法如下
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <meta http-equiv="X-UA-Compatible" content="IE=dege" /> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href='<c:url value="/assets/css/default/admin/admin.css"/>'/> <link rel="stylesheet" type="text/css" href='<c:url value="/assets/css/default/admin/experts.css"/>'/> <link href="<c:url value='/assets/css/default/admin/bootstrap-datetimepicker.min.css'/>" rel="stylesheet"media="screen"> <link rel="stylesheet" type="text/css" href='<c:url value="/assets/css/default/admin/bootstrap.min.css"/>'/> <script type="text/javascript" src="<c:url value='/assets/lib/bootstrap/bootstrap.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/lib/lang/Date.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/lib/datetimepicker/bootstrap-datetimepicker.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/lib/datetimepicker/bootstrap-datetimepicker.zh-CN.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/js/page.js'/>" charset="UTF-8"></script> <style> .icon2{background: url('<c:url value="/assets/images/default/infomation/icon2.png"/>');background-repeat: no-repeat; width:25px; height:25px; float:left;} .icon_b8{background-position: 0px -175px; color:#FFF; margin-left:5px;} .icon_b9{background-position: 0px -200px; color:#FFF; margin-left:5px;} .icon_b10{background-position: 0px -225px; color:#FFF; margin-left:5px; cursor:pointer;} </style><!--[if lt IE 9]><script src='<c:url value="/assets/lib/bootstrap/html5shiv.min.js"/>'></script><script src='<c:url value="/assets/lib/bootstrap/respond.min.js"/>'></script><![endif]--><div class="container2" style="width: 97%; margin-left: 9px; margin-right: 0px;"><div class="row"><div style="margin-left:10px;"><p class="right-firstContent"><span>系统管理</span>>><span>配置管理</span></p></div></div><div class="rw" style="margin-top: 30px;"><div class="col-md-10" style="position: relative;"><form id="commSysFormId"> <table><tr><td><strong>配置项键:</strong></td><td><input type="text" id="settingKey" name="settingKey" class="inputContent title form-control" /></td><td> </td><td> </td><td><strong>配置项描述:</strong></td><td><input type="text" id="description" name="description" class="inputContent title form-control" /></td><td> </td><td> </td></tr></table></form><div style="position:absolute;left: 600px;top:0px;"><button id="searchBtn" οnclick="javascript:void(0);" class="btn btn-primary selectWidth" >查 询</button> <button id="resetBtn" οnclick="javascript:void(0);" class="btn btn-primary selectWidth" >重 置</button> </div></div></div><p> </p><p> </p><div class="row" style="width:98%;"><div style="width:98%;"><table class="table table-bordered table-hover consuitDate" id="theadCenter"><thead><tr class="theadCenter "><th >配置项键</th><th >配置项值</th><th >配置项描述</th><th >创建日期</th><th >修改日期</th><th >操作</th></tr></thead> <tbody align="center" id="commSysParamTbId"> </tbody> </table></div></div> <div class="page" name="pageComm" style="display:none;"></div> </div> <script type="text/javascript"> var $PageUtil=null; //加载数据 function loadData(){$PageUtil =$.PageUtil.init({_getDataUrl:"<c:url value='/commSysParam/getCommSysParamList.do'/>",//检索条件form的Id_filedFormId:"commSysFormId",//显示区域的Id_showId:"commSysParamTbId",//当前选中页_nowSelectedPageTagNum:1, genericHTMLContent:function(data){if(parseInt(data.totalPage)<=0){$("#"+this._showId).html('<tr><td colspan="6" style="text-align: center;"><span style="font-size: 18px;color:orange;">目前没有任何配置信息</span></td></tr>');return false;}var strhtml="";$(data.list).each(function(index,dat){ var createdDate= new Date(data.list[index].createdDate).format();var updatedDate= new Date(data.list[index].updatedDate).format();var value =data.list[index].settingValue;var description =data.list[index].description;if(value!=''&&value!=null){if(value.length>10){value = value.substring(0,10)+'...';}}else{value="";}if(description!=''&&description!=null){if(description.length>10){description = description.substring(0,10)+'...';}}var str="<tr>";str +='<td name="needUpdateKey" style="text-align:center;vertical-align:middle;">'+data.list[index].settingKey+'</td>';str +='<td name="needUpdateValue" title="'+value+'" style="text-align:center;vertical-align:middle;cursor:pointer;">'+value+'</td>';str +='<td title="'+data.list[index].description+'" style="text-align:center;vertical-align:middle;">'+description+'</td>';str +='<td style="text-align:center;vertical-align:middle;">'+createdDate+'</td>';str +='<td style="text-align:center;vertical-align:middle;">'+updatedDate+'</td>';str +='<td style="text-align:center;vertical-align:middle;width:180px;"><input type="button" name="btnUpdate" attrValue="'+value+'" value="修改" class="btn btn-primary selectWidth" /> <input type="button" disabled="disabled" attrIdBussiness="'+data.list[index].idBussiness+'" name="btnSave" value="保存" class="btn btn-primary selectWidth" /></td>';str +='</tr>'strhtml+=str;});$("#"+this._showId).html(strhtml); //修改按钮$("input[type='button'][name='btnUpdate']").click(function(){var thisValue =$(this).val();//目前按钮的值 取消 和修改 2种 var attrValue = $(this).attr("attrValue");//获得当前的值var attrDescription = $(this).attr("attrDescription");//获得当前的描述if(thisValue=='取消'){if(attrValue.length>10){attrValue = attrValue.substring(0,10)+'...';}$(this).parent().siblings("td[name='needUpdateValue']").html(attrValue);$(this).parent().find("input[type='button'][name='btnSave']").attr("disabled","disabled");$(this).val("修改");}else if(thisValue=='修改'){$(this).parent().siblings("td[name='needUpdateValue']").html('<input type="text" name="settingValueTemp" value="'+attrValue+'" style="width:180px;" class="inputContent title form-control" />');$(this).parent().find("input[type='button'][name='btnSave']").attr("disabled",false);$(this).val("取消");}})//保存按钮$("input[type='button'][name='btnSave']").click(function(){var value=$(this).parent().siblings("td[name='needUpdateValue']").find("input[type='text'][name='settingValueTemp']").val();value =$.trim(value);var idBussiness = $(this).attr("attrIdBussiness");//获得当前的值var key=$(this).parent().siblings("td[name='needUpdateKey']").text();qikoo.dialog.confirm("确定要修改吗?",function(){$.ajax({type : "post", async : false, url:"<c:url value='/commSysParam/updateCommSysParamByKey.do'/>", data : {"key":key,"value":value,"idBussiness":idBussiness},dataType:"json",success: function (result) {if(result.flag=='Y'){loadData();}else{alert(result.msg);}}});},function(){});})} });$PageUtil.loadData('1');return false; }$(function(){loadData();//查询$("#searchBtn").click(function(){loadData();})//重置$("#resetBtn").click(function(){$("#settingKey").val('');$("#description").val('');}) })</script>
.res {float: rigth;
}.zhihui {background: #CCCCCC
}div table thead tr th {padding: 0px;margin: 0px;
}#subject,#TFZX,#TDEP,#EGRP,#ZX {width: 95px;height: 35px;
}.page {color: #666;cursor: pointer;padding: 10px 0;text-align: center;clear: both;overflow: hidden;
}.page span {margin: 0 10px;line-height: 22px;display: inline-table;
}.page span:hover {margin: 0 10px;color: #F60;
}.page a {display: block;padding: 0 4px;text-align: center;height: 18px;line-height: 18px;margin-top: 3px;margin-right: 3px;color: #666;display: inline-table;
}.page a:hover {background: #ccc;color: #FFF;
}.page a.Selected {background: #1092CC;color: #FFF;display: inline-table;
}.Selected {background: #1092CC;color: #FFF;display: inline-table;
}.showDetailDiv {position: absolute;min-width: 100px;maxb-width: 120px;right: 0px;overflow: hidden;z-index: 9999;cursor: pointer;border: #DAF2FC solid 2px;background: #F1FAFE;padding: 0px 6px;
}
转载于:https://www.cnblogs.com/hailei/p/4493977.html
项目组自己编写的js分页标签(百度分页)相关推荐
- 分页标签精讲(仿百度雅虎淘宝共23种样式任意切换)-罗春龙-专题视频课程
分页标签精讲(仿百度雅虎淘宝共23种样式任意切换)-217人已学习 课程介绍 仿百度雅虎淘宝实现分页标签,需要学者有一定的JSP基础,该视频深入讲解分页标签业务逻辑处理: 课程收益 ...
- python爬取百度贴吧中的所有邮箱_使用 Python 编写多线程爬虫抓取百度贴吧邮箱与手机号...
原标题:使用 Python 编写多线程爬虫抓取百度贴吧邮箱与手机号 不知道大家过年都是怎么过的,反正栏主是在家睡了一天,醒来的时候登QQ发现有人找我要一份贴吧爬虫的源代码,想起之前练手的时候写过一个抓 ...
- 【SSM整合案例】静态资源和分页标签的添加
静态资源的添加 打开资料,找到[项目资料]-[静态资源],有css,js,jsp,fonts目录,添加到eclipse的WebContent目录下. 将[jsp]目录整个复制到WEB-INF目录下. ...
- UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签)
UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1. 示例 <t:base type="jquery, ...
- 分页标签commons.tld,NavigationTag,Page
分页标签的使用 一.commons.tld 将这个文件复制到 项目的 WEB-INF 文件夹下 <?xml version="1.0" encoding="UTF- ...
- js实现网页打印分页打印
web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是 ...
- 润乾报表分页标签:显示第几页和共几页
在润乾的报表使用当中,如果遇到海量数据的清单式列表,那么在读取.展现及导出过程中可能会出现速度过慢.内存溢出.系统死机等问题.因此,润乾报表提供了分页计算extHtml标签.这个标签扩展了原ht ...
- html中sprite标签,Three.js模型标签
Three.js模型标签 在很多的实际的项目中,你可能需要给一个Three.js的模型添加标签,标签可以通过一个包含文字图形信息的HTML元素或者一个three.js的精灵模型来表示. 层级模型 复杂 ...
- dede php可以传多个参数,织梦分页标签dede:pagelist传参数
模板文件中使用这个分页标签 {dede:pagelist listsize=3/} 如果要在url中加入参数 像是这样 /reg_user.php?ModelId=0&Registration ...
- java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件 直接上插件API:链接地址 感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖 后端: pom文件添加: 1.7.0.RELEASE ...
最新文章
- 2021年中国服装行业分析报告-产业规模现状与发展规划趋势
- android离散点贝塞尔曲线,离散点拟合曲线贝塞尔曲线B样条.ppt
- BZOJ 1093 [ZJOI2007]最大半连通子图
- mysql同步binlog_利用MySQL的Binlog实现数据同步与订阅(下)
- java单态模式_Java单态模式
- Char.IsDigit与Char.IsNumber的区别[转]
- nodejs-url网址解析的好帮手
- 应对「高并发」的思路
- 中国的四大沙地,你都认识吗?
- 揭秘阿里中台!一文看懂阿里推荐业务的两大利器 | 赠书
- 如何建立队列c语言_什么是优先队列
- linux服务器配置jdk1.8
- Ubuntu 18.04 Server必须使用netplan命令配置IP地址
- CCF NOI1034 钞票兑换
- 又优化了一下 Android ListView 异步加载图片
- 1028: [JSOI2007]麻将 - BZOJ
- paip.c++ cli 命令行 调用总结
- 手机steam未能连接到服务器1004,steam与服务器连接失败
- bracktrack5r3安装+bt5r3下安装vmwaretools
- react-native系列(24)API篇:屏幕宽高和屏幕像素密度