简单分页插件,kkpager
2016-04-14 16:25
232 查看
后台用习惯了框架分页,到做网页的时候就不自己去写分页了,并且需要的分页也是比较简单的,然后就在网上找了个简单的分页插件:kkpager
需要导入的js 和cs:
kkpager.js
kkpager.min.js
kkpager.css
效果图如下:
![](http://images.cnitblog.com/blog/691395/201411/111500309604042.x-png)
以下为实例:
----------BaseDao.java
//分页查询
public List<T> listByPage(String hql,int start,int maxNum,Object ...params){
Query q = getSession().createQuery(hql);
q.setFirstResult(start);
q.setMaxResults(maxNum);
for(int i = 0;i < params.length;i++){
q.setParameter(i, params[i]);
}
return q.list();
}
------------serviceImpl
public Map<String, Object> getAll(int start, int limit,StuInfo entity) {
Map<String, Object> map = HQLUtils.getHqlByEntity(entity);
List<Object> params = (List<Object>) map.get("params");
List<StuInfo> list = stuInfoDao.listByPage(map.get("queryHql") + "",start, limit,params.toArray());
long total = stuInfoDao.getCount(map.get("countHql") + "",params.toArray());
map.clear();
map.put("items", list);
map.put("total", total);
return map;
}
--------------controllelr
@Controller
@RequestMapping("/stuInfo")
public class StuInfoController{
@RequestMapping("/testPager")
public String getAll(int start,int limit,@ModelAttribute("stuInfo") StuInfo stuInfo, ModelMap map){
Map<String, Object> all = stuInfoService.getAll(start, limit, stuInfo);
map.put("total", all.get("total"));//总数量
map.put("list", all.get("items"));//分页数据
map.put("limit", limit);
return "test/testPage";
}
}
----------jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<link rel="stylesheet" type="text/css" href="./css/kkpager.css">
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="./js/kkpager.js"></script>
<script type="text/javascript" src="./js/kkpager.min.js"></script>
</head>
<body>
<table id="ta">
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<c:forEach items="${list }" var="stu">
<tr>
<td>${stu.id }</
<td>
<td>${stu.name }</
<td>
<td>${stu.age} </
<td>
<tr>
</c:forEach>
</table>
<div id="kkpager"></div>
<input type="hidden" value="${total }" id="total">
<input type="hidden" value="${limit }" id="limit">
</body>
<script type="text/javascript">
//js获取地址栏参数的值, name为参数名
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;
}
var totalPage = Math.ceil($("#total").val()/$("#limit").val());//总页数
var limit = $("#limit").val();//每页数量
var totalRecords = $("#total").val();//总数量
var pageNo = getParameter('pno');
//init
$(function(){
if(!pageNo){
pageNo = 1;
}
//生成分页
//有些参数是可选的,比如lang,若不传有默认值
kkpager.generPageHtml({
pno : pageNo,
//总页码
total : totalPage,
//总数据条数
totalRecords : totalRecords,
//链接前部
hrefFormer : 'pager_test',
//链接尾部
hrefLatter : '.html',
getLink : function(n){
var ss = (parseInt(n)-1)*parseInt(limit);
return "<%=basePath%>stuInfo/testPager?start=" + ss + "&limit="
+ limit + "&pno=" + n;
}
});
});
</script>
</html>
kkpager 是一个简单分页展示插件,需要依赖jquery。
下载地址:http://www.oschina.net/action/project/go?id=29450&p=download
官方文档地址:https://github.com/pgkk/kkpager
在线测试链接:
蓝色皮肤:http://pgkk.github.io/kkpager/example/pager_test.html
橘色皮肤:http://pgkk.github.io/kkpager/example/pager_test_orange_color.html
click模式:http://pgkk.github.io/kkpager/example/pager_test_clickmode.html
![](http://static.oschina.net/uploads/code/201501/23103119_GDh2.jpg)
![](http://static.oschina.net/uploads/code/201501/23103119_YLva.jpg)
<script type="text/javascript"src="../src/kkpager.min.js"></script>
<link rel="stylesheet"type="text/css"href="../src/kkpager_orange.css"/>
4. [代码]调用代码(link模式)
需要导入的js 和cs:
kkpager.js
kkpager.min.js
kkpager.css
效果图如下:
以下为实例:
----------BaseDao.java
//分页查询
public List<T> listByPage(String hql,int start,int maxNum,Object ...params){
Query q = getSession().createQuery(hql);
q.setFirstResult(start);
q.setMaxResults(maxNum);
for(int i = 0;i < params.length;i++){
q.setParameter(i, params[i]);
}
return q.list();
}
------------serviceImpl
public Map<String, Object> getAll(int start, int limit,StuInfo entity) {
Map<String, Object> map = HQLUtils.getHqlByEntity(entity);
List<Object> params = (List<Object>) map.get("params");
List<StuInfo> list = stuInfoDao.listByPage(map.get("queryHql") + "",start, limit,params.toArray());
long total = stuInfoDao.getCount(map.get("countHql") + "",params.toArray());
map.clear();
map.put("items", list);
map.put("total", total);
return map;
}
--------------controllelr
@Controller
@RequestMapping("/stuInfo")
public class StuInfoController{
@RequestMapping("/testPager")
public String getAll(int start,int limit,@ModelAttribute("stuInfo") StuInfo stuInfo, ModelMap map){
Map<String, Object> all = stuInfoService.getAll(start, limit, stuInfo);
map.put("total", all.get("total"));//总数量
map.put("list", all.get("items"));//分页数据
map.put("limit", limit);
return "test/testPage";
}
}
----------jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<link rel="stylesheet" type="text/css" href="./css/kkpager.css">
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="./js/kkpager.js"></script>
<script type="text/javascript" src="./js/kkpager.min.js"></script>
</head>
<body>
<table id="ta">
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<c:forEach items="${list }" var="stu">
<tr>
<td>${stu.id }</
<td>
<td>${stu.name }</
<td>
<td>${stu.age} </
<td>
<tr>
</c:forEach>
</table>
<div id="kkpager"></div>
<input type="hidden" value="${total }" id="total">
<input type="hidden" value="${limit }" id="limit">
</body>
<script type="text/javascript">
//js获取地址栏参数的值, name为参数名
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;
}
var totalPage = Math.ceil($("#total").val()/$("#limit").val());//总页数
var limit = $("#limit").val();//每页数量
var totalRecords = $("#total").val();//总数量
var pageNo = getParameter('pno');
//init
$(function(){
if(!pageNo){
pageNo = 1;
}
//生成分页
//有些参数是可选的,比如lang,若不传有默认值
kkpager.generPageHtml({
pno : pageNo,
//总页码
total : totalPage,
//总数据条数
totalRecords : totalRecords,
//链接前部
hrefFormer : 'pager_test',
//链接尾部
hrefLatter : '.html',
getLink : function(n){
var ss = (parseInt(n)-1)*parseInt(limit);
return "<%=basePath%>stuInfo/testPager?start=" + ss + "&limit="
+ limit + "&pno=" + n;
}
});
});
</script>
</html>
kkpager 是一个简单分页展示插件,需要依赖jquery。
下载地址:http://www.oschina.net/action/project/go?id=29450&p=download
官方文档地址:https://github.com/pgkk/kkpager
在线测试链接:
蓝色皮肤:http://pgkk.github.io/kkpager/example/pager_test.html
橘色皮肤:http://pgkk.github.io/kkpager/example/pager_test_orange_color.html
click模式:http://pgkk.github.io/kkpager/example/pager_test_clickmode.html
1. [图片] 分页效果-蓝色皮肤.jpg
![](http://static.oschina.net/uploads/code/201501/23103119_GDh2.jpg)
2. [图片] 分页效果-橘色皮肤.jpg
![](http://static.oschina.net/uploads/code/201501/23103119_YLva.jpg)
3. [代码]引入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_orange.css"/>
4. [代码]调用代码(link模式)
<scripttype="text/javascript"> //init $(function(){ //生成分页 //有些参数是可选的,比如lang,若不传有默认值 kkpager.generPageHtml({ pno : pageNo, //总页码 total : totalPage, //总数据条数 totalRecords : totalRecords, //链接前部 hrefFormer : 'pager_test', //链接尾部 hrefLatter : '.html', getLink : function(n){ return this.hrefFormer + this.hrefLatter + "?pno="+n; } /* ,lang : { firstPageText : '首页', firstPageTipText : '首页', lastPageText : '尾页', lastPageTipText : '尾页', prePageText : '上一页', prePageTipText : '上一页', nextPageText : '下一页', nextPageTipText : '下一页', totalPageBeforeText : '共', totalPageAfterText : '页', currPageBeforeText : '当前第', currPageAfterText : '页', totalInfoSplitStr : '/', totalRecordsBeforeText : '共', totalRecordsAfterText : '条数据', gopageBeforeText : ' 转到', gopageButtonOkText : '确定', gopageAfterText : '页', buttonTipBeforeText : '第', buttonTipAfterText : '页' }*/ //, //mode : 'click',//默认值是link,可选link或者click //click : function(n){ // this.selectPage(n); // return false; //} }); }); </script>
5. [代码]调用代码(click模式,自定义分页按钮处理函数)
<scripttype="text/javascript"> //init $(function(){ //生成分页 //有些参数是可选的,比如lang,若不传有默认值 kkpager.generPageHtml({ pno : pageNo, //总页码 total : totalPage, //总数据条数 totalRecords : totalRecords, mode : 'click',//默认值是link,可选link或者click click : function(n){ // do something //手动选中按钮 this.selectPage(n); return false; } /* ,lang : { firstPageText : '首页', firstPageTipText : '首页', lastPageText : '尾页', lastPageTipText : '尾页', prePageText : '上一页', prePageTipText : '上一页', nextPageText : '下一页', nextPageTipText : '下一页', totalPageBeforeText : '共', totalPageAfterText : '页', currPageBeforeText : '当前第', currPageAfterText : '页', totalInfoSplitStr : '/', totalRecordsBeforeText : '共', totalRecordsAfterText : '条数据', gopageBeforeText : ' 转到', gopageButtonOkText : '确定', gopageAfterText : '页', buttonTipBeforeText : '第', buttonTipAfterText : '页' }*/ }); }); </script>
相关文章推荐
- 自定义gradle的property
- ReentrantLock的方法
- JS面向对象及组件开发
- 问题:iOS8设置tableview的setSeparatorInset:UIEdgeInsetsZero不起作用
- Sublime Text + Graphviz + Dot = 有向图
- canvas绘制图像或者文字时模糊
- 直接选择排序
- C# 数组与 list 互相转换案例
- [Android]drawable-nodpi文件夹 的作用
- crontab -l not found的解决方法
- VB程序语言1
- 【JS】:JS实现页面反向显示
- vb13
- leetcode(58)-Range Sum Query - Immutable
- 傻瓜式一键发布
- 关于证书笔记
- mybatis 配置 log4j 日志
- leetcode(58)-Range Sum Query - Immutable
- leetcode(58)-Range Sum Query - Immutable
- TensorFlow0.7 的安装