js分頁

bei_fang_du_lang發表於2017-04-26
function initPagination(){
    if(total == 0){
        return;
    }
    var url = "./moreNews.jsp?type=" + type;
    var n = rows;
    var count = total;
    count = (count % n == 0) ? (count / n) : ((count / n) + 1);
    count = parseInt(count);
    $('.pages').append("<a href=\""+url+"\" class=\"firstPage\">首頁</a>");
    $('.pages').append(
            "<a href=\"" + url + "&curPage=" + (curPage == 1 ? curPage : curPage - 1)
                    + "\" class=\"prevPage\">上一頁</a>");

    if (curPage >= 1 & curPage <= 5) {
        if(count>5){
            for (var i = 1; i <= 5; i++) {
                if (i == curPage) {
                    $('.pages').append(
                            "<span class=\"curPage\">" + curPage + "</span>");
                } else {
                    $('.pages').append(
                            "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                    + "</a>");
                }
            }
            $('.pages').append("<span>...</span>");
        }
        else {
            for (var i = 1; i <= count; i++) {
                if (i == curPage) {
                    $('.pages').append(
                            "<span class=\"curPage\">" + curPage + "</span>");
                } else {
                    $('.pages').append(
                            "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                    + "</a>");
                }
            }
        }
    }

    else if (curPage<=count&curPage>(count - 5)) {
        $('.pages').append("<span>...</span>");
        for (var i = count - 4; i <= count; i++) {
            if (i == curPage)
                $('.pages').append(
                        "<span class=\"curPage\">" + curPage + "</span>");
            else
                $('.pages').append(
                        "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                + "</a>");
        }
    }

    else {
        $('.pages').append("<span>...</span>");
        for (var i = curPage - 2; i <= curPage + 2; i++) {
            if (i == curPage)
                $('.pages').append(
                        "<span class=\"curPage\">" + curPage + "</span>");
            else
                $('.pages').append(
                        "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                + "</a>");
        }
        $('.pages').append("<span>...</span>");
    }

    $('.pages').append(
            "<a href=\"" + url + "&curPage="
                    + (curPage >= count ? curPage : curPage + 1)
                    + "\" class=\"nextPage\">下一頁</a>");
    $('.pages').append(
            "<a href=\""+url+"&curPage="+count+"\" class=\"lastPage\">末頁</a>");
}

.pages { 
	width:500px;
	text-align: center;
	margin: 0 auto;
	background: #fff;
	color: #000;
	font: 12px/1.5em arial, tahoma, simsun;
	overflow: hidden;
	line-height: 38px;
}

.pages a {
	vertical-align: middle;
	border: 1px solid #cccccc;
	color: black;
	padding: 6px;
	_padding: 5px;
	margin: 0;
	zoom: 1;
	font-family: Arial;
	text-decoration: none;
}

.pages a:hover {
	background: #6198c6;
	border: 1px solid #ddd;
	color: #fff;
}

.pages span {
	color: #888888;
	padding: 7px;
	position: relative;
	top: 1px;
	font-family: Arial;
	margin: 0;
	zoom: 1;
}

.pages span.curPage {
	color: #fff;
	background: #6198c6;
}

相關文章