jQuery----分页插件实现

Posted SunLike阿理旺旺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery----分页插件实现相关的知识,希望对你有一定的参考价值。

1、效果

2、html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery 分页插件</title>
    <link rel="stylesheet" type="text/css" href="css/pagination.less">
</head>
<body>
    <div class="pagination-container" id = \'pagination-container\'>
    </div>
    <script type="text/javascript" src=\'js/jquery-2.2.1.min.js\'></script>
    <script type="text/javascript" src=\'js/pagination.js\'></script>
</body>
</html>

3、less代码

.pagination-container{
	width: 800px;
	height: 80px;
	margin: 0 auto;
	text-align: center;
	.div{
		height: 40px;
		line-height: 30px;
		margin: 0 auto;
		div{
			display: inline-block;
		}
		input,span,a{
			margin: 0 10px 0 0;
		}
		input{
			width: 40px;
			height: 20px;
		}
		.search-page-btn{
			height: 20px;
			padding: 4px 10px;
			background-color: #568DBD;
			color: white;
			border: 1px solid #568DBD;
			&:hover{
				background-color: #4681AF;
			}
		}
		a{ 
			padding: 6px 10px;
			border: 1px solid #C5B7B7;
			text-decoration: none;
			color: #888888;
			font-size: 12px;
			&:hover{
				border: 1px solid #568DBD;
			}
		}
		.choose{
			background-color: #568DBD;
			color: white;
			font-weight: bold;
		}
	}
}

  4、jquery代码

var pagination = $("#pagination-container");
var now_page = 1;
var total_page = 30;
createPagination(pagination, now_page, total_page);
function createPagination(pagination, now_page, total_page) {
    initPagination();
    addPaginationEvent();
    function initPagination() {
        pagination.empty();
        var lineOne = $("<div class = \'div\'>" +
            "<span>当前页:</span>" +
            "<span class=\'now-page num\'>" + now_page + "</span>" +
            "<span>/</span>" +
            "<span class=\'num total-page\'>" + total_page + "</span>" +
            "<span>跳转到</span>" +
            "<input type=\'number\' name=\'number\' class=\'jump-top-page\' value = \'" + now_page + "\' tabindex = \'1\'>" +
            "<a href=\'#\' class=\'search-page-btn\'>确定</a>" +
            "</div>");
        pagination.append(lineOne);
        var pageObj = $("<div class = \'div\'>" +
            "<div class = \'left\'>" +
            "<a href=\'#\' class=\'first-page\'>首页</a>" +
            "<a href=\'#\' class=\'prev-page\'><上一页</a>" +
            "</div>" +
            "<div class = \'center\'>" +
            "</div>" +
            "<div class = \'right\'>" +
            "<a href=\'#\' class=\'next-page\'>下一页></a>" +
            "<a href=\'#\' class=\'last-page\'>尾页</a>" +
            "</div>" +
            "</div>");
        pagination.append(pageObj);
        fillNumberPage(1);
    }
    function addPaginationEvent() {
        var searchBtn = pagination.find(".search-page-btn");
        var firstPageBtn = pagination.find(".first-page");
        var lastPageBtn = pagination.find(".last-page");
        var prevPageBtn = pagination.find(".prev-page");
        var nextPageBtn = pagination.find(".next-page");
        var prevPagesBtn = pagination.find(".prev-pages");
        var nextPagesBtn = pagination.find(".next-pages");
        var searchVal = pagination.find(".jump-top-page");
        searchBtn.on("click", function() {
            var searchVal = pagination.find(".jump-top-page");
            var page = parseInt(searchVal.val());
            if (page <= total_page && page > 0) {
                now_page = page;
                fillNumberPage(page);
            }
        })
        firstPageBtn.on("click", function() {
            if (now_page != 1) {
                fillNumberPage(1);
                now_page = 1;
            }
        })
        lastPageBtn.on("click", function() {
            if (now_page != total_page) {
                now_page = total_page;
                fillNumberPage(total_page);
            }
        })
        prevPageBtn.on("click", function() {
            if (now_page > 1) {
                now_page--;
                fillNumberPage(now_page);
            }
        })
        nextPageBtn.on("click", function() {
            if (now_page < total_page) {
                now_page++;
                fillNumberPage(now_page);
            }
        })
        pagination.on("click", ".page", function() {
            var page = parseInt($(this).attr("data-page"));
            now_page = page;
            fillNumberPage(page);
        })

         $(document).on("keydown",function(event){
         	if(event.keyCode == \'13\'){
         		 searchBtn.click();
         	}
         })
    }

    function fillNumberPage(page) {
        pagination.find(".center").empty();
        pagination.find(".now-page").text(page);
        pagination.find(".jump-top-page").val(page);
        var start;
        var end;
        var p = page;
        if (total_page <= 7) {
            start = 1;
            end = total_page;
        } 
        else {
            if (page <= 4) {
                start = 1;
                end = 7;
            } else if (page > 4 && page < total_page - 4) {
                start = page - 3;
                end = page + 3;
            } else {
                start = total_page - 7;
                end = total_page;
            }
        }
        for (var i = start; i <= end; i++) {
            var pageCenter = $("<a href=\'#\' class=\'page\' data-page = \'" + i + "\'>" + i + "</a>");
            if (i == p) {
                pageCenter.addClass("choose");
            }
            pagination.find(".center").append(pageCenter);
        }
    }
}

  5、总结

将父节点,当前页,总页数传给创建函数就可以生成分页。

(还没加跳页的功能)

以上是关于jQuery----分页插件实现的主要内容,如果未能解决你的问题,请参考以下文章

jquery插件实现分页

jQuery 分页插件(jQuery.pagination.js)ajax 实现分页

遇到不同的分页插件 比如bootStrap paganation和jqGrid,但后台代码该怎么写

使用jQuery开发datatable分页表格插件

推荐60个jQuery插件(转)

几个非常实用的JQuery代码片段