分页显示--html,js处理

来源：互联网发布：管家婆软件操作流程编辑：程序博客网时间：2024/05/15 07:30

效果如下：

.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);//拉取数据的方法        }    });}

阅读全文

0 0