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