JQ 前端分页

$(function(){ // 模拟了从数据库中返回的Json数据 var user = [{"account":"fanchao@163.com","name":"啦啦啦"}, {"account":"fanchao@test.com","name":"111"}, {"account":"fanchao@test.com","name":"66"}, {"account":"fanchao@test.com","name":"66"}, {"account":"fanchao@test.com","name":"55"}, {"account":"fanchao@test.com","name":"66"}, {"account":"fanchao@test.com","name":"44"}]; var userList = renderUserData(user);

    var Count = userList.length; //记录条数  
    var PageSize=6; //设置每页示数目  
    var PageCount=Math.ceil(Count/PageSize); //计算总页数  
    var currentPage =1; //当前页，默认为1
    
    if(PageCount > 1){
        $('.page').show();
        var pageHtml = '<a href="javascript:;" class="disable prev"> < </a> '
        
        for(var j=1;j<=PageCount;j++){
            if(currentPage == j){
                pageHtml += '<a href="javascript:;" class="current">'+j+'</a>'
            } else {
                pageHtml += '<a href="javascript:;">'+j+'</a>'
            }
        }
        pageHtml += '<a href="javascript:;" class="next"> > </a>';
        $('.page').empty().append(pageHtml)
    } else {
        $('.page').hide();
    }
    
    //默认显示第一页
    renderPage($('.table_body'),userList,currentPage,PageSize);
    
    $('.page').on('click','a:not(.next):not(.prev)',function(){
        currentPage = $(this).text();
        $(".current").removeClass("current");
        $(this).addClass("current");
    
        disabledPageBtn();
        
        renderPage($('.table_body'),userList,currentPage,PageSize);
    })
    
    $('.page').on('click','.next:not(.disable)',function(){
        currentPage += 1;
        $(".current").removeClass("current").next('a:not(.next)').addClass('current');
        
        disabledPageBtn();
        
        renderPage($('.table_body'),userList,currentPage,PageSize);
    })
    
    $('.page').on('click','.prev:not(.disable)',function(){
        currentPage -= 1;
        $(".current").removeClass("current").prev('a:not(.prev)').addClass('current');
        
        disabledPageBtn();
        
        renderPage($('.table_body'),userList,currentPage,PageSize);
    })
})
// 将json数据拼接成html数组
function renderUserData(data) {
    var pageData=[]; 
    if (data.length !== 0) {
        for (let i = 0; i<data.length; i++) {
            var dataHtml = '<div class="col-lg-4">'
                            +'<section class="card mb-4" style="overflow:hidden">'
                            +'<img src="/img/iconbtc.png" class="btc-bg" alt="">'
                            +'<header class="card-header" style="font-size:14px;font-weight:500;color:rgba(46,45,49,1);">'+data[i].name+'</header>'
                            +'<div class="card-body balance-widget">'
                            +'<div class="account-balance">'
                            +'<p class="balance-text">余额(CNY)</p>'
                            +'<p class="balance-num">'+data[i].account+'</p>'
                            +'<p class="balance-equal">≈0</p>'
                            +'</div>'
                            +'</div>'
                            +'</section>'
                            +'</div>';
            pageData.push(dataHtml);
        }
    } else {
        var dataHtml = '<div class="full-page">没有代币</div>';
        pageData.push(dataHtml);
    }
    return pageData;
}

// 渲染每页内容
function renderPage(obj,data,currentPage,PageSize){
    obj.empty();
    for(var i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){    
        obj.append(data[i]);  
    } 
}
// 判断上页、下页按钮是否可用
function disabledPageBtn(){
    // 上页
    if($('.current').prev('a').hasClass('prev')){
        $(".prev").addClass("disable");
    } else {
        $(".prev").removeClass("disable");
    }
    
    //下页
    if($('.current').next('a').hasClass('next')){
        $(".next").addClass("disable");
    } else {
        $(".next").removeClass("disable");
    }
}复制代码