前端页面的分页，jq源码实现

各位大佬们好，今天刚加入博客园，希望与大家一起共同进步

分页是日常页面中见到过最多的功能，也是身为一个前端必备的技能，虽然现在已经有很多成熟的插件了，不过底层原理我们必须得掌握，不多说了，直接上代码

html

<div class="pages">
   <a class="goFirstPage" onclick="goFirstPage()">首页</a>
   <a class="prev">&#60;</a>
   <div class="page_btns">
        <a data-pagenum="1" onclick="FN_pageBtns($(this))">1</a>
        <a data-pagenum="2" onclick="FN_pageBtns($(this))">2</a>
        <a data-pagenum="3" onclick="FN_pageBtns($(this))">3</a>
        <a data-pagenum="4" onclick="FN_pageBtns($(this))">4</a>
        <a data-pagenum="5" onclick="FN_pageBtns($(this))">5</a>
   </div>
   <a class="next">&#62;</a>
   <a class="goLastPage" onclick="goLastPage()">尾页</a>
   <span class="DOM_total_pages"></span>
</div>

javascript

// 声明我们所需要的变量

　　var
　　page_num = 1, //当前页数默认第一页
　　totalPage, //总页数
　　prevPage_btn = $('.pages .prev'), //上一页按钮
　　nextPage_btn = $('.pages .next'), //下一页按钮
　　pageBtn_Html, //用来放分页按钮的容器
　　_showsArticle = $('#js-showplaylist'), //列表容器
　　_showsArticleJsonLi //用于保存拼接的数据html
　　;

function FN_shows_articleGetPageJson(page_num){
    $.ajax({
        url: 'http://ezfm.meldingcloud.com/schedule/getlist?programId=1&page='+page_num+'&type=history&sort=0&callback=1',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            // 先删除掉原来的数据
            _showsArticle.children().remove();
            var _data = data.data;
            totalPage = data.totalPage;//总页数
            if(page_num <= totalPage){
                $('#showpage-noDate').hide();
                for(var i=0;i<_data.length;i++){
                    _showsArticleJsonLi = '<li><i class="item-playbtn" data-id="" data-type="'+_data[i].audioType+'" data-title="'+_data[i].title+'" data-date="'+_data[i].day+'" data-time="'+_data[i].time+'" data-img="'+_data[i].programUrl+'" data-announcer="Shane Bigham" data-url="'+_data[i].mediaUrl+'"></i><h4 class="item-title">'+_data[i].title+'</h4><span class="item-time">'+_data[i].day+'</span><span class="item-info"><a href="#" class="add" title="添加"></a><a href="#" class="share" title="分享"></a></span></li>';
                    _showsArticle.append(_showsArticleJsonLi);
                }
            }else{  //没有数据
                $('#showpage-noDate').show();
            }
            if(page_num == 1){   // 数据为第一页时隐藏上一页按钮显示下一页按钮
                prevPage_btn.hide();
                nextPage_btn.show();
                $('.goFirstPage').hide();
                $('.goLastPage').show();
            }else if(page_num > 1){
                prevPage_btn.show();
                nextPage_btn.show();
                $('.goFirstPage').show();
                $('.goLastPage').show();
            }
            if(page_num == totalPage){// 数据为最后一页时显示上一页按钮隐藏下一页按钮
                nextPage_btn.hide();
                prevPage_btn.show();
                $('.goFirstPage').show();
                $('.goLastPage').hide();
            }

            // 当前页数在 >=3 并且  <=总页数-2的范围内 根据当前页数判断分页按钮
            function FN_page_btnsNum(){
                var page_num_1 = page_num-2 , page_num_2 = page_num-1 , page_num_4 = page_num+1 , page_num_5 = page_num+2;
                $('.page_btns a').eq(0).text(''+page_num_1+'');
                $('.page_btns a').eq(0).attr('data-pagenum',''+page_num_1+'');
                $('.page_btns a').eq(1).text(''+page_num_2+'');
                $('.page_btns a').eq(1).attr('data-pagenum',''+page_num_2+'');
                $('.page_btns a').eq(2).text(''+page_num+'');
                $('.page_btns a').eq(2).attr('data-pagenum',''+page_num+'');
                $('.page_btns a').eq(3).text(''+page_num_4+'');
                $('.page_btns a').eq(3).attr('data-pagenum',''+page_num_4+'');
                $('.page_btns a').eq(4).text(''+page_num_5+'');
                $('.page_btns a').eq(4).attr('data-pagenum',''+page_num_5+'');
            }
            // 当前页数大于总页数-2  根据总页数判断
            function FN_totalPage_btnsNum(){
                var totalPage_num_1 = totalPage-4 , totalPage_num_2 = totalPage-3 , totalPage_num_3 = totalPage-2 , totalPage_num_4 = totalPage-1;
                $('.page_btns a').eq(0).text(''+totalPage_num_1+'');
                $('.page_btns a').eq(0).attr('data-pagenum',''+totalPage_num_1+'');
                $('.page_btns a').eq(1).text(''+totalPage_num_2+'');
                $('.page_btns a').eq(1).attr('data-pagenum',''+totalPage_num_2+'');
                $('.page_btns a').eq(2).text(''+totalPage_num_3+'');
                $('.page_btns a').eq(2).attr('data-pagenum',''+totalPage_num_3+'');
                $('.page_btns a').eq(3).text(''+totalPage_num_4+'');
                $('.page_btns a').eq(3).attr('data-pagenum',''+totalPage_num_4+'');
                $('.page_btns a').eq(4).text(''+totalPage+'');
                $('.page_btns a').eq(4).attr('data-pagenum',''+totalPage+'');
            }
            // 当前页数小于3页的  默认1,2,3,4,5页
            function FN_LessThanThree_btnsNum(){
                $('.page_btns a').eq(0).text('1');
                $('.page_btns a').eq(0).attr('data-pagenum','1');
                $('.page_btns a').eq(1).text('2');
                $('.page_btns a').eq(1).attr('data-pagenum','2');
                $('.page_btns a').eq(2).text('3');
                $('.page_btns a').eq(2).attr('data-pagenum','3');
                $('.page_btns a').eq(3).text('4');
                $('.page_btns a').eq(3).attr('data-pagenum','4');
                $('.page_btns a').eq(4).text('5');
                $('.page_btns a').eq(4).attr('data-pagenum','5');
            }
            if(page_num < 3){
                FN_LessThanThree_btnsNum();
            }
            if(page_num >= 3 && page_num <= totalPage-2){
                FN_page_btnsNum();
            }
            if(page_num > totalPage-2){
                FN_totalPage_btnsNum();
            }

            // 根据当前页数定位到按钮并且给样式
            for(var l=0;l<$('.pages .page_btns a').length;l++){
                if($('.pages .page_btns a').eq(l).attr('data-pagenum') == page_num){
                    $('.pages .page_btns a').eq(l).siblings().removeClass('current');
                    $('.pages .page_btns a').eq(l).addClass('current');
                }
            }
            console.log(page_num);
            localStorage.page_num = page_num;
            // 保存总页数到本地
            localStorage.totalPage = totalPage;

        },
        error: function () {
            console.log('请求失败');
        }
    });
}
// 下一页
nextPage_btn.on('click',function(){
    FN_shows_articleGetPageJson(++localStorage.page_num);
})
// 上一页
prevPage_btn.on('click',function(){
    FN_shows_articleGetPageJson(--localStorage.page_num);
})
// 首页
function goFirstPage(){
    FN_shows_articleGetPageJson(1);
}
// 尾页
function goLastPage(){
    FN_shows_articleGetPageJson(parseInt(localStorage.totalPage));
}

// 点击按钮切换分页
function FN_pageBtns(_Dompage_btns){
    FN_shows_articleGetPageJson(parseInt(_Dompage_btns.attr('data-pageNum')));
}

// show-article.html   点击播放
$(document).on('click','#js-showplaylist li .item-playbtn',function(){
    var _this = $(this);
    audioPlay(_this,true);  //调用播放方法
})

FN_shows_articleGetPageJson(page_num);

css大家根据自己的需求来定制吧，给各位看下我的最终效果图

好了，分享到此结束，写的不好，如有错误请各位指出

前端页面的分页，jq源码实现

猜你喜欢