avalon2
Version:
an elegant efficient express mvvm framework
54 lines (51 loc) • 2.53 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>avalon test</title>
<link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">
<script src="../../dist/avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
curPage: 1,
totalPages: 20,
totalItems: 193,
pageItems: [1, 2, 3, 4, 5],
pageSize: 10,
changePage: function (p) {
this.curPage = p;
console.log('curPage:' + this.curPage);
if (this.totalPages <= 5) {
this.pageItems = avalon.range(1, this.totalPages + 1);
} else {
if (this.curPage < 4) {
this.pageItems = avalon.range(1, 6);
} else if (this.curPage > 3 && this.curPage < this.totalPages - 1) {
this.pageItems = avalon.range(this.curPage - 2, this.curPage + 3);
} else {
this.pageItems = avalon.range(this.totalPages - 4, this.totalPages + 1);
}
}
}
})
</script>
</head>
<body>
<div class="am-container" ms-controller="test">
<div class="am-u-md-4">
<p class="am-margin am-text-sm">共 {{@totalItems}} 条记录</p>
</div>
<div class="am-u-md-8">
<ul class="am-pagination am-pagination-right am-text-xs">
<li><a href="javascript:;" ms-click="@changePage(1)">首页</a></li>
<li ms-class="{'am-disabled' : @curPage == 1}"><a href="javascript:;" ms-click="@changePage(@curPage-1)"><span class="am-icon-angle-double-left"></span></a></li>
<li ms-for="el in @pageItems" ms-class="{'am-active' : @curPage == el}" ms-click="@changePage(el)"><a href="javascript:;">{{el}}</a></li>
<li ms-class="{'am-disabled' : @curPage == @totalPages}"><a href="javascript:;" ms-click="@changePage(@curPage+1)"><span class="am-icon-angle-double-right"></span></a></li>
<li><a href="javascript:;" ms-click="@changePage(@totalPages)">尾页</a></li>
</ul>
</div>
</div>
</body>
</html>