纯js 分页

最新推荐文章于 2023-02-04 19:21:27 发布

Edwin_jada

最新推荐文章于 2023-02-04 19:21:27 发布

阅读量192

点赞数

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Edwin_jade/article/details/103628008

版权

jQuery学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

纯js分页

function goPage_article(pno,psize){
    var itable = jQuery("#resultsBox .market_update_list");
    var num = itable.length;//表格所有行数(所有记录数)
    var pageSize = psize;//每页显示行数
    var totalPage = 0;//总页数
    psize = psize || 6;
    /* 当不是第一页 而且 存在 market_first 时将他隐藏 */
    if(pno>1){
       var first_market =  jQuery('#resultsBox .market_first').length;
       if(first_market > 0){
        jQuery('#resultsBox .market_first').hide();
       }
    }else if(pno == 1){
        var first_market =  jQuery('#resultsBox .market_first').length;
        if(first_market > 0){
            jQuery('#resultsBox .market_first').show();
        }
    }
    //总共分几页 
    if(num/pageSize > parseInt(num/pageSize)){   
            totalPage=parseInt(num/pageSize)+1;   
    }else{   
        totalPage=parseInt(num/pageSize);   
    }   
    var currentPage = parseInt(pno);
    var startRow = (currentPage - 1) * pageSize+1;
    var endRow = currentPage * pageSize;
    endRow = (endRow > num)? num : endRow;   
    //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){    
        var irow = itable[i-1];
        if(i>=startRow && i<=endRow){
            if( i == startRow && i !== 1 ){
                 /** 将第一个放大显示 原生jq 获取节点并添加class */
                if(irow.childNodes[1].childNodes[1].className.indexOf('first_post') == -1){
                    irow.setAttribute("style" ," max-width:100%;flex:0 0 100% ")
                    irow.childNodes[1].childNodes[1].classList.add('first_post')
                } 
            }
            irow.style.display = "block";    
        }else{
            irow.style.display = "none";
        }
    }
    //"共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
    var tempStr ='<div class="tech_ana_pagination" id = "page_ajax_active"><div class="tech_ana_previous"><div>';
    if(currentPage > 1){
        tempStr += "<a class='inactive' href=\"javascript:void(0)\" onClick=\"goPage_article("+(1)+","+psize+")\"> << </a>";
        tempStr += "<a class='inactive' href=\"javascript:void(0)\" onClick=\"goPage_article("+(currentPage-1)+","+psize+")\"> < </a>";
    }
    if(currentPage -2 > 0){
        tempStr += "<a class='inactive'  href=\"javascript:void(0)\" onClick=\"goPage_article("+(currentPage-2)+","+psize+")\"> "+(currentPage -2)+" </a>";
    }
    if(currentPage -1 > 0){
        tempStr += "<a class='inactive' href=\"javascript:void(0)\" onClick=\"goPage_article("+(currentPage-1)+","+psize+")\"> "+(currentPage -1)+" </a>";
    }
    tempStr += "<span class='current' style=' display: inline-block;line-height:40px;'> "+currentPage+" </span>";
    if(currentPage +1 <= totalPage){
        tempStr += "<a class='inactive'  href=\"javascript:void(0)\" onClick=\"goPage_article("+(currentPage+1)+","+psize+")\"> "+(currentPage +1)+" </a>";
    }
    if(currentPage +2 <= totalPage){
        tempStr += "<a class='inactive'  href=\"javascript:void(0)\" onClick=\"goPage_article("+(currentPage+2)+","+psize+")\"> "+(currentPage +2)+" </a>";
    }
    if(currentPage < totalPage){
        tempStr += "<a class='inactive' href=\"javascript:void(0)\" onClick=\"goPage_article("+(currentPage+1)+","+psize+")\"> ></a>";
        tempStr += "<a class='inactive' href=\"javascript:void(0)\" onClick=\"goPage_article("+(totalPage)+","+psize+")\"> >> </a>";
    }
    tempStr += '<div></div><div>' ;
    if(jQuery('#page_ajax_active').length){
        jQuery('#page_ajax_active').remove();  
    }
    jQuery("#resultsBox").append(tempStr);
}