分页显示--html,js处理_列表分页html+js-优快云博客

本文介绍了如何使用HTML和JavaScript实现网页数据的分页显示。通过示例代码，展示了如何创建分页导航，并详细解释了分页逻辑的实现过程，帮助读者理解如何动态加载不同页面的数据。

效果如下：

.pageJumpDiv{
			display: inline-block;
			font-size: 14px;
			color: #666;
			position: relative;
			top:-1px;
		}
		.pageJumpDiv input{
			width:45px;
			height: 26px;
			padding-left: 5px;

			border:1px solid #ccc;
		}
		.pageJumpDiv button{
			color:#666;
			height: 28px;
			padding: 2.5px 12px;
		}
//以上css

<div id="temp2-container" class="dataTables_wrapper no-footer">
		<script id="temp2" type="text/template">
			<div class="dataTables_info">共<%=data.sum_count%>条</div>
			<div class="dataTables_paginate paging_simple_numbers">
				<a class="paginate_button previous disabled" id="before_page" data-nowpage=<%=data.page%> >上一页</a>
				<%if(data.page_count<=5){%>
				<% for(var i=0;i<(data.page_count);i++){ %>
				<span>
                    <%if(i==(data.page)-1){%>
                    <a class="paginate_button current jumpPage"><%=Number(i)+1%></a>
                    <%}else{%>
					<a class="paginate_button jumpPage"><%=Number(i)+1%></a>
                    <%}%>
				</span>
				<% } %>
				<%}else if(data.page<=4){%>
				<% for(var i=0;i<4;i++){ %>
				<span>
                    <%if(i==(data.page)-1){%>
                    <a class="paginate_button current jumpPage"><%=Number(i)+1%></a>
                    <%}else{%>
					<a class="paginate_button jumpPage"><%=Number(i)+1%></a>
                    <%}%>
				</span>
				<% } %>
				...
				<a class="paginate_button jumpPage"><%=data.page_count%></a>
				<%}else if(data.page==(data.page_count-2)){%>
                <span>
                    <a class="paginate_button jumpPage">1</a>
                    ...
                    <a class="paginate_button jumpPage"><%=data.page-1%></a>
                    <a class="paginate_button current jumpPage"><%=data.page%></a>
                    <a class="paginate_button jumpPage"><%=Number(data.page)+1%></a>
					<a class="paginate_button jumpPage"><%=data.page_count%></a>
				</span>
				<%}else if(data.page==(data.page_count-1)){%>
                <span>
                    <a class="paginate_button jumpPage">1</a>
                    <a class="paginate_button jumpPage">2</a>
                    ...
                    <a class="paginate_button jumpPage"><%=data.page-1%></a>
                    <a class="paginate_button current jumpPage"><%=data.page%></a>
					<a class="paginate_button jumpPage"><%=data.page_count%></a>
				</span>
				<%}else if(data.page==(data.page_count)){%>
                <span>
                    <a class="paginate_button jumpPage">1</a>
                    <a class="paginate_button jumpPage">2</a>
                    ...
                    <a class="paginate_button jumpPage"><%=data.page-2%></a>
                    <a class="paginate_button jumpPage"><%=data.page-1%></a>
                    <a class="paginate_button current jumpPage"><%=data.page%></a>
				</span>
				<%}else{%>
                <span>
                    <a class="paginate_button jumpPage">1</a>
                    ...
                    <a class="paginate_button jumpPage"><%=data.page-1%></a>
                    <a class="paginate_button current jumpPage"><%=data.page%></a>
                    <a class="paginate_button jumpPage"><%=Number(data.page)+1%></a>
                    ...
					<a class="paginate_button jumpPage"><%=data.page_count%></a>
				</span>
				<%}%>
				<a class="paginate_button next disabled" id="after_page" data-nowpage=<%=data.page%> data-maxpage=<%=data.page_count%> >下一页</a>

				<div class="pageJumpDiv">共<%=data.page_count%>页，跳转至第
					<input type="number" id="jump-page-input" min="1" max=<%=data.page_count%> value=<%=Number(data.page)+1%> >页
					<button class="btn btn-default radius" id="page-jump-sure-button">确定</button> </div>

			</div>

		</script>
	</div>
//html中的模板块

//分页
            var pageData={};
            pageData.page=JSON.parse(data).data.page;
            pageData.page_count=Math.ceil(JSON.parse(data).data.count/limit);
            pageData.sum_count=JSON.parse(data).data.count;

            var html2=ejs.render(tem2,{data:pageData});
            document.getElementById("temp2-container").innerHTML = html2;

            clickPageNum();
            beforePage();
            afterPage();
            jumpInputPage();
//以上部分写在拉数据getPageData()的方法中的拉取到数据成功后的地方。



//点击1234页数
function clickPageNum() {
    $('#temp2-container').find('.jumpPage').click(function () {
        var click_num=this.innerHTML;
        var now_page=document.getElementById('before_page').dataset.nowpage;
        if(click_num!=now_page){
            // var now_page=document.getElementById('before_page').dataset.nowpage;
            getPageData(click_num);//拉取数据的方法
        }
    });
}
//点击上一页
function beforePage() {
    $('#before_page').click(function () {
        if(document.getElementById('after_page').dataset.maxpage!=0){
            var now_page=this.dataset.nowpage;
            if(now_page-1>0){
                getPageData(now_page-1);//拉取数据的方法
            }
            else {
                $.Huimodalalert('已经是第一页！',1500);
            }
        }

    });
}
function afterPage() {
    $('#after_page').click(function () {
        if(this.dataset.maxpage!=0){
            var now_page=this.dataset.nowpage;
            if(Number(now_page)>=Number(this.dataset.maxpage)){
                $.Huimodalalert('已经是最后一页！',1500);
            }
            else {
                getPageData(Number(now_page)+1);//拉取数据的方法
            }
        }
    });
}
//跳转至第几页
function jumpInputPage() {
    $('#page-jump-sure-button').click(function () {
        var input_num=$('#jump-page-input').val();
        console.log(input_num);
        var next_page_id=document.getElementById('after_page');
        var now_page=next_page_id.dataset.nowpage;
        var max_page=next_page_id.dataset.maxpage;
        // console.log(Number(input_num)>Number(max_page));
        if(Number(input_num)<1){
            console.log('输入页码过小');
        }
        else if(Number(input_num)>Number(max_page)){
            console.log('输入页码过大');
        }else if(Number(input_num)==Number(now_page)){
            console.log('输入为当前页');
        }
        else{
            getPageData(input_num);//拉取数据的方法
        }
    });
}