个性的分页插件-JQPAGINATION

jqPagination 为我们提供了一种全新的分页方式，传统的分页是一系列的数字页码，而 jqPagination 则是采用了交互式的文本框来显示类似“Page 1 of 5”的页码。当我们选中文本框的时候，我们可以在文本框中输入指定的页码并跳转到该页。并且为保证我们输入正确的页码（大于1并小于等于最大页码），当我们输入的页码超出了范围时就仍然停留在之前的页面中。文本框的两边有“首页”“上一页”“下一页”和“末页”的链接。

插件信息

官网： http://beneverard.github.com/jqPagination/

Demo：http://beneverard.github.com/jqPagination/#demo

预览图

使用步骤

1、引入以下的js和css文件

< link rel = "stylesheet" href = "./css/jqpagination.css" > < script src = "./js/jquery-1.7.2.min.js" ></ script > < script src = "./js/jquery.jqpagination.js" ></ script >

2、在head标签中加入以下js代码

$('.pagination').jqPagination({      paged: function(page) {          // 分页事件      } });

3、在body标签中加入以下格式的html代码

< div class = "pagination" >      < a href = "#" class = "first" data-action = "first" >?</ a > < a href = "#" class = "previous" data-action = "previous" >?</ a > < input readonly = "readonly" data-max-page = "40" type = "text" > < a href = "#" class = "next" data-action = "next" >?</ a > < a href = "#" class = "last" data-action = "last" >?</ a > </ div >

参数配置

current_page 
初始化设置当前的页码，默认值为：1
max_page
设置最大的页数，这个往往是从数据库中读取的数据的 count 总数来填充的
page_string 
文本框中显示的页码样式。如下图

那么以上显示的参数为默认配置
page_string：'Page {current_page} of {max_page}'
当然你也可以设置成自己的样式，一般情况下我们需要设置成中文显示：
page_string：'当前 {current_page} / {max_page}' 
或者直接数字显示：

page_string：'{current_page} / {max_page}' 
回调函数
当我们点击页码跳转到相应页时就要用到回调函数了，格式如下：

paged: function(page) {      //点击页码要做的操作          //如果是无刷新分页的话，就可以写成 getDataByPage(page) 这里 getDataByPage 是一个从服务端获取指定页数据的方法          //如果是一般动态页或者是静态页的话，就直接跳转到相应的页面   location.href="view.aspx?id="+page  或者 location.href="view-"+page+".html" }

下载地址

官方下载： https://github.com/beneverard/jqPagination/zipball/master