jquery分页展示控件 kkpager 使用

最新推荐文章于 2024-09-22 11:17:00 发布

weixin_34071713

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量110

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/sprouting/blog/857613

版权

2019独角兽企业重金招聘Python工程师标准>>>

本demo将讲解两种方式：
一：link模式（设置a标签链接地址,跟不同参数：<a href="xxxx.html?current=3">3</a>;current:当前页码）
二：click模式 (自定义函数跳转，ajax方式，通过点击事件发送ajax请求获取数据。ajax分页)
===================================================================================

准备工作，引入js 和css
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager.css" />

HTML DOM
<div id="kkpager"></div>

后台Java代码，模拟查询数据库

后台使用struts2 和 json，不多说！

一：link模式

    <script type="text/javascript">  
            var sum = '${sum}';//总数据条数后台返回数据  
              var totalPage = Math.ceil(sum/3);//总页数总数据条数/每页显示数 向上取整  
            var current = '${current}';//当前页数 后台返回数据  
            if(current == 0){  
                current = 1;  
            }  
            $(function(){  
                //初始化函数  
                kkpager.generPageHtml({  
                pno : current, //当前页数  
                total : totalPage,//总页数  
                totalRecords : sum, //总数据条数  
                mode:'link', //默认为link模式  
                getLink : function(n){  
                    return 'usercontent/user.do?current='+n; //设置a标签href地址 n表示页码  
                },  
                 //可选，有默认值   
                lang : {  
                    firstPageText : '第一页',  
                    lastPageText : '最后一页',  
                    prePageText : '上一页',  
                    nextPageText : '下一页',  
                    totalPageBeforeText : '共',  
                    totalPageAfterText : '页',  
                    totalRecordsAfterText : '条数据',  
                    gopageBeforeText : '转到',  
                    gopageButtonOkText : '确定',  
                    gopageAfterText : '页',  
                    buttonTipBeforeText : '第',  
                    buttonTipAfterText : '页'  
                }  
            });  
    });  
    </script>

二：click模式（ajax 局部刷新）

    $(function(){  
            var sum = '${sum}';//总数据条数后台返回数据  
            var totalPage = Math.ceil(sum/3);//总页数总数据条数/每页显示数 向上取整  
            var current = '${current}';//当前页数      后台返回数据  
            if(current == 0){  
                    current = 1;  
            }  
            //初始化函数  
            kkpager.generPageHtml({  
                    pno : current, //当前页数  
                    total : totalPage,//总页数  
                    totalRecords : sum, //总数据条数  
                    mode:'click', //这里设置为click模式  
                    lang : {  
                            firstPageText : '第一页',  
                            lastPageText : '最后一页',  
                            prePageText : '上一页',  
                            nextPageText : '下一页',  
                            totalPageBeforeText : '共',  
                            totalPageAfterText : '页',  
                            totalRecordsAfterText : '条数据',  
                            gopageBeforeText : '转到',  
                            gopageButtonOkText : '确定',  
                            gopageAfterText : '页',  
                            buttonTipBeforeText : '第',  
                            buttonTipAfterText : '页'  
                },  
                //点击页码的函数，这里发送ajax请求后台  
                click:function(n){  
                        $(".data-d table").html("");  
                        html = "<tr><td>id</td><td>uname</td><td>age</td><td>upwd</td></tr>";  
                        $.post("usercontent/ajax.do?current="+n,function(data){  
                        $.each(data,function(i,obj){  
                                html +="<tr><td>"+obj.id+"</td><td>"+obj.uname+"</td><td>"+obj.age+"</td><td>"+obj.upwd+"</td></tr>";  
                        })  
                        $(".data-d table").html(html);  
                },"json")  
                this.selectPage(n); //手动条用selectPage进行页码选中切换  
               },  
                //设置href链接地址,默认#  
                getHref:function(n){  
                        return "javascript:;;";  
                }  
        });  
    });

参数配置说明：

必选参数

pno 当前页码

total 总页码

totalRecords 总数据条数

可选参数

pagerid 分页展示控件容器ID 字符串 默认值 'kkpager'

mode 模式，click或link 字符串 默认值 'link'

isShowTotalPage 是否显示总页数 布尔型 默认值 true

isShowTotalRecords 是否显示总记录数 布尔型 默认值 true

isShowFirstPageBtn 是否显示首页按钮 布尔型 默认值 true

isShowLastPageBtn 是否显示尾页按钮 布尔型 默认值 true

isShowPrePageBtn 是否显示上一页按钮 布尔型 默认值 true

isShowNextPageBtn 是否显示下一页按钮 布尔型 默认值 true

isGoPage 是否显示页码跳转输入框 布尔型 默认值 true

hrefFormer 链接前部 字符串 默认值 ''

hrefLatter 链接尾部 字符串 默认值 ''

lang 语言配置对象，属性配置列表（只能在lang:{xxx}这里配置）：

firstPageText 首页按钮文本 字符串 默认值 '首页'

firstPageTipText 首页按钮提示文本 字符串 默认值 '首页'

lastPageText 尾页按钮文本 字符串 默认值 '尾页'

lastPageTipText 尾页按钮提示文本 字符串 默认值 '尾页'

prePageText 上一页按钮文本 字符串 默认值 '上一页'

prePageTipText 上一页按钮提示文本 字符串 默认值 '上一页'

nextPageText 下一页按钮文本 字符串 默认值 '下一页'

nextPageTipText 下一页提示按钮文本 字符串 默认值 '下一页'

totalPageBeforeText 总页数前缀文本 字符串 默认值 '共'

totalPageAfterText 总页数后缀文本 字符串 默认值 '页'

totalRecordsAfterText 总记录数文本 字符串 默认值 '条数据'

gopageBeforeText 跳转前缀文本 字符串 默认值 '转到'

gopageAfterText 跳转前缀文本 字符串 默认值 '页'

gopageButtonOkText 跳转按钮文本 字符串 默认值 '确定'

buttonTipBeforeText 页码按钮提示信息前缀 字符串 默认值 '第'

buttonTipAfterText 页码按钮提示信息后缀 字符串 默认值 '页'

gopageWrapId 页码跳转dom ID 字符串 默认值 'kkpager_gopage_wrap'

gopageButtonId 页码跳转按钮dom ID 字符串 默认值 'kkpager_btn_go'

gopageTextboxId 页码输入框dom ID 字符串 默认值 'kkpager_btn_go_input'

getLink 链接算法函数（仅适用于mode为link） 函数类型

click 自定义事件处理函数（仅适用于mode为click） 函数类型