前端頁面的分頁，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大家根據自己的需求來定制吧，給各位看下我的最終效果圖

好了，分享到此結束，寫的不好，如有錯誤請各位指出