1. 程式人生 > >JS擴充套件:JS生成分頁

JS擴充套件:JS生成分頁

 前端框架: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 var
end = (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 }
分頁函式