JS擴充套件:JS生成分頁
阿新 • • 發佈:2018-11-16
前端框架:bootstrap
1 /** 2 ** 分頁函式 3 ** 引數:page=頁數,totalPage=總頁數 4 ** 返回值:html字串 5 **/ 6 function LoadPage(page, totalPage) { 7 var htmlPage = '<div style="text-align:center;"> <ul class="pagination">'; 8 //分頁函式上一頁 9 if (page == 1) { 10 htmlPage += '<li class="disabled"><a href="javascript:void(0);">上一頁</a></li>'; 11 } else { 12 htmlPage += '<li><a href="#" onclick="onPage(' + (page - 1) + ')">上一頁</a></li>';13 } 14 //首頁 15 if (page > 5) { 16 htmlPage += '<li><a style="width:60px;" href="#" onclick="onPage(' + 1 + ')">1...</a></li>'; 17 } 18 //頁數 19 var start = page > 4 ? page - 4 : 1; 20 varend = (totalPage - start) > 8 ? start + 8 : totalPage; 21 for (var i = start; i <= end; i++) { 22 if (i == page) { 23 htmlPage += '<li class="active"><a href="javascript:void(0);">' + i + '</a></li>'; 24 } else { 25 htmlPage += '<li><a href="#" onclick="onPage(' + i + ')">' + i + '</a></li>'; 26 } 27 } 28 //總頁數 29 if (end != totalPage) { 30 htmlPage += '<li><a style="width:60px;" href="#" onclick="onPage(' + totalPage + ')">...' + totalPage + '</a></li>'; 31 } 32 //下一頁 33 if (page == totalPage) { 34 htmlPage += '<li class="disabled"><a href="javascript:void(0);">下一頁</a></li>'; 35 } else { 36 htmlPage += '<li><a href="#" onclick="onPage(' + (page + 1) + ')">下一頁</a></li>'; 37 } 38 htmlPage += '</ul></div>'; 39 return htmlPage; 40 }