项目组自己编写的js分页标签（百度分页）

最新推荐文章于 2022-04-27 17:53:42 发布

weixin_30315723

最新推荐文章于 2022-04-27 17:53:42 发布

阅读量108

点赞数

文章标签： json java javascript ViewUI

原文链接：http://www.cnblogs.com/hailei/p/4493977.html

版权

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>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td><strong>配置项描述：</strong></td>
                        <td>
                            <input type="text" id="description" name="description"   class="inputContent title form-control" />
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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" />&nbsp;&nbsp;<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

weixin_30315723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目组自己编写的js分页标签（百度分页）

Oracle根据当前页码和条数算开始页和结束页：int startrow = (currentPage - 1) * size + 1; int endrow = currentPage* size;/** * 分页工具 */ (function($) {$.extend({PageUtil:{}})})(jQuery);(function($) { ...
复制链接

扫一扫