欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

JQPAGINATION个性的分页插件

所属栏目:其它代码更新时间:2016-07-03原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


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

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 type="text"readonly="readonly" data-max-page="40"> <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 
文本框中显示的页码样式。如下图
alt=""/>
那么以上显示的参数为默认配置
page_string:'Page {current_page} of {max_page}'
当然你也可以设置成自己的样式,一般情况下我们需要设置成中文显示:
page_string:'当前 {current_page} / {max_page}' 
或者直接数字显示:
alt=""/>
page_string:'{current_page} / {max_page}' 
回调函数
当我们点击页码跳转到相应页时就要用到回调函数了,格式如下:

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




具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JS点击加大/减小字号的代码

2jQuery点击展开与收缩查看更多效果代码

3JqueryPagination分页插件

4一款漂亮方便调用的jQuery前端分页

5JS返回上一页/返回上一页并刷新

6百度404页面JS倒计时返回页面代码

7JS赋值给指定元素的父级元素

8JS实现301跳转的JS代码

9JS拆分文本再组合

10Jquery点击按钮给class设置样式的JS代码