jquery外掛--分頁器
阿新 • • 發佈：2018-11-26
1. 分頁器效果：
2.js程式碼
//定義分頁器 (function($){ $.fn.extend({ cxPagination: function (options) { var obj = this; if (!options) { console.error("pagination options is undefined!"); return false; } if (options['totalCount'] == undefined ) { console.error(" totalCount in pagination options is undefined!"); return false; } var defaults = { currentNumber: 1, pageSize: 15, pageSizeArr: [10, 15, 20], onSelectPage:function(pageNumber,pageSize){ console.log("onSelectPage pageNumber: "); console.log(pageNumber); console.log("pageSize: "); console.log(pageSize); }, onChangePageSize:function(pageNumber,pageSize){ console.log("onChangePageSize pageNumber: "); console.log(pageNumber); console.log("pageSize: "); console.log(pageSize); }, }; var settings = $.extend(defaults, options); var onSelectPage = settings.onSelectPage; var onChangePageSize = settings.onChangePageSize; var pageSize = settings.pageSize; var pageSizeArr = settings.pageSizeArr; var totalCount = settings['totalCount']; var currentNumber = settings['currentNumber']; var totalPageNumber = parseInt(totalCount/pageSize); if(totalCount%pageSize > 0){ totalPageNumber += 1; } if(totalCount <= 0){ $(this).html(""); return; } if(currentNumber <= 0 ){ currentNumber = 1; } if(currentNumber > totalPageNumber){ currentNumber = totalPageNumber; } var startNumber = currentNumber - 2; var endNumber = currentNumber + 2; var isFirstPage = (currentNumber == 1); var isLastPage = (currentNumber == totalPageNumber); var paginationHtml = '<nav aria-label="Page navigation" style="float:right;font-size:13px;">'; paginationHtml += '<ul class="pagination">'; paginationHtml += '<li><span style="margin-right:5px;border:0;">共<span>' + totalPageNumber + "</span>頁/" + totalCount + "條</span></li>"; if (isFirstPage) { paginationHtml += '<li>' + '<span aria-hidden="true">«</span></li>'; } else { paginationHtml += '<li><a href="javascript:void(0);" aria-label="Previous">' + '<span aria-hidden="true">«</span>' + '</a></li>'; } if (totalPageNumber > 0 && totalPageNumber <= 7) { for (var i = 1; i <= totalPageNumber; i++) { if(i == currentNumber){ paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>'; }else { paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>'; } } } else if (totalPageNumber > 7) { if (currentNumber <= 5) { for (var i = 1; i <= 7; i++) { if(i == currentNumber){ paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>'; }else { paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>'; } } paginationHtml += '<li><a href="javascript:void(0);">...</a></li>'; } else if (currentNumber > 5 && currentNumber < totalPageNumber - 3) { paginationHtml += '<li><a href="javascript:void(0);">1</a></li>' + '<li><a href="javascript:void(0);">2</a></li>' + '<li><a href="javascript:void(0);">...</a></li>'; for (var i = startNumber; i <= endNumber; i++) { if(i == currentNumber){ paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>'; }else { paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>'; } } paginationHtml += '<li><a href="javascript:void(0);">...</a></li>'; } else if (currentNumber >= totalPageNumber - 3 && currentNumber <= totalPageNumber) { paginationHtml += '<li><a href="javascript:void(0);">1</a></li>' + '<li><a href="javascript:void(0);">2</a></li>' + '<li><a href="javascript:void(0);">...</a></li>'; for (var i = startNumber; i <= totalPageNumber; i++) { if(i == currentNumber){ paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>'; }else { paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>'; } } } } if (isLastPage) { paginationHtml += '<li>' + '<span aria-hidden="true">»</span></li>'; } else { paginationHtml += '<li><a href="javascript:void(0);" aria-label="Next">' + '<span aria-hidden="true">»</span>' + '</a></li>'; } paginationHtml += '<li><select style="margin-left:5px;border: 1px solid #ddd;padding: 6px 12px;' + 'border-radius: 4px;float:left;">'; $.each(pageSizeArr, function(index, ele){ if(ele == pageSize){ paginationHtml += '<option selected value="' + ele + '">' + ele + '條/頁</option>'; }else { paginationHtml += '<option value="' + ele + '">' + ele + '條/頁</option>'; } }); paginationHtml += '</select></li>'; paginationHtml += '<li style="margin-left:10px;">跳至<input style="width: 40px;text-align: center;border-radius: 4px;border: 1px solid #ddd;' + 'margin: 0px 5px;line-height:24px;" id="pageNumberInput" value="' + currentNumber + '"/>頁 ' + '<button class="btn btn-default" style="padding: 4px 8px;font-size: 13px;margin-left: 5px;">確定</button></li>'; paginationHtml += '</ul></nav>'; $(this).html(paginationHtml); $(this).find("li").on('click',function(){ var linkArr = $(this).find("a"); if(linkArr && linkArr.length > 0){ var linkText = linkArr[0].innerText; //點選的是頁碼時 if(notNegativeIntegerNumber(linkText)){//點選的是頁數 //$(".pagination").find("li").removeClass("active"); //$(this).addClass("active"); currentNumber=linkText; //頁碼 頁大小改變時 重新載入渲染分頁器 obj.cxPagination({ totalCount:totalCount, currentNumber:currentNumber, pageSize:pageSize }); onSelectPage(currentNumber, pageSize); }else{ var ariaLabel = linkArr[0].getAttribute("aria-label"); console.log("ariaLabel: " + ariaLabel); //點選的是上一頁或下一頁按鈕時 if(ariaLabel) { if (ariaLabel == "Previous") { currentNumber = currentNumber - 1; //onSelectPage(currentNumber, pageSize); } else if (ariaLabel == "Next") { currentNumber = currentNumber + 1; //onSelectPage(currentNumber, pageSize); } //頁碼 頁大小改變時 重新載入渲染分頁器 obj.cxPagination({ totalCount: totalCount, currentNumber: currentNumber, pageSize: pageSize }); onSelectPage(currentNumber, pageSize); } } } }); //pageSize change事件 $(this).find("li>select").on('change',function(e){ var newPageSize = e.target.value; console.log("newPageSize: " + newPageSize); pageSize = newPageSize; //重新計算頁數 totalPageNumber = parseInt(totalCount/pageSize); if(totalCount%pageSize > 0){ totalPageNumber += 1; } //$("#totalPageNumber").html(totalPageNumber); if(currentNumber > totalPageNumber){ currentNumber = totalPageNumber ; } //頁碼 頁大小改變時 重新載入渲染分頁器 obj.cxPagination({ totalCount:totalCount, currentNumber:currentNumber, pageSize:pageSize }); onChangePageSize(currentNumber,newPageSize); }); //跳轉頁面點選事件 $(this).find("li>button").on('click',function(e){ var newPageNumber = $("#pageNumberInput").val(); console.log("newPageNumber: " + newPageNumber); if(newPageNumber == "" || newPageNumber == currentNumber){ return false; } if(newPageNumber > totalPageNumber){ newPageNumber = totalPageNumber; } currentNumber = newPageNumber; //頁碼改變時 重新載入渲染分頁器 obj.cxPagination({ totalCount:totalCount, currentNumber:currentNumber, pageSize:pageSize }); onSelectPage(currentNumber, pageSize); }); } }); }(jQuery));
3. HTML程式碼 以及 呼叫程式碼
## 分頁器
<div id="pp">
</div>$(document).ready(function(){
//分頁器
$("#pp").cxPagination({
totalCount:100,
currentNumber:5,
pageSize:15
});
});