前台js分页，自己手写逻辑

js代码如下：

//设置分页
var pageSize = 10;
//设置一次显示多少页
var pageLimit = 5;
$(function(){
    //查询所有内容
    $.post(ctx + '/websites/queryListForPage',{navId:company.xwzx.id,start:0,limit:pageSize},function(success){
        if(success.results==0){
            return;
        }
        //清空新闻资讯列表
        var xwzxHtml = "<ul>";
        //计算当前有多少页
        var pageTotal = Math.ceil(success.results/pageSize);
        //当前页数
        var currentPage = 0;
        //临时变量，比较数目大小
        var count = 0;
        //比较当前应显示多少数据
        if(success.results<=pageSize){
            count = msg.length;
        }else{
            count = pageSize;
        }
        for(var i = 0;i<success.rows.length;i++){
            xwzxHtml += '<li class="newsList_li">'
                +'<a href="xwzxDetail?contentId='+success.rows[i].id+'"><div class="newsList_date">'
                +'<p class="newsList_day">'+dateTime(success.rows[i].dtime)+'</p></div>'
               +'<div class="newsList_intro">'
                  +'<h3>有关“'+success.rows[i].title+'”的新闻动态</h3>'
                  +'<p>'+success.rows[i].newsAbstract+'</p></div></a></li>'
        }
        xwzxHtml += "</ul>";
        //分页
        xwzxHtml += '<div class="newsList_page">'
                +'<a href="javascript:void(0)" onclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
                +'<a href="javascript:void(0)" onclick="changePage('+((0-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
        //如果总页数大于设置的页数，则
                if(pageTotal>pageLimit){
                    for(var i=0;i<pageLimit;i++){
                        xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                    xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                }else{
                    for(var i=0;i<pageTotal;i++){
                        xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                }
        xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+((0+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
                   +'<a href="javascript:void(0)" onclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
                +'</div>';
        $('.yzIntro_row').html(xwzxHtml);
    });
});
//将后台传过来的时间转换成年月日时分秒
function dateTime(obj){
        var mmsecond = obj;
        var result = [60,60,24];
        var flag;
        var result_re = "";
        mmsecond = Math.floor(mmsecond/1000);
        //变成秒单位,但是不操作
        var i;
        //下面这个for计算时分秒
        for(i=0;i<3;i++){
            flag = Math.floor(mmsecond%result[i]);
            mmsecond = Math.floor(mmsecond/result[i]);
            if(flag < 10){
                result_re = "0"+flag +":"+ result_re;
            }else{
                result_re = flag +":"+ result_re;
            }
        }
        //去掉最后的一个冒号
        result_re = result_re.substring(0,result_re.length-1);
        //下面计算年月日
        var year,month,day;
        var everyMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
        //计算年
        flag = Math.floor(mmsecond/365);
        year = 1970 - 0 + flag;
        mmsecond = Math.floor(mmsecond%365);
        //计算月和日
        for(i=0;i<12;i++){
        //判断闰月
            if(((year%4 == 0)&&(year%100 != 0)) || (year%400 == 0)){
                if(mmsecond == 59){
                    month = "02";
                    day = "29";
                    break;
                }
            }
            if(mmsecond > everyMonth[i]){
                mmsecond -= everyMonth[i];
            }else{
                month = i+1;
                day = mmsecond;
                month = month >10?month:"0"+month;
                day = day>10?day:"0"+day;
            }
        }
        //拼起来 05</p><p>2016年10月</p>
        result_re = day + "</p><p>" + year + "年" + month + "月";
        return result_re;
    }
function changePage(start,pageTotal,currentPage){
    if(start<0){
        start = 0;
        currentPage+=1;
    }
    if(currentPage>pageTotal){
        start = start - pageSize;
        currentPage-=1;
    }
    $.ajaxSetup({async : false}); 
    $.post(ctx + '/websites/queryListForPage',{start:start,limit:pageSize,navId:company.xwzx.id},function(success){
        if(success.results==0){
            return;
        }
        //清空新闻资讯列表
        var xwzxHtml = "<ul>";
        for(var i = 0;i<success.rows.length;i++){
            xwzxHtml += '<li class="newsList_li">'
                +'<a href="xwzxDetail?contentId='+success.rows[i].id+'"><div class="newsList_date">'
                +'<p class="newsList_day">'+dateTime(success.rows[i].dtime)+'</p></div>'
               +'<div class="newsList_intro">'
                  +'<h3>有关“'+success.rows[i].title+'”的新闻动态</h3>'
                  +'<p>'+success.rows[i].newsAbstract+'</p></div></a></li>'
        }
        xwzxHtml += "</ul>";
        //分页
        xwzxHtml += '<div class="newsList_page">'
                +'<a href="javascript:void(0)" onclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
                +'<a href="javascript:void(0)" onclick="changePage('+((currentPage-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
                if(pageTotal > pageLimit){
                    //判断如果是小于当前页数
                    if(currentPage<Math.ceil(pageLimit/2)){
                        for(var i=0;i<pageLimit;i++){
                            xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                    //判断尾页
                    }else if(pageTotal<(currentPage+Math.ceil(pageLimit/2))){
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                        for(var i=(pageTotal-pageLimit);i<pageTotal;i++){
                            xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                    //判断中间页
                    }else{
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                        for(var i=(currentPage-Math.ceil(pageLimit/2)+1);i<(pageLimit+currentPage-Math.ceil(pageLimit/2)+1);i++){
                            xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                    }
//                    for(var i=0;i<pageLimit;i++){
//                        xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
//                    }
                }else{
                    for(var i=0;i<pageTotal;i++){
                        xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                }
        xwzxHtml += '<a href="javascript:void(0)" onclick="changePage('+((currentPage+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
                +'<a href="javascript:void(0)" onclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
                +'</div>';
        $('.yzIntro_row').html(xwzxHtml);
        $('.newsList_page >a').each(function(){
            if((currentPage+1)==$(this).html()){
                $(this).css('background','#2688c3');
                $(this).css('color','#fff');
            }
        });
    });
}

jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="common/head.jsp"%>
<script type="text/javascript" src="${ctx}/plugins/yz/web/resources/js/xwzx.js"></script>
<title>${company.websitesName }— 新闻资讯列表</title>
</head>

<body>
    <!--top-->
    <jsp:include page="common/header.jsp" />
    <!--slide-->
    <div class="yzjjfa_slide yzNews_slide"><a href="javascript:window.location.href='xwzx'"><img src="../plugins/yz/web/resources/imgs/newsSlideImg.png" /></a> </div>
    <!--position-->
    <div class="yzContain yzjjfa_posi">
        <img src="../plugins/yz/web/resources/imgs/posIcon.png" />
        您现在所处的位置：<a href="javascript:window.location.href='index'">--信息技术服务有限公司</a>&gt;
        <a href="javascript:window.location.href='xwzx'">新闻资讯</a>
    </div>
    <!--content-->
    <div class="yzContain yzjjfa_content">
        <p class="yzSepea_line yzNews_line"></p>
        <div class="yzIntro_row">
            
        </div>
    </div>
<jsp:include page="common/footer.jsp" />
</body>
</html>

新闻资讯css如下：

/*-------新闻资讯------*/
.yzNews_rightTitle{ background: url("../imgs/newsTitle_icon.png") no-repeat scroll left center; margin-top:-20px;}
.yzNews_rightUl > li{ background: url("../imgs/newsList_icon.png") no-repeat scroll left 11px; height:30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.yzNews_line{ margin-bottom:40px;}
.newsList_li{ height:90px; padding:20px 15px 20px; border-bottom:dashed 1px #eaeaea;}
.newsList_li>a:hover>.newsList_intro>p,.newsList_li>a:hover>.newsList_intro>h3{ color:#2688c3;}
.newsList_date{ width:80px; height:70px; text-align:center;  background:#f0f0f0; float:left; padding:10px 5px;}
.newsList_day{ width:100%; height:30px; line-height:30px; font-size:24px; margin-bottom:12px; }
.newsList_intro{ width:1050px; height:90px; float:left; margin-left:30px; }
.newsList_intro>h3{ font-size:20px; font-weight: normal; margin-top:5px; }
.newsList_intro>p{ margin-top:10px; height:47px; overflow:hidden; line-height:23px; color:#555; }
.newsList_page{ margin-top:40px; float:right;}
.newsList_page>a{ display:inline-block; padding:5px 10px; border:solid 1px #2688c3; color:#2688c3; border-radius: 3px; margin-right:5px;}
.newsList_page>a:hover,.newsList_page>a:focus,.newsList_page>a:active{ background:#2688c3; color:#fff;}
.yzNews_slide{ padding-top:0;}