利用JQuery实现分页处理,首先你要了解为什么要分页。分页主要是为了避免一次性从数据库获取大量数据。其次才是为了展示效果。
关键点:第几页 ,每页条数 总行数
效果图:
1、使用的包含文件
<link href="css/Pager.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.pager.js" type="text/javascript"></script>
2、CSS文件内容
#pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}
#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}
#pager ul.pages li:hover {
border:1px solid #003f7e;
}
#pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#eee;
}
#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#eee;
}
3、基础代码
html
<div class="box01_content" style="height:38px;">
<div id="pager" style="float:right;"></div>
</div>
JS
//每页显示数
var recordPerPage=100;
//总条数
var recordSize='';//总条数未知的情况下,先查询总条数,在赋值
var jsonAll;数据源
$(document).ready(function() {
//查询总条数,并赋