好用的jquery分页插件 kkpager

今天用到用到一个jQuery的分页插件 简单好用分享给大家 先看看效果吧这里写图片描述
需要的类库请到[http://www.jq22.com/jquery-info2705]下载
这个插件用起来非常简单
第一步 引入相应的库文件
这里写图片描述
第二部 做相应的配置 直接看代码吧

<script>
        function getParameter(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r!=null) return unescape(r[2]); return null;
        }
        //init
        $(function() {
            var totalPage = 20;     //这里的总页数可以动态加载
            var totalRecords = 390;
            var pageNo = getParameter('pno');
            if (!pageNo) {
                pageNo = 1;
            }
            //生成分页
            //有些参数是可选的,比如lang,若不传有默认值
            kkpager.generPageHtml({
                pno: pageNo,
                //总页码
                total: totalPage,
                //总数据条数
                totalRecords: totalRecords,
                mode: 'click',                  //默认值是link,可选link或者click
                //这里的click就是给每一个页签绑定的click事件 可以写一些自定义的方法在里面 若想在点击时把页码传给后台也可以写在这里
                click: function (n) {         // n就是页码
                    //手动选中按钮
                    this.selectPage(n);
                    // 把页码传给后台
                    /*$.ajax({
                        url:"",
                        data:{"pageNum":n},
                        success:function (data){}
                    });*/
                    return false;
                }
            })
            /*
             ,lang: {
             firstPageText          : '首页',
             firstPageTipText       : '首页',
             lastPageText           : '尾页',
             lastPageTipText            : '尾页',
             prePageText                : '上一页',
             prePageTipText         : '上一页',
             nextPageText           : '下一页',
             nextPageTipText            : '下一页',
             totalPageBeforeText        : '共',
             totalPageAfterText     : '页',
             currPageBeforeText     : '当前第',
             currPageAfterText      : '页',
             totalInfoSplitStr      : '/',
             totalRecordsBeforeText : '共',
             totalRecordsAfterText  : '条数据',
             gopageBeforeText       : '&nbsp;转到',
             gopageButtonOkText     : '确定',
             gopageAfterText            : '页',
             buttonTipBeforeText        : '第',
             buttonTipAfterText     : '页'
             }*/
        })
    </script>

第三部 编写HTML部分

 <div style="width: 800px; margin: 0 auto;">
        <div id="kkpager"></div>
    </div>

这样就算完成了 值得注意的是我们用分页功能时希望能动态加载总页数还有点击页签的时候能向后台发送当前的页码 相应的部分都写在注释里了 请仔细查阅

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值