JPages分页插件的使用

时间:2023-03-10 06:30:46
JPages分页插件的使用

废话不多说,直接上代码.

首先下载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和后端交互后再贴代码