简单分页插件，kkpager

最新推荐文章于 2019-11-21 11:22:33 发布

明天还有我

最新推荐文章于 2019-11-21 11:22:33 发布

阅读量1.9k

点赞数

分类专栏： jQuery 前端页面技术

本文链接：https://blog.csdn.net/mingtianhaiyouwo/article/details/51152512

版权

jQuery 同时被 2 个专栏收录

67 篇文章 0 订阅

订阅专栏

前端页面技术

23 篇文章 0 订阅

订阅专栏

后台用习惯了框架分页，到做网页的时候就不自己去写分页了，并且需要的分页也是比较简单的，然后就在网上找了个简单的分页插件：kkpager

需要导入的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

2. [图片] 分页效果-橘色皮肤.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>

明天还有我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
简单分页插件，kkpager

后台用习惯了框架分页，到做网页的时候就不自己去写分页了，并且需要的分页也是比较简单的，然后就在网上找了个简单的分页插件：kkpager需要导入的js 和cs: 　　　　 kkpager.js 　　　　kkpager.min.js　　　　kkpager.css效果图如下：　　以下为实例：----------BaseDao.java
复制链接

扫一扫

专栏目录