js写分页

                </div>            
                <div class="go_page" id="pagination" >
                    <ul>
                    <li><span class="last-page"  aria-hidden="true">&lt;&nbsp;&nbsp;</span></li>
                    <li id="currentPage">1</li>
                    <li>/</li>
                    <li id="totalPage">1</li>
                    <li><span class="next-page" disabled="" aria-hidden="true">&nbsp;&nbsp;&gt;</span></li>
                    </ul>
                    <ul class="jump_page">
                    <li><span><b>跳转</b></span></li>  
                    <li><input type="text" value="`在这里插入代码片`1" id="toPage"></li>
                    <li><button type="button"  onClick='gotoPage()'  style="background-color: #086468;color: #cee9f1;width:40px;height: 25px; ">确认</button></li>
                    </ul>
                </div>
        .go_page_2{
            text-align: center;
            line-height: 25px;
            width: 100%;
            height: 40px;
            font-size: 12px;
            
        }
        .go_page li{
            width: 30px;
            text-align: center;
            line-height: 30px;
            border: none;
            color: rgb(236, 225, 225);
        }
        .go_page input{
            width: 20px;           
        }
function pagination(num){
    var first_num ,next_num
    first_num = num*10-10
    next_num = num*10
    $(".coninfo").empty();
    //historyList是全局变量,用来装所有数据的值
    if(next_num>historyList.length){
        next_num =historyList.length
    }
            var coninfoNo
            coninfoNo = ''
            for (var i = first_num ; i<next_num ;i++){
           if ( historyList[i].outEntryTime != null) {
                var coninfo_1 = '<p><span>' + historyList[i].WasteEntryTime + '-' + historyList[i].outEntryTime + '</span>&nbsp;&nbsp;&nbsp;<u>' + historyList[i].WasteName + '</u></p>'
                coninfoNo += coninfo_1
            }
            }
    $(".coninfo").append(coninfoNo);

    }
    //分页 上一页
    $(document).on('click','.last-page',function(){
        var currPage = parseInt($('#currentPage').html());
        var lastPage = currPage-1;
        if(lastPage < 1){
            $('#currentPage').html('1');
            pagination(1)
        }else{
            $('#currentPage').html(lastPage);
            pagination(lastPage)

        }
    });
    //分页 下一页
    $(document).on('click','.next-page',function(){
        var currPage = parseInt($('#currentPage').html());
        var nextPage = currPage+1;
        var pageCount = $('#totalPage').html();
        if(nextPage <= pageCount){
            $('#currentPage').html(nextPage);
            pagination(nextPage)
        }else{
            $('#currentPage').html(pageCount);
            pagination(pageCount)
        }
    })   
    //跳转
    function gotoPage(){      
        var pageNum = $.trim($('#toPage').val());
        if(pageNum>historyList.length){
            $("#tanchu").css('display', 'block')
            $("#tanchu").css('left', '800px')
            $("#content_tc").text('请输入正确得数字')
        }else{
            pagination(pageNum)
        }
       
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值