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