自己寫的基於bootstrap的簡單分頁插件
阿新 • • 發佈：2018-04-15
自己寫的基於bootstrap的簡單分頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav aria-label="Page navigation">
<ul class="pagination">
</ul>
</nav>
</body>
<script>
var obj = {
page: 2,
pagesize: 10,
itemcount: 55,
pagecount: 6
}
function loadPage(obj){
var page = obj.page
var pagesize = obj.pagesize
var pagecount = obj.pagecount
var str = "<li> <a href=‘#‘ aria-label=‘Previous‘> <span aria-hidden=‘true‘>«</span> </a> </li>"
if(pagecount<=5){
for(var i=1;i<=pagecount;i++){
if(i == page){
str += "<li class=‘active‘><a href=‘#‘>"+i+"</a></li>"
}else{
str += "<li><a href=‘#‘>"+i+"</a></li>"
}
}
}else{
if(page<=2){
for(var i=1;i<=2;i++){
if(i == page){
str += "<li class=‘active‘><a href=‘#‘>"+i+"</a></li>"
}else{
str += "<li><a href=‘#‘>"+i+"</a></li>"
}
}
str += "<li><a href=‘#‘>...</a></li>"
str += "<li><a href=‘#‘>"+(pagecount-1)+"</a></li>"
str += "<li><a href=‘#‘>"+pagecount+"</a></li>"
}else if(page>2 && page<pagecount-1){
str += "<li><a href=‘#‘>1</a></li>"
str += "<li><a href=‘#‘>2</a></li>"
str += "<li><a href=‘#‘>...</a></li>"
str += "<li class=‘active‘><a href=‘#‘>"+page+"</a></li>"
str += "<li><a href=‘#‘>...</a></li>"
str += "<li><a href=‘#‘>"+(pagecount-1)+"</a></li>"
str += "<li><a href=‘#‘>"+(pagecount)+"</a></li>"
}else{
str += "<li><a href=‘#‘>1</a></li>"
str += "<li><a href=‘#‘>2</a></li>"
str += "<li><a href=‘#‘>...</a></li>"
for(var i=pagecount-1;i<=pagecount;i++){
if(i == page){
str += "<li class=‘active‘><a href=‘#‘>"+i+"</a></li>"
}else{
str += "<li><a href=‘#‘>"+i+"</a></li>"
}
}
}
}
str += "<li> <a href=‘#‘ aria-label=‘Next‘> <span aria-hidden=‘true‘>»</span> </a> </li>"
$(‘.pagination‘).html(str)
}
loadPage(obj)
</script>
</html>自己寫的基於bootstrap的簡單分頁插件