Paginathing.js jquery配置参数
Posted coldfishdt
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Paginathing.js jquery配置参数相关的知识,希望对你有一定的参考价值。
html结构
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">List of item.</h3>
</div>
<ul class="list-group">
<li class="list-group-item"> Your Item 1</li>
<li class="list-group-item"> Your Item 2</li>
<li class="list-group-item"> Your Item 3</li>
<li class="list-group-item"> Your Item 4</li>
<li class="list-group-item"> Your Item 5</li>
<li class="list-group-item"> Your Item 6</li>
</ul>
</div>
在页面中引入jquery和paginathing.js文件
<script src="js/jquery.min.js"></script>
<script src="js/paginathing.js.js"></script>
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery分页插件。对无序列表进行分页,每页显示2条记录。
<script type="text/javascript"> jQuery(document).ready(function($){ $(‘.list-group‘).paginathing({ perPage: 2, containerClass: ‘panel‘ }) }); </script>
JQuery
$(‘.infoUl‘).paginathing({ perPage:20, firstText: ‘首页‘, lastText: ‘末页‘ })
配置参数
perPage:10, //每页显示的记录数
limitPagination: false, //可以是false或一个数值。用于限制分页的页码。.
prevNext: true, //是否允许显示前一页按钮。
firstLast: true, //是否允许显示第一页和最后一页按钮。
prevText: ‘?‘, //前一页按钮上显示的文字。
nextText: ‘?‘, //下一页按钮上显示的文字。
firstText: ‘First‘, //第一页按钮上显示的文字。
lastText: ‘Last‘, //最后一页按钮上显示的文字。
containerClass: ‘pagination-container‘, //容器的class名称
ulClass: ‘pagination‘, //ul元素的class名称
liClass: ‘page‘, //li元素的class名称
activeClass: ‘active‘, //当前分页按钮的class名称
disabledClass: ‘disable‘ //被禁用的分页按钮的class名称
insertAfter: null //键分页传入到指定的元素之后,可以是null,或一个class名称,或一个id
pageNumbers: false //显示总页数,limitPagination参数必须设置true。
分页样式(bootstrap样式)
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination > li {
display: inline;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
/*float: left;*/
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
以上是关于Paginathing.js jquery配置参数的主要内容,如果未能解决你的问题,请参考以下文章