一个简单的jQuery分页插件

#简介 一个简单的jQuery分页插件。主要有两种分页方法：

#使用方法 引入"jquery.pages.css"(样式根据自己主题自行修改)

<link href="./css/jquery.pages.css" rel="stylesheet">

引入jQuery和jquery.pages插件，如图：

<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src="./js/jquery.pages.js"></script> 初始化参数

初始化分页插件：

$(function(){ //init page plugin $("div.page").pages({ url: '', type: 'static', dataCount: 0, pageLimit: 20, labelCount: 10, lang: { total: '共 ', records_desc: '条数据 本页 ', item: ' 条，', page: ' 页' }, callback: function(/*arguements*/){} }); });

#####参数说明：

###对本地数据进行分页显示

必须参数 type,dataCount,callback 返回当前的页码

如接收分页内容的元素为：

<div class="page"></div>

则本地分页初始化代码如下：

var dataCount = 100, pageLimit = 20; $("div.page").pages({ type: 'static', dataCount: dataCount, pageLimit: pageLimit, callback: function(pageno){ showdata(pageno) } });

查看在线演示

###对服务器数据进行分页显示

必须参数 dataCount,callback 返回Ajax的返回数据，及分页插件对象本身

如接收分页内容的元素为：

<div class="page"></div>

则Ajax分页初始化代码如下：

var dataCount = 100, pageLimit = 20; $("div.page").pages({ url: 'http://nblog.9451.com/getList.php', //可选，不传则使用当前页的地址 dataCount: dataCount, pageLimit: pageLimit, callBack: function(res, page){ res = JSON.parse(res); showdata(res.list); } });

如果使用php+smarty 先获取第一页的数据和总的数据条数，否则要自己先获取第一页的数据和数据总数来初始化分页插件

查看在线演示 (可打开调试工具观察请求URL)

#插件属性

#插件方法

#兼容 IE9+ 包括IE9，其他浏览器低版本未测试。低版本自己扩展indexOf等函数后可使用。