前端页面的分页，jq源码实现
各位大佬们好，今天刚加入博客园，希望与大家一起共同进步
分页是日常页面中见到过最多的功能，也是身为一个前端必备的技能，虽然现在已经有很多成熟的插件了，不过底层原理我们必须得掌握，不多说了，直接上代码
- html
<div class="pages">
<a class="goFirstPage" onclick="goFirstPage()">首页</a>
<a class="prev"><</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">></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大家根据自己的需求来定制吧，给各位看下我的最终效果图
好了，分享到此结束，写的不好，如有错误请各位指出
