自定义分页插件
js:
(function(){
var $options = null;
var $containerObj = null;
$.fn.customedPagination = function(options){
$containerObj = $(this);
var $defaults = {
pageNum:1,//当前页索引
pageSize:10,//页大小 每页显示条数
displayNum:7,//可视区域内可选择的页数
total:0,//总条目数
onSelectPage:function(pageNum,pageSize){
//alert("pageNum: " + pageNum + "; pageSize: " + pageSize);
}
};
$options = $.extend($defaults,options);
var htmlStr = getHtmlStr();
$containerObj.html(htmlStr);
};
function getHtmlStr(){
var $total = parseInt($options.total);
var $pageSize = parseInt($options.pageSize);
var $pageNum = parseInt($options.pageNum);
var $displayNum = parseInt($options.displayNum);
var $halfDisplayNum = parseInt($displayNum/2);
var $totalPageNum = Math.ceil($total/($pageSize*1.0));
var htmlStr = '<ul>';
if($total == 0){
htmlStr += '<li class="prevCls disabledCls"><a href="javascript:void(0);"><<</a></li>';
htmlStr += '<li class="nextCls disabledCls"><a href="javascript:void(0);">>></a></li>';
}else{
var startNum = $pageNum-$halfDisplayNum;
if(startNum<1){
startNum = 1;
};
var endNum = $pageNum + $halfDisplayNum;
//alert("endNum: " + endNum + "; $totalPageNum: " + $totalPageNum);
if(endNum > $totalPageNum){
endNum = $totalPageNum;
if($totalPageNum >= $displayNum){//尽可能显示多的页数
startNum = $totalPageNum - $displayNum + 1;
}
}
//alert("startNum: " + startNum + "; endNum: " + endNum);
if(startNum == 1){
htmlStr += '<li class="prevCls disabledCls"><a href="javascript:void(0);"><<</a></li>';
}else{
htmlStr += '<li class="prevCls"><a class="prevPageLinkCls" href="javascript:void(0);"><<</a></li>';
}
for(var i=startNum; i<=endNum; i++){
if(i == $pageNum){
htmlStr += '<li class="selectedPageCls"><a href="#">' + i + '</a></li>';
}else{
htmlStr += '<li><a class="pageLinkCls" href="javascript:void(0);">' + i + '</a></li>';
}
}
if(endNum == $totalPageNum){
htmlStr += '<li class="nextCls disabledCls"><a href="javascript:void(0);">>></a></li>';
}else{
htmlStr += '<li class="nextCls"><a class="nextPageLinkCls" href="javascript:void(0);">>></a></li>';
}
}
htmlStr += '</ul>';
return htmlStr;
}
//点击页码
$(document).on('click','a.pageLinkCls',function(){
var clickPageNumber = this.innerText;
$options.pageNum = clickPageNumber;
var htmlStr = getHtmlStr();
$containerObj.html(htmlStr);
$options.onSelectPage($options.pageNum,$options.pageSize);
});
//点击上一页
$(document).on('click','a.prevPageLinkCls',function(){
var tempPageNum = $options.pageNum;
if(tempPageNum>1){
$options.pageNum = tempPageNum - 1;
}
var htmlStr = getHtmlStr();
$containerObj.html(htmlStr);
});
//点击下一页
$(document).on('click','a.nextPageLinkCls',function(){
var tempPageNum = $options.pageNum;
var $total = parseInt($options.total);
var $pageSize = parseInt($options.pageSize);
var $totalPageNum = Math.ceil($total/($pageSize*1.0));
if(tempPageNum<$totalPageNum){
$options.pageNum = tempPageNum + 1;
}
var htmlStr = getHtmlStr();
$containerObj.html(htmlStr);
});
})();
css:
.customed-pagination-cls ul li{
float:left; /*列表横向显示*/
list-style:none;
width:35px;
height:35px;
border:1px solid #ddd;
display: -webkit-flex; /* Safari */
display: flex;/*弹性布局*/
justify-content:center;
align-items:Center;
}
.customed-pagination-cls ul li a{
text-decoration:none;
color:#337ab7;
}
.customed-pagination-cls ul li.prevCls, .customed-pagination-cls ul li.nextCls{
font-size:10px;
}
.customed-pagination-cls ul li.disabledCls{
background-color:#ccc;
}
.customed-pagination-cls ul li.disabledCls a{
color:#fff;
}
/*选中的li*/
.customed-pagination-cls ul li.selectedPageCls{
background-color:#286090;
color:#fff;
}
.customed-pagination-cls ul li.selectedPageCls a{
color:#fff;
}
测试页面html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>分页组件测试</title>
<!-- customedPagination.css -->
<link rel="stylesheet" th:href="@{/css/customedPlugins/customedPagination.css}" />
<style type="text/css">
</style>
</head>
<body>
<!-- class="datetimeInputCls" -->
<div id="testPaginationDIV" style="float:right;" class="customed-pagination-cls">
</div>
<!--[if !IE]><!-->
<script th:src="@{/jquery/2.1.4/jquery-2.1.4.min.js}"></script>
<!--<![endif]-->
<!--[if IE]><!-->
<script th:src="@{/jquery/1.11.0/jquery-1.11.0.min.js}"></script>
<!--<![endif]-->
<script th:src="@{/js/customedPlugins/customedPagination.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
$("#testPaginationDIV").customedPagination({
total:100,
<!-- 根据选中页号和页面大小编写页号点击事件 -->
onSelectPage:function(pageNum,pageSize){
alert("pageNum: " + pageNum + "; pageSize: " + pageSize);
}
});
/*]]>*/
</script>
</body>
</html>