解決js中分頁模組,分頁列表,怎麼做
阿新 • • 發佈:2018-11-14
最近工作中在做一個分頁列表的一個東西,要求在js中寫,不多比比,直接上關鍵程式碼
htmlText=htmlText+'<div class="page">'; //重寫分頁列表 //一頁的內容 var pageSize = parseInt(data.pageSize); //總共多少條資料 var total_number = parseInt(data.totalCount); //當前頁 var page = parseInt(data.pageNo); //分頁列表中間夾幾個頁碼 var pageLength = 5; var pageTotal = (total_number % pageSize == 0 ? total_number / pageSize : (total_number - total_number % pageSize) / pageSize + 1); if (pageTotal > 1) { var start = 0; //設定頁碼頭 if ((page - page % pageLength) / pageLength == 0) { start = 1; } else if (page % pageLength == 0 && page / pageLength == 1) { start = 1; } else if (page % pageLength == 0 && page / pageLength > 1) { start = (page / pageLength - 1) * pageLength + 1; } else if ((page - page % pageLength) / pageLength != 0) { start = ((page - page % pageLength) / pageLength) * pageLength + 1; } //進行頭一頁設定 if (page > 1) { htmlText =htmlText+'<a href="javascript:loadMore('+(page-1)+');" class="btn_prev">上一頁</a>'; htmlText =htmlText+'<a href="javascript:loadMore(1);">1</a>'; } else { htmlText =htmlText+'<a href="#" class="btn_prev">上一頁</a>'; htmlText =htmlText+'<a href="#"; class="active">1</a>'; } //前省略號 if (start - pageLength >= 0) { htmlText =htmlText+'<a href="javascript:loadMore('+(start - pageLength)+');" title="'+ (start - pageLength) + '">...</a>'; } //分頁列表 for (var j = (start == pageTotal ? pageTotal - pageLength + 1 : start); j <= (start + pageLength - 1 <= pageTotal ? start + pageLength - 1 : pageTotal); j++) { if(j!=1&&j!=pageTotal){ if (j == page) { htmlText =htmlText+'<a class="active" href="javaScript:loadMore('+ j +')" title="' + j + '">' + j+ '</a>'; } else { htmlText =htmlText+'<a href="javaScript:loadMore(' + j+')" title="' + j + '">' + j+ '</a>'; } } } //省略點 if (pageTotal > start + pageLength - 1) { htmlText =htmlText+'<a href="javaScript:loadMore('+ (start + pageLength) +')" title="'+ (start + pageLength) + '">...</a>'; } //下一頁 if (pageTotal > page) { htmlText =htmlText+'<a href="javaScript:loadMore('+ (pageTotal)+')">'+pageTotal+'</a>'; htmlText =htmlText+'<a href="javaScript:loadMore('+ (page + 1)+')" class="btn_next">下一頁</a>'; } else { htmlText =htmlText+'<a class="active" href="#">'+pageTotal+'</a>'; htmlText =htmlText+'<a href="#" class="btn_next">下一頁</a>'; } } htmlText=htmlText+'</div>';
now,做出來後效果如下