博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery分页展示控件 kkpager 使用
阅读量:7056 次
发布时间:2019-06-28

本文共 3945 字,大约阅读时间需要 13 分钟。

hot3.png

本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> 

后台代码,模拟查询

后台使用struts2 和 json,不多说!

一:link模式 

二: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 = "idunameageupwd";                          $.post("usercontent/ajax.do?current="+n,function(data){                          $.each(data,function(i,obj){                                  html +=""+obj.id+""+obj.uname+""+obj.age+""+obj.upwd+"";                          })                          $(".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) 函数类型

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

 

 

 

转载于:https://my.oschina.net/sprouting/blog/857613

你可能感兴趣的文章
Linux 判断Cacti模板的版本
查看>>
linux系统下如何禁止ping命令或允许ping命令的方法
查看>>
Algorithms - 平方根(sqrt)算法 的 详解 及 扩展
查看>>
Python - 序列(sequence) 详解 及 代码
查看>>
Apache配置——防盗链
查看>>
九宫格
查看>>
fragment
查看>>
MySQL中使用表分区(table的partition)
查看>>
MySQL的复制(主从,主主,基于ssl)
查看>>
vue-cli教程(一) 环境搭建
查看>>
蠕虫复制
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
ant入门示例——mybatis学习笔记之预备篇(二)
查看>>
Spring MVC 教程,快速入门,深入分析——流程图
查看>>
error code : 1130
查看>>
jeecg代码生成下载后导入到eclipse不能用的解决
查看>>
第14课:Spark Streaming源码解读之State管理之updateStateByKey和mapWithState解密
查看>>
[自访]11.9生活状态
查看>>
go语言的环境变量
查看>>