项目组自己编写的js分页标签（百度分页）
浏览数：36 /
时间：2015年06月09日
/** * 分页工具 */ (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" onclick="javascript:void(0);" class="btn btn-primary selectWidth" >查 询</button> <button id="resetBtn" onclick="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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
