先上效果图
js代码部分
Stringformat = function (string,obj) {
var result = string;
if (arguments.length > 1) {
if (arguments.length == 2 && typeof (obj) == "object") {
for (var key in obj) {
if (obj[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, obj[key]);
}
}
}
else {
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] != undefined) {
//var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题,谢谢何以笙箫的指出
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}
///实际使用时修改此代码
window.gotoPage=function(pageIndex){
showPaginate(pageIndex,pageSize,totalNum);
}
window.showPaginate = function(pageIndex,pageSize,totalNum){
$(".am-pagination-prev").empty();
$(".am-pagination-select-el").empty();
$(".am-pagination-next").empty();
var opts = jQuery.extend({
PageIndex : 0,
PageSize : 0,
link_to: "javascript:void(0)", //兼容
//link_to: "#",
prev_text: "上一页",
next_text: "下一页",
frist_text: "第一页",
last_text: "最后一页",
ellipse_text: "...",
StartPageIndex:0, //从第0页开始的
callback: function () { return false; }
}, opts || {});
var RowCounts = totalNum ;
opts.PageSize = pageSize == 0 ? 20 : pageSize;
opts.CurrentPageIndex = pageIndex == undefined ? opts.StartPageIndex : pageIndex;
opts.RowCounts = RowCounts ? RowCounts : 0;
opts.endPageIndex = (RowCounts / opts.PageSize);
var endindex = parseInt(opts.endPageIndex);//取整
opts.endPageIndex = opts.endPageIndex - endindex > 0 ? endindex + 1 : endindex;//多1行都算一页
opts.leftPageIndex = Math.max(opts.StartPageIndex, opts.CurrentPageIndex - 5); //左边最多显示5页
opts.rightPageIndex = Math.min(opts.endPageIndex,opts.CurrentPageIndex + 5);//右边最多显示5页
if ($(".am-pagination-select-el").data("changeBind") != true) {
$(".am-pagination-select-el").change(function(){
var index = $(this).find(":selected").data("PageIndex");
//if (index == undefined) {
// alert(999);
//}
gotoPage(index);
})
.data("changeBind",true);
}
//$(".am-pagination-prev").append( Stringformat('<a href="javascript:gotoPage({StartPageIndex})">{frist_text}</a> ',opts));
if (opts.CurrentPageIndex > opts.StartPageIndex) {
opts.TmpPageIndex = opts.CurrentPageIndex - 1;
$(".am-pagination-prev").append( Stringformat('<a href="javascript:gotoPage({TmpPageIndex})">{prev_text}</a>',opts));
}else{
$(".am-pagination-prev").append( Stringformat('<a href="javascript:void({TmpPageIndex})">{prev_text}</a>',opts));
}
// 从开始到结束
opts.TmpPageIndex = opts.leftPageIndex;
while ( opts.TmpPageIndex < opts.rightPageIndex )
{
var s = $( Stringformat('<option>{TmpPageIndex}/{endPageIndex}</option>',opts) );
s.data("PageIndex",opts.TmpPageIndex);
$(".am-pagination-select-el").append(s);
opts.TmpPageIndex ++ ;
}
//给当前页加样式数据
$(".am-pagination-select-el").find("option").each(function(){
var PageIndex = $(this).data("PageIndex");
if(PageIndex == opts.CurrentPageIndex){
$(this).attr("selected","selected");
}
});
if (opts.CurrentPageIndex < opts.endPageIndex -1 ) //-1 最后一页就不再下一页了
{
opts.TmpPageIndex = opts.CurrentPageIndex + 1;
$(".am-pagination-next").append(Stringformat('<a href="javascript:gotoPage({TmpPageIndex})">{next_text}</a>',opts));
}else{
$(".am-pagination-next").append(Stringformat('<a href="javascript:void({TmpPageIndex})">{next_text}</a>',opts));
}
//$(".am-pagination-next").append(Stringformat('<a href="javascript:gotoPage({endPageIndex})">{last_text}</a>',opts));
}
html代码部分
<!--更多-->
<ul data-am-widget="pagination" class=" am-pagination am-pagination-select">
<li class="am-pagination-prev ">
<a href="#" class="">上一页</a>
</li>
<li class="am-pagination-select">
<select class="am-pagination-select-el">
<option value="#" class="">1 / 3</option>
<option value="#" class="">2 / 3</option>
<option value="#" class="">3 / 3</option>
</select>
</li>
<li class="am-pagination-next ">
<a href="#" class="">下一页</a>
</li>
</ul>
css部分
取自amazeui.css
/* ==========================================================================
Component: Pagination
============================================================================ */
.am-pagination {
padding-left: 0;
margin: 1.5rem 0;
list-style: none;
color: #999999;
text-align: left;
}
.am-pagination:before,
.am-pagination:after {
content: " ";
display: table;
}
.am-pagination:after {
clear: both;
}
.am-pagination > li {
display: inline-block;
}
.am-pagination > li > a,
.am-pagination > li > span {
position: relative;
display: block;
padding: 0.5em 1em;
text-decoration: none;
line-height: 1.2;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 0;
margin-bottom: 5px;
margin-right: 5px;
}
.am-pagination > li:last-child > a,
.am-pagination > li:last-child > span {
margin-right: 0;
}
.am-pagination > li > a:hover,
.am-pagination > li > span:hover,
.am-pagination > li > a:focus,
.am-pagination > li > span:focus {
background-color: #eeeeee;
}
.am-pagination > .am-active > a,
.am-pagination > .am-active > span,
.am-pagination > .am-active > a:hover,
.am-pagination > .am-active > span:hover,
.am-pagination > .am-active > a:focus,
.am-pagination > .am-active > span:focus {
z-index: 2;
color: #ffffff;
background-color: #0e90d2;
border-color: #0e90d2;
cursor: default;
}
.am-pagination > .am-disabled > span,
.am-pagination > .am-disabled > span:hover,
.am-pagination > .am-disabled > span:focus,
.am-pagination > .am-disabled > a,
.am-pagination > .am-disabled > a:hover,
.am-pagination > .am-disabled > a:focus {
color: #999999;
background-color: #ffffff;
border-color: #dddddd;
cursor: not-allowed;
pointer-events: none;
}
.am-pagination .am-pagination-prev {
float: left;
}
.am-pagination .am-pagination-prev a {
border-radius: 0;
}
.am-pagination .am-pagination-next {
float: right;
}
.am-pagination .am-pagination-next a {
border-radius: 0;
}
.am-pagination-centered {
text-align: center;
}
.am-pagination-right {
text-align: right;
}