废话不多说,直接上代码.
首先下载JPages的js和css包,附上下载地址:http://dl.oschina.net/softfile/jpages/jpages-latest-1385547131115.zip?key=374cfc6cfd08e4cc4423c0e7ac90b7f3。
<link rel="stylesheet" href="jPages.css">
<script src="jquery.min.js"></script>
<script src="jPages.js"></script>
如果要使用 CSS3 动画效果,还需要添加以下样式文件
<link rel="stylesheet" href="animate.css">
之后在页面中添加要分页的内容,如
<!-- 用于呈现分页控件的地方 -->
<div class="holder"></div>
<!-- 要分页的内容 -->
<ul id="itemContainer">
<li>...</li>
<li>...</li>
...
</ul>
此处的ui可以换成table。
最后初始化插件
$("div.holder").jPages({
containerID : "tab_body", //显示数据所在的块的ID
first: '首页',
last: '尾页',
previous: '上页',
next : '下页',
perPage : 10, //每页显示数据为多少行
startPage: 1, //起始页
startRange : 2, //开始页码为2个
midRange : 3, //最多显示几个页码页码,其余用..代替 e
ndRange: 2, //结束页码为2个
keyBrowse : true
});
OK,这而只是做了一个前端的分页,没有使用ajax和后端交互,下次使用ajax和后端交互后再贴代码