<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>翻頁</title>
</head>
<body>
<div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-1" style="margin-top: 10px;font-size: 14px">
<span class="layui-laypage-limits">
<select lay-ignore="" style="height: 25px" class="pageSizeSelect">
<option value="10" selected >10 條/頁</option>
<option value="20">20 條/頁</option>
<option value="30">30 條/頁</option>
<option value="40">40 條/頁</option>
<option value="50">50 條/頁</option>
</select>
</span>
<a href="javascript:" class="layui-laypage-first" data-page="0">首頁</a>
<a href="javascript:" class="layui-laypage-pre" data-page="2">上一頁</a>
<a href="javascript:" class="layui-laypage-next" data-page="2">下一頁</a>
<a href="javascript:" class="layui-laypage-last" data-page="2">末頁</a>
<span class="layui-laypage-count">共 120 條</span>
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var currentPage = 1;
var pageSize = 10;
var total = 135;
var totalsize = 1;
$(function() {
sufa();
})
$(".layui-box").delegate(".pageNumber","click",function () {
var no = parseInt($(this).attr("data"));
currentPage = no;
sufa();
})
$(".pageSizeSelect").on('change',function(){
pageSize = parseInt($(this).find("option:selected").val());
currentPage = 1;
sufa();
})
$(".layui-laypage-first").on('click',function(){
if(currentPage != 1) {
currentPage = 1;
sufa();
}
})
$(".layui-laypage-pre").on('click',function(){
if(currentPage != 1) {
currentPage = currentPage-1;
sufa();
}
})
$(".layui-laypage-next").on('click',function(){
if(currentPage != totalsize) {
currentPage = currentPage+1;
sufa();
}
})
$(".layui-laypage-last").on('click',function(){
if(currentPage != totalsize) {
currentPage = totalsize;
sufa();
}
})
function sufa() {
var aa = [];
aa.push(currentPage);
totalsize = Math.ceil(total/pageSize);
for(var i=1 ;i<5;i++) {
var a= currentPage+i;
var b= currentPage-i;
if(aa.length < 5) {
if(a<=totalsize) aa.push(a);
if(b>0) aa.push(b);
}
}
aa.sort(function compare(val1,val2){return val1-val2;});
var content = "";
for(var i=0 ;i<aa.length;i++) {
if(aa[i] == currentPage) {
content += "<a class=\"pageNumber aaa\" href='#' data='"+aa[i]+"'>"+aa[i]+"</a>";
}else {
content += "<a class=\"pageNumber\" href='#' data='"+aa[i]+"'>"+aa[i]+"</a>";
}
}
$(".pageNumber").remove();
$(".layui-laypage-pre").after(content);
}
})
</script>
<style>
.layui-box a {
padding: 5px 10px;
text-decoration-line:none;
background-color: #f4f4f5;
margin-left: 5px;
color: #606266;
border-radius: 2px;
}
.layui-box .aaa {
background-color: #58C7C7;
color: #fff;
}
</style>
</body>
</html>
