js分頁功能實現
阿新 • • 發佈：2020-08-06
1、js程式碼
1 <script> 2 var second_class=getParams("second_class"); 3 var first=getParams("first"); 4 var title=getParams("title"); 5 var pageIndex = getParams("page"); 6 var parent_id = getParams("parent_id"); 7 localStorage.setItem("second_class",second_class);8 localStorage.setItem("first",first); 9 localStorage.setItem("title",title); 10 localStorage.setItem("pageIndex",pageIndex); 11 localStorage.setItem("parent_id",parent_id); 12 var page=1; //設定首頁頁碼 13 var limit = 8; //設定一頁顯示的條數 14 var total; //總條數 15 var imageNum=0; 16 var article_title = ""; 17 $(function () { 18 $("#search").click(function(){ 19 article_title = $("#text").val(); 20 getList(); 21 }) 22 //分頁引數（引數名固定不可變） 23 var pageConfig = {24 pageSize: 8, //每頁條數（不設定時，預設為10） 25 prevPage: '上一頁', //上一頁（不設定時，預設為：<） 26 nextPage: '下一頁', //下一頁（不設定時，預設為：>） 27 firstPage: '首頁', //首頁（不設定時，預設為：<<） 28 lastPage: '末頁', //末頁（不設定時，預設為：>>） 29 degeCount: 2, //當前頁前後兩邊可顯示的頁碼個數（不設定時，預設為3） 30 ellipsis: true, //是否顯示省略號按鈕(不可點選)（true:顯示，false:不顯示，不設定時，預設為顯示 31 pageIndex: pageIndex || 1 32 } 33 getList(); //初始載入就查詢 34 35 //查詢列表資料 36 function getList() { 37 //初始化Paging例項(pageConfig引數也可以為空物件，此時就是預設設定) 38 var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) { 39 var shtml=""; 40 var pageHtml = ""; 41 var readRanking = ""; 42 var origin=""; 43 $.ajax({ 44 url:ENERGY_DATA_BACK_END_DOMAIN+"/api/news/get/"+parent_id, 45 dataType:"json", 46 type: "POST", 47 data:{ 48 "secondClass": second_class, 49 "page":pageIndex, 50 "limit":pageSize, 51 "status" :"1", 52 "title" : article_title 53 }, 54 success: function (result) { 55 if(result.count > 0){ //如果查詢到了資料 56 total= result.count; 57 var data=result.data; 58 //列表顯示 59 for(var i=0;i<data.length;i++){ 60 var href=encodeURI("newsList-item.html?second_class="+second_class+"&id="+data[i].id+"&first="+first+"&title="+title +"&parent_id=" +parent_id +"&page=" +pageIndex); 61 if(data[i].origin == "0"){ 62 origin= '本站原創' ; 63 }if(data[i].origin == "1"){ 64 origin='外站轉發'; 65 } 66 if(data[i].coverImg==null || data[i].coverImg =="" ){ 67 shtml+= '<li style="color:#000;height:90px;">'+ 68 '<div style="float:left;width:680px;margin-top:24px">'+ 69 '<span><a style="color:#000" class="link" target="_blank" href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" title="'+data[i].title+'">'+data[i].title+'</a></span><br>'+ 70 '<div style="float:left;margin-top:3px;color:rgb(132,134,132);font-size:14px">'+ 71 '<img style="float:left;height:10px;margin-top:7px;width:10px;" width="10" src="front/images/second_level/clock.png" alt="clock"/>'+ 72 '<div style="float:left;margin-top:3px;margin-left:3px">'+data[i].publishTime+'</div>'+ 73 '<div style="float:left;margin-top:3px;margin-left:50px;">來源：'+origin+'</div>'+ 74 '</div>'+ 75 '</div>'+ 76 '<div>'+ 77 '<a href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" target="_blank" title="'+data[i].title+'">'+ 78 '<img class="time" style="height:20px;margin-top:44px;margin-left: 40px;width:30px;" src="front/images/second_level/article_arrow.png" alt="article_arrow"/></a>'+ 79 '</div>'+ 80 '</li>'+ 81 '<li class="line" style=" margin:0px;margin-top:0px; padding:0px; font-size:0px; height:2px; overflow:hidden; background:#e5e5e5;"></li>'; 82 }else{ 83 imageNum +=1; 84 var url=ENERGY_FILE_BACK_END_DOMAIN+"/file?fileName="+data[i].coverImg; 85 shtml+= '<li style="margin-top:0px;color: #000;height:90px;">'+ 86 '<div style="float:left;">'+ 87 '<a href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" target="_blank" title="'+data[i].title+'">'+ 88 '<img style="height:80px;margin-top:7px; width:120px" src="'+url+'"/></a>'+ 89 '</div>'+ 90 '<div style="float:left;width:550px;margin-left:10px;margin-top:24px">'+ 91 '<span><a style="color:#000" class="link" target="_blank" href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" title="'+data[i].title+'">'+data[i].title+'</a></span><br>'+ 92 '<div style="float:left;margin-top:3px;color: rgb(132,134,132);font-size:14px">'+ 93 '<img style="float:left;height:10px;margin-top:7px;width:10px" src="front/images/second_level/clock.png" alt="clock"/>'+ 94 '<div style="float:left;margin-top:3px;margin-left:3px">'+data[i].publishTime+'</div>'+ 95 '<div style="float:left;margin-top:3px;margin-left:50px;">來源：'+origin+'</div>'+ 96 '</div>'+ 97 '</div>'+ 98 '<div style="float:left;">'+ 99 '<a href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" target="_blank" title="'+data[i].title+'">'+ 100 '<img class="time" style="height:20px;margin-top:44px;margin-left:40px;width:30px;" src="front/images/second_level/article_arrow.png" alt="article_arrow"/></a>'+ 101 '</div>'+ 102 '</li>'+ 103 '<li class="line" style="margin:0px; padding:0px; font-size:0px; height:2px; overflow:hidden; background:#e5e5e5;"></li>'; 104 } 105 } 106 107 $(".news-list").empty().html(shtml); 108 109 var totalCount = result.count; //返回的總條數 110 var totalPage = Math.ceil(totalCount / pageSize); //根據總條數和每頁條數計算總頁碼數 111 112 // 呼叫Paging例項的 initPage()方法生成分頁DOM結構 113 pageIng.initPage(totalCount, totalPage, pageIndex); 114 $('.page').show(); 115 $('.no-data').hide(); 116 }else{ //如果未查詢到資料 117 $(".news-list").empty().html(''); 118 $('.page').hide(); 119 $('.no-data').show(); 120 } 121 } 122 }) 123 }); 124 } 125 }) 126 </script>
2、HTML
<div style="float:left;width: 820px;padding: 10px 20px;margin-left: 40px"> <div style="height:780px"> <div class="news-list" ></div> </div> <div style="float:left;width: 720px;height:30px;padding: 10px 20px;margin-left: 0px;margin-top:0px;font-size: 18px;color:reg(132,134,132)"> <div class="page-r"> <ul id="page_ul" class="page-ul"></ul> </div> </div> </div>
3、page.js
var tableStyle = ".page {font-size: 14px;background-color: transparent;width: 100%;height: 50px;line-height: 50px;display: none;}"+ ".page .page-l select {width: 60px;height: 30px;}"+ ".page .page-l .page-size-box {display: inline-block;margin-left: 20px;}"+ ".page .page-r {float: right;padding-top: 10px;}"+ ".page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;padding: 0;}"+ ".page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}"+ ".page .page-r ul li a:hover {background-color: #f5f2f2;}"+ ".page .page-r ul li:last-child {border-right: 1px solid #ccc;}"+ ".page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #777;}"+ ".page .page-r ul li a.active {background-color: #09aeb0;color: #fff;}"+ ".page .page-r ul li span {display: block;height: 100%;padding:0 10px;color: #ccc;cursor: not-allowed;}"+ ".page .page-r ul li span.ellipsis {cursor: default;}"; var styleNode = document.createElement('style'); styleNode.innerHTML = tableStyle; var headNode = document.getElementsByTagName('head')[0]; headNode.appendChild(styleNode); function Paging(paramsObj, callback) { this.pageSize = paramsObj.pageSize || 8; //每頁條數（不設定時，預設為10 this.pageIndex = paramsObj.pageIndex || 1; //當前頁碼 this.totalCount = paramsObj.totalCount || 0; //總記錄數 this.totalPage = Math.ceil(paramsObj.totalCount / paramsObj.pageSize) || 0; //總頁數 this.prevPage = paramsObj.prevPage || '<'; //上一頁（不設定時，預設為：<） this.nextPage = paramsObj.nextPage || '>'; //下一頁（不設定時，預設為：>） this.firstPage = paramsObj.firstPage || '<<'; //首頁（不設定時，預設為：<<） this.lastPage = paramsObj.lastPage || '>>'; //末頁（不設定時，預設為：>>） this.degeCount = paramsObj.degeCount || 3; //當前頁前後兩邊可顯示的頁碼個數（不設定時，預設為3） this.ellipsis = paramsObj.ellipsis; //是否顯示省略號不可點選按鈕（true：顯示，false：不顯示） this.ellipsisBtn = (paramsObj.ellipsis == true || paramsObj.ellipsis == null) ? '<li style="float:left;margin-left:20px;"><span class="ellipsis">…</span></li>' : ''; var that = this; $('#page_size').val(this.pageSize); callback && callback(this.pageIndex, this.pageSize); //立即執行回撥函式 // 生成分頁DOM結構 this.initPage = function (totalCount, totalPage, pageIndex) { this.totalCount = totalCount; this.totalPage = totalPage; this.pageIndex = pageIndex; var degeCount = this.degeCount; var pageHtml = ''; //總的DOM結構 var tmpHtmlPrev = ''; //省略號按鈕前面的DOM var tmpHtmlNext = ''; //省略號按鈕後面的DOM var headHtml = ''; //首頁和上一頁按鈕的DOM var endHtml = ''; //末頁和下一頁按鈕的DOM if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前後都需要省略號按鈕 headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>'; endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>'; var count = degeCount; //前後各自需要顯示的頁碼個數 for(var i=0; i<count; i++){ if(pageIndex != 1){ tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>'; } tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>'; } pageHtml = headHtml + this.ellipsisBtn + tmpHtmlPrev + '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+ tmpHtmlNext + this.ellipsisBtn + endHtml; }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前面需要省略號按鈕，後面不需要 headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>'; if(pageIndex == totalPage){ //如果當前頁就是最後一頁 endHtml = '<li style="float:left;margin-left:20px;"><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+ '<li style="float:left;margin-left:20px;"><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>'; }else{ //當前頁不是最後一頁 endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>'; } var count = degeCount; //前需要顯示的頁碼個數 var countNext = totalPage - pageIndex; //後需要顯示的頁碼個數 if(pageIndex != 1){ for(var i=0; i<count; i++){ tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>'; } } for(var i=0; i<countNext; i++){ tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>'; } pageHtml = headHtml + this.ellipsisBtn + tmpHtmlPrev + '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+ tmpHtmlNext + endHtml; }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前面不需要，後面需要省略號按鈕 if(pageIndex == 1){ //如果當前頁就是第一頁 headHtml = '<li style="float:left;margin-left:20px;"><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+ '<li style="float:left;margin-left:20px;"><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>'; }else{ //當前頁不是第一頁 headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>'; } endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>'; var countPrev = pageIndex - 1; //前需要顯示的頁碼個數 var count = degeCount; //後需要顯示的頁碼個數 if(pageIndex != 1){ for(var i=0; i<countPrev; i++){ tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>'; } } for(var i=0; i<count; i++){ tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>'; } pageHtml = headHtml + tmpHtmlPrev + '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+ tmpHtmlNext + this.ellipsisBtn + endHtml; }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){ //前後都不需要省略號按鈕 headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>'; endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>'; if(totalPage == 1){ //如果總頁數就為1 headHtml = '<li style="float:left;margin-left:20px;"><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+ '<li style="float:left;margin-left:20px;"><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>'; endHtml = '<li style="float:left;margin-left:20px;"><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+ '<li style="float:left;margin-left:20px;"><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>'; }else{ if(pageIndex == 1){ //如果當前頁就是第一頁 headHtml = '<li style="float:left;margin-left:20px;"><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+ '<li style="float:left;margin-left:20px;"><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>'; endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>'; }else if(pageIndex == totalPage){ //如果當前頁是最後一頁 headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+ '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>'; endHtml = '<li style="float:left;margin-left:20px;"><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+ '<li style="float:left;margin-left:20px;"><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>'; } } var countPrev = pageIndex - 1; //前需要顯示的頁碼個數 var countNext = totalPage - pageIndex; //後需要顯示的頁碼個數 if(pageIndex != 1){ for(var i=0; i<countPrev; i++){ tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>'; } } for(var i=0; i<countNext; i++){ tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>'; } pageHtml = headHtml + tmpHtmlPrev + '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+ tmpHtmlNext + endHtml; } $('#page_ul').html(pageHtml); $('#total_count').html(totalCount); }; // 點選頁碼（首頁、上一頁、下一頁、末頁、數字頁） $('#page_ul').on('click','a',function (e) { var _this = $(this); var idAttr = _this.attr('id'); var className = _this.attr('class'); if(idAttr == 'first_page'){ //如果是點選的首頁 that.pageIndex = 1; }else if(idAttr == 'prev_page'){ //如果點選的是上一頁 that.pageIndex = that.pageIndex == 1 ? that.pageIndex : that.pageIndex - 1 ; }else if(idAttr == 'next_page'){ //如果點選的是下一頁 that.pageIndex = that.pageIndex == that.totalPage ? that.pageIndex : parseInt(that.pageIndex) + 1; }else if(idAttr == 'last_page'){ //如果點選的是末頁 that.pageIndex = that.totalPage; }else if(className == 'page-number'){ //如果點選的是數字頁碼 that.pageIndex = _this.html(); } /*var state = { title: title, url: window.location.href }; window.history.pushState(state, document.title, window.location.href + "&page=" + that.pageIndex);*/ callback && callback(that.pageIndex, that.pageSize); }); // 改變每頁條數 $('#page_size').change(function () { var _this = $(this); that.pageIndex = paramsObj.pageIndex = 1; that.pageSize = paramsObj.pageSize = _this.val() - 0; callback && callback(that.pageIndex, that.pageSize); }) }
4.效果