/**
* 分页工具
*/
(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>
时间： 2024-11-04 04:46:06