Paginationによって作成されたフロントエンドページング機能と連携する
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
border: 0;
padding: 0;
font-size: 13pt;
}
#nav {
height: 40px;
border-top: #060 2px solid;
border-bottom: #060 2px solid;
background-color: #690;
}
#nav ul {
list-style: none;
margin-left: 50px;
}
#nav li {
display: inline;
line-height: 40px;
float: left
}
#nav a {
color: #fff;
text-decoration: none;
padding: 20px 20px;
}
#nav a:hover {
background-color: #060;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="javascript:" onclick="page(1,10);">« 上一页</a></li>
<li><a href="javascript:" onclick="page(1,10);">1</a></li>
<li class="active"><a href="javascript:">2</a></li>
<li><a href="javascript:" onclick="page(3,10);">3</a></li>
<li><a href="javascript:" onclick="page(4,10);">4</a></li>
<li><a href="javascript:" onclick="page(3,10);">下一页 »</a></li>
<li class="disabled controls"><a href="javascript:">当前 <input type="text" value="2"
onkeypress="var e=window.event||this;var c=e.keyCode||e.which;if(c==13)page(this.value,10);"
onclick="this.select();"> / <input type="text" value="10"
onkeypress="var e=window.event||this;var c=e.keyCode||e.which;if(c==13)page(2,this.value);"
onclick="this.select();"> 条，共 40 条</a></li>
</ul>
</body>
</html>