Bootstrap本身的分页只具备外形,现在我们为它能够更好的使用添加了一些简单的JavaScript代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<!-- Bootstrap核心CSS文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件,在bootstrap.min.js之前引入 -->
<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- 使得分页导航能够正确的使用 -->
<script type="text/javascript">
function action(id)
{
var totalPage = 20;//分页的总页数
var movePage = 0;
var newRelativePage = document.getElementById(id).name;
var newAbsolutePage = document.getElementById(id).innerHTML;
var array = new Array(4,3,2,1,0);
if(newRelativePage == "previous" )
{
for(var i = 1;i <=5;i ++)
{
document.getElementById('li'+i).innerHTML = "<a href=\"#\" id=\"page"+i+"\" name=\""+i+"\" οnclick=\"action(this.id);\">"+i+"</a>";
}
}else if (newRelativePage == "next")
{
for(var i = 1;i <=5;i ++)
{
var resultPage = parseInt(totalPage) - parseInt(array[i-1]);
document.getElementById('li'+i).innerHTML = "<a href=\"#\" id=\"page"+resultPage+"\" name=\""+resultPage+"\" οnclick=\"action(this.id);\">"+resultPage+"</a>";
}
}else
{
if(newRelativePage == 1)
{
}else
{
movePage = newRelativePage - 1;
for(var i = 1;i <=5;i ++)
{
var resultPage = parseInt(movePage) + parseInt(i);
if(resultPage <= 20)
{
document.getElementById('li'+i).innerHTML = "<a href=\"#\" id=\"page"+resultPage+"\" name=\""+resultPage+"\" οnclick=\"action(this.id);\">"+resultPage+"</a>";
}else
{
document.getElementById('li'+i).innerHTML = "<a href=\"#\" id=\"page"+resultPage+"\" name=\""+resultPage+"\" οnclick=\"action(this.id);\""+" class=\"btn btn-link disabled\">"+resultPage+"</a>";
}
}
}
};
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav>
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous" name="previous" id="previous" οnclick="action(this.id);">
<span aria-hidden="true">«</span>
</a>
</li>
<li id="li1">
<a href="#" id="page1" name="1" οnclick="action(this.id);">1</a>
</li>
<li id="li2">
<a href="#" id="page2" name="2" οnclick="action(this.id);">2</a>
</li>
<li id="li3">
<a href="#" id="page3" name="3" οnclick="action(this.id);">3</a>
</li>
<li id="li4">
<a href="#" id="page4" name="4" οnclick="action(this.id);">4</a>
</li>
<li id="li5">
<a href="#" id="page5" name="5" οnclick="action(this.id);">5</a>
</li>
<li>
<a href="#" aria-label="Next" name="next" id="next" οnclick="action(this.id);">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>