简单分页控件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单分页控件相关的知识，希望对你有一定的参考价值。
demo.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- 自有CSS -->
<link href="static/css/plugin/ys_pagination.css" rel="stylesheet">
</head>
<body>
<div id="pagination"></div>
<!-- 第三方js -->
<script src="static/dist/js/jquery-1.11.3.min.js"></script>
<!-- 自有plugins -->
<script src="static/js/plugin/ys_pagination.js"></script>
<script>
$("#pagination").ysPagination({
totalPageCount:200,
callback:function(pageNo){
console.log("retrieve the data for pageNo : "+pageNo);
}
});
</script>
</body>
</html>ys_pagination.css
.ys-pagination .ys-pagination-slices{
font-size:0;
float:left;
}
.ys-pagination .ys-pagination-slices a{
display:inline-block;
min-width:30px;
height:30px;
text-decoration: none;
line-height:30px;
text-align: center;
color:#222;
cursor:pointer;
border:1px solid #ccc;
font-size:12px;
margin-right:10px;
}
.ys-pagination .ys-pagination-slices a:hover{
background-color:#eaeaea;
}
.ys-pagination .ys-pagination-slices a.active{
color:#fff;
background-color: #e64e4d;
border: 1px solid #e64e4d;
}
.ys-pagination .ys-pagination-slices a.next-page{
padding:0 10px;
}
.ys-pagination .ys-pagination-slices span{
display:inline-block;
vertical-align: text-bottom;
font-size:12px;
margin-right:10px;
}
.ys-pagination .ys-pagination-navigation{
height: 30px;
float:left;
font-size:12px;
line-height: 30px;
color: #999;
}
.ys-pagination .ys-pagination-navigation input{
width:50px;
height:30px;
border:1px solid #ccc;
padding-left:8px;
color:#999;
margin:0 10px;
}
.ys-pagination .ys-pagination-navigation a.go{
display:inline-block;
width:50px;
height:30px;
background-color:#eaeaea;
color:#999;
line-height:30px;
text-decoration: none;
text-align: center;
cursor:pointer;
margin:0 0 0 10px;
}ys_pagination.js
(function($){
var defaultSettings = {
displayEntryCount: 4,// 连续分页主体部分显示的分页条目数
edgeEntryCount: 2, //两侧显示的首尾分页的条目数
totalPageCount:50, // 页面总数
currentPageNo:1, // 当前页面
callback:function(pageNo){ // 点击之后的回调函数
console.log("callback:"+pageNo);
}
};// 默认设置
// 添加隐藏的
function renderPagination(container,settings){
var totalPageCount = settings.totalPageCount;
var currentPageNo = settings.currentPageNo;
var slicesHtml = "<div class=‘ys-pagination-slices‘> "+
" <a class=‘active‘>1</a> "+
" <a>2</a> "+
" <a>3</a> "+
" <a>4</a> "+
" <a>5</a> "+
" <span>...</span> "+
" <a>10</a> "+
" <a class=‘next-page‘>下一页</a> "+
"</div> ";
var navigationHtml = "<div class=‘ys-pagination-navigation‘>"+
" <span>共"+totalPageCount+"页</span>"+
" <span>去第</span> "+
" <input type=‘text‘/> "+
" <span>页</span> "+
" <a class=‘go‘>跳转</a> "+
"</div> ";
$(container).html(slicesHtml+navigationHtml); // 渲染分页区域
$(container).addClass("ys-pagination");
renderPaginationSlicesHtml(currentPageNo,container,settings);
$(container).find("input").val(currentPageNo);
}
function generateSliceItem(currentPageNo,index){
if(index==currentPageNo){
return "<a class=‘active‘ data-index=‘"+index+"‘>"+index+"</a>";
}
return "<a data-index=‘"+index+"‘>"+index+"</a>";
}
function renderPaginationSlicesHtml(currentPageNo,container,settings){
var slicesHtml = "";
var displayEntryCount = settings.displayEntryCount;
var edgeEntryCount = settings.edgeEntryCount;
var totalPageCount = settings.totalPageCount;
if(totalPageCount<=edgeEntryCount*2+displayEntryCount){
for(var i=1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}else if(currentPageNo<=edgeEntryCount+parseInt(displayEntryCount/2)){ // 连续分页主体部分紧连首分页
for(var i=1;i<=edgeEntryCount+displayEntryCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+="<span>...</span>";
for(var i=totalPageCount-edgeEntryCount+1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}else if(currentPageNo>=totalPageCount-(edgeEntryCount+displayEntryCount-parseInt(displayEntryCount/2)-1)){// 连续分页主体部分紧连尾分页
for(var i=1;i<=edgeEntryCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+="<span>...</span>";
for(var i=totalPageCount-edgeEntryCount-displayEntryCount+1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}else{
for(var i=1;i<=edgeEntryCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+="<span>...</span>";
// main body ...
for(var i=currentPageNo-parseInt(displayEntryCount/2);i<=currentPageNo+displayEntryCount-parseInt(displayEntryCount/2)-1;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+="<span>...</span>";
for(var i=totalPageCount-edgeEntryCount+1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}
//var slicesHtml = "<a class=‘active‘>1</a> "+
// "<a>2</a> "+
// "<a>3</a> "+
// "<a>4</a> "+
// "<a>5</a> "+
// "<span>...</span> "+
// "<a>10</a> "+
// "<a class=‘next-page‘>下一页</a> ";
slicesHtml+="<a class=‘next-page‘>下一页</a>";
$(container).find(".ys-pagination-slices").html(slicesHtml);
}
/* 事件绑定 */
function bindEventHandlers(container,settings){
var callback = settings.callback;
// 绑定a点击事件
$(container).on("click",".ys-pagination-slices a:not(.next-page)",function(e){
e.preventDefault();
e.stopPropagation();
$(container).find(".ys-pagination-slices a").removeClass("active");
$(this).addClass("active");
var pageNo = parseInt($(this).attr("data-index"));
renderPaginationSlicesHtml(pageNo,container,settings);
$(container).find("input").val(pageNo);
callback(pageNo);
});
// 绑定下一页点击事件
$(container).on("click",".ys-pagination-slices a.next-page",function(e){
e.preventDefault();
e.stopPropagation();
var pageNo = parseInt($(container).find("a.active").attr("data-index"));
if(pageNo<settings.totalPageCount){
pageNo++;
}
$(container).find(".ys-pagination-slices a").removeClass("active");
$(container).find(".ys-pagination-slices a[data-index="+pageNo+"]").addClass("active");
renderPaginationSlicesHtml(pageNo,container,settings);
$(container).find("input").val(pageNo);
callback(pageNo);
});
$(container).on("keypress","input",function(e){
e.stopPropagation();
if(e.keyCode<48||e.keyCode>57){
e.preventDefault();
}
});
$(container).on("click","a.go",function(e){
e.stopPropagation();
e.preventDefault();
var pageNo = $(container).find("input").val();
pageNo = parseInt(pageNo);
$(container).find(".ys-pagination-slices a").removeClass("active");
$(container).find(".ys-pagination-slices a[data-index="+pageNo+"]").addClass("active");
renderPaginationSlicesHtml(pageNo,container,settings);
callback(pageNo);
});
}
var options = {
ysPagination:function(settings) {
var mergedSettings = {};
$.extend(mergedSettings,defaultSettings,settings);
renderPagination(this,mergedSettings);
bindEventHandlers(this,mergedSettings);
}
};
$.fn.extend(options);
})(jQuery);
以上是关于简单分页控件的主要内容，如果未能解决你的问题，请参考以下文章