jQuery分页插件kkpager的使用

插件作者的github地址：https://github.com/pgkk/kkpager

### 准备工作,引入js、css

### HTML DOM容器

#### 1、使用click模式
<script type="text/javascript">

var currentPage = '1';
var total = '10';
var totalPage = '100';

kkpager.generPageHtml({
    //当前页  
    pno: currentPage,
    //总页码
    total: totalPage,
    //总数据条数
    totalRecords: total,
    mode: 'click',//默认值是link，可选link或者click
    //点击跳转分页的处理
    //点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
    click: function (n) {
        //手动选中按钮
        this.selectPage(n);
        // 查询数据
        search(n);
    },
    lang: {

    firstPageText: '首页',
    firstPageTipText: '首页',
    lastPageText: '尾页',
    lastPageTipText: '尾页',
    prePageText: '上一页',
    prePageTipText: '上一页',
    nextPageText: '下一页',
    nextPageTipText: '下一页',
    totalPageBeforeText: '共',
    totalPageAfterText: '页',
    currPageBeforeText: '当前第',
    currPageAfterText: '页',
    totalInfoSplitStr: '/',
    totalRecordsBeforeText: '共',
    totalRecordsAfterText: '条数据',
    gopageBeforeText: ' 转到',
    gopageButtonOkText: '确定',
    gopageAfterText: '页',
    buttonTipBeforeText: '第',
    buttonTipAfterText: '页'
   }

}, true); 
//第二个参数设置 true, 表示重置kkpager

</script>

### 必选参数
> `pno` 当前页码

> `total` 总页码

> `totalRecords` 总数据条数

### 可选参数
> `pagerid` 分页展示控件容器ID `字符串` 默认值 'kkpager' // 慎用修改默认值，js源码以及css样式对应的kkpager都需要替换

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

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

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

> `isShowTotalRecords` 是否显示总记录数 `布尔型` 默认值 false (当`isShowTotalPage`为`true`时，此设置无效)

> `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` 手动调用此函数选中某个页码
//选中第n页码
kkpager.selectPage(n);

posted @ 2021-11-10 18:52 随身笔记~ 阅读(319) 评论(0) 编辑收藏举报

刷新页面返回顶部

随身笔记~

jQuery分页插件kkpager的使用

公告