jquery分页展示控件:kkpager

kkpager v1.2

js分页展示控件,传入简单参数就能使用的分页效果控件

准备工作,引入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_blue.css" />

HTML DOM容器

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

调用方法

1、使用link模式

<script type="text/javascript">
//生成分页控件
kkpager.generPageHtml({
    pno : ‘${p.pageNo}‘,
    mode : ‘link‘, //可选,默认就是link
    //总页码
    total : ‘${p.totalPage}‘,
    //总数据条数
    totalRecords : ‘${p.totalCount}‘,
    //链接前部
    hrefFormer : ‘${hrefFormer}‘,
    //链接尾部
    hrefLatter : ‘${hrefLatter}‘,
    //链接算法
    getLink : function(n){
        //这里是默认算法,算法适用于比如:
        //hrefFormer=http://www.xx.com/news/20131212
        //hrefLatter=.html
        //那么首页(第1页)就是http://www.xx.com/news/20131212.html
        //第2页就是http://www.xx.com/news/20131212_2.html
        //第n页就是http://www.xx.com/news/20131212_n.html
        if(n == 1){
            return this.hrefFormer + this.hrefLatter;
        }
        return this.hrefFormer + ‘_‘ + n + this.hrefLatter;
    }

});
</script>

getLink 参数需要按需要重写。

2、使用click模式(自定义跳转函数)

<script type="text/javascript">
//生成分页控件
kkpager.generPageHtml({
    pno : ‘${p.pageNo}‘,
    mode : ‘click‘, //设置为click模式
    //总页码
    total : ‘${p.totalPage}‘,
    //总数据条数
    totalRecords : ‘${p.totalCount}‘,
    //点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
    //适用于不刷新页面,比如ajax
    click : function(n){
        //这里可以做自已的处理
        //...
        //处理完后可以手动条用selectPage进行页码选中切换
        this.selectPage(n);
    },
    //getHref是在click模式下链接算法,一般不需要配置,默认代码如下
    getHref : function(n){
        return ‘#‘;
    }

});
</script>

click 参数需要按需要重写,而getHref一般需要配置。

必选参数

pno 当前页码

total 总页码

totalRecords 总数据条数

可选参数

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

mode 模式,click或link 字符串 默认值 ‘link‘

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

isShowCurrPage 是否显示当前页 布尔型 默认值 true

isShowTotalRecords 是否显示总记录数 布尔型 默认值 false (当isShowTotalPagetrue时,此设置无效)

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

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

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

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

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

isWrapedPageBtns 是否用span包裹住页码按钮 布尔型 默认值 true

isWrapedInfoTextAndGoPageBtn 是否用span包裹住分页信息和跳转按钮 布尔型 默认值 true

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

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

lang 语言配置对象,属性配置列表:

  • firstPageText 首页按钮文本 字符串 默认值 ‘首页‘
  • firstPageTipText 首页按钮提示文本 字符串 默认值 ‘首页‘
  • lastPageText 尾页按钮文本 字符串 默认值 ‘尾页‘
  • lastPageTipText 尾页按钮提示文本 字符串 默认值 ‘尾页‘
  • prePageText 上一页按钮文本 字符串 默认值 ‘上一页‘
  • prePageTipText 上一页按钮提示文本 字符串 默认值 ‘上一页‘
  • nextPageText 下一页按钮文本 字符串 默认值 ‘下一页‘
  • nextPageTipText 下一页提示按钮文本 字符串 默认值 ‘下一页‘
  • totalPageBeforeText 总页数前缀文本 字符串 默认值 ‘共‘
  • totalPageAfterText 总页数后缀文本 字符串 默认值 ‘页‘
  • currPageBeforeText 当前页前缀文本 字符串 默认值 ‘当前第‘
  • currPageAfterText 当前页后缀文本 字符串 默认值 ‘页‘
  • totalInfoSplitStr 分页统计信息部分的分隔符 字符串 默认值 ‘/‘
  • totalRecordsBeforeText 总记录数前缀文本 字符串 默认值 ‘共‘
  • 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) 函数类型

getHref 链接算法函数(仅适用于mode为click) 函数类型

公开方法

selectPage 手动调用此函数选中某个页码

   //选中第2页码
   kkpager.selectPage(2);

默认链接算法,按需重写

//默认链接算法函数,使用时需要按需要重写
getLink : function(n){
    //这里的算法适用于比如:
    //hrefFormer=http://www.xx.com/news/20131212
    //hrefLatter=.html
    //那么首页(第1页)就是http://www.xx.com/news/20131212.html
    //第2页就是http://www.xx.com/news/20131212_2.html
    //第n页就是http://www.xx.com/news/20131212_n.html
    if(n == 1){
        return this.hrefFormer + this.hrefLatter;
    }
    return this.hrefFormer + ‘_‘ + n + this.hrefLatter;
}
时间: 2024-08-27 14:59:12

jquery分页展示控件:kkpager的相关文章

基于jQuery 常用WEB控件收集

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook

一些基于jQuery开发的控件

基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html (无法找到)下载:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html 示例:http://letmehaveblog.blogspot.com/2007

HTML5的video虽然可用controls来展示控件

HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制.下面是一个小例子. 当然效果不是很美观,若想好看的可以自己设置css样式等. 复制代码 代码如下: <div id="video_div" style="text-align:center;"> <button onclick="playPause()"

jquery操作select2控件

(一)select2常用的操作:添加.移除.获取选中的value()与text() (1)移除事件:$("#select_id").unbind("change");   //为Select移除选择改变事件 unbind的用法:①定义和用法 unbind() 方法移除被选元素的事件处理程序.该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行. ubind() 适用于任何通过 jQuery 附加的事件处理程序. ②取消绑定元素的事件处理程序和

自定义的jquery ui树控件

简单的自定义jquery ui树控件,用于机构人员,支持自动加载下级节点数据 jQuery.widget("xway.Tree", { _Node: function(data) { this.id = data.type + "_" +data.id; this.trid = "tr_" + this.id; this.label = data.label; this.parent = null; this.tree = null; this.

jquery M97-datepicker日历控件

My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件:     <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> 3.页面使用两个方式:     常规调用:  <input id="d11" type="tex

JQuery自动填充控件:autocomplete(自己稍作了修改)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)

BZ第一次自己写博客,心情好激动!!BZ也是小菜,本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. BZ最近看了很多博友的有关TreeView的博客,发现很多都是WebForm.JQuery的.因为BZ使用的是MVC的原因,所以决定写一写关于MVC和Bootstrap的TreeView. PS:基于Bootstrap的JQuery TreeView树形控件,JQuery版本为2.1.1(下载网上的基于Bootstrap的JQuery TreeVie

使用Uploadify 时,同时使用了jQuery.Validition 验证控件时,在IE11上出现JS缺少对象错误。

场景: 使用jQuery.1.8.2 使用 Uploadify 3.2上传控件 使用jQuery.Validition 1.9 验证 使用IE 11 时,当鼠标点击上传按钮时,会出现JS 缺少对象错误.如下图: 错误定位在jQuery中. 排查后发现是引用了jQuery Validition 验证控件导致的. 在jQuery Validition控件初始化中,有下面一段代码: $currentSection .validateDelegate(":text, [type='password'],