前言

前几天自己写了一个分页功能，代码逻辑写的很乱
今天发现jqGrid这个工具是真好用，故记录下来方便以后使用
首先是PageHelper
后台分页工具
PageHelper的原理是基于拦截器实现的

具体流程

首先引入PageHelper的jar包

<dependency>

    <groupId>com.github.pagehelper</groupId>

    <artifactId>pagehelper</artifactId>

    <version>5.1.8</version>

</dependency>

分页插件的配置方式

配置的方式有两种，一种是在Mybatis配置的配置文件，一种是在Spring的配置文件
两种选择一种配置即可

1.在Mybatis.xml配置 直接上代码

 <?xml version="1.0" encoding="UTF-8" ?>

 <!DOCTYPE configuration

         PUBLIC "-//mybatis.org//DTD Config 3.0//EN"

         "http://mybatis.org/dtd/mybatis-3-config.dtd">

 <configuration>

     <typeAliases>

         <package name="gentleman.bean"/>

     </typeAliases>

     <plugins>

         <!-- com.github.pagehelper为PageHelper类所在包名 -->

         <plugin interceptor="com.github.pagehelper.PageInterceptor">

             <!-- 使用下面的方式配置参数，可以去官网查看具体的参数介绍 -->

             <property name="param1" value="value1"/>

         </plugin>

     </plugins>

 </configuration>

2. 在 Spring 配置文件中配置拦截器插件

使用 spring 的属性配置方式，可以使用 plugins 属性像下面这样配置：

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">

  <!-- 注意其他配置 -->

  <property name="plugins">

    <array>

      <bean class="com.github.pagehelper.PageInterceptor">

        <property name="properties">

          <!--使用下面的方式配置参数，一行配置一个 -->

          <value>

            params=value1

          </value>

        </property>

      </bean>

    </array>

  </property>

</bean>

分页插件参数

分页插件参数可以去官网查看
https://pagehelper.github.io/docs/howtouse/
一般使用像我这么配就可以了

jqGrid的配置步骤

下载地址：https://github.com/tonytomov/jqGrid/tree/master
使用 JqGrid 时，必需要有的文件如下：

ui.jqgrid-bootstrap.css
ui.jqgrid-bootstrap-ui.css

jquery.jqGrid.js
grid.locale-cn.js

这里注意导入的顺序！需要先导入Jquery和bootstrap

前端的代码

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

</head>

<body>

    <script src="../js/daoru1.js"></script>

    <link href="../css/ui.jqgrid-bootstrap.css" rel="stylesheet">

    <link href="../css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet">

    <script src="../js/jquery.jqGrid.js"></script>

    <script src="../js/grid.locale-cn.js"></script>

    <div class="content">

    <div class="row">

            <table id="jqGrid" class="table table-bordered" ></table>

            <div id="jqGridPager"></div>

        </div>

    </div>

    </div>

</div>

</div>

</body>

<script>

    $("#jqGrid").jqGrid({

        //请求后台 JSON 数据的 URL

        url: '/reader',

        // type:'get',

        //后台返回的数据格式

        datatype: "json",

        //列表信息，包括表头、宽度、是否显示、渲染参数等属性

        colModel: [

            {label: 'id', name: 'id', index: 'id', width: 50, hidden: true, key: true},

            {label: '读者证号', name: 'readerId', index: 'readerId', sortable: false, width: 80},

            {label: '姓名', name: 'name', index: 'name', sortable: false, width: 80},

            {label: '性别', name: 'sex', index: 'sex', sortable: false, width: 80},

            {label: '生日', name: 'birth', index: 'birth', sortable: false, width: 80},

            {label: '地址', name: 'address', index: 'address', sortable: false, width: 80},

            {label: '电话', name: 'telcode', index: 'telcode', sortable: false, width: 80}

        ],

        //表格高度，可自行调节

        height: 346,

        //默认一页显示多少条数据，可自行调节

        rowNum: 10,

        //翻页控制条中，每页显示记录数可选集合

        rowList: [10, 30, 50],

        //主题，这里选用的是 Bootstrap 主题

        styleUI: 'Bootstrap',

        //数据加载时显示的提示信息

        loadtext: '信息读取中...',

        //是否显示行号，默认值是 false，不显示

        rownumbers: true,

        //行号列的宽度

        rownumWidth: 35,

        //宽度是否自适应

        autowidth: true,

        //是否可以多选

        multiselect: true,

        //分页信息 DOM

        pager: "#jqGridPager",

        // 直接默认返回值是data

        jsonReader: {

            root: "list",           //数据列表模型

            page: "data.currPage",       //数据页码

            total: "totalPage",     //数据总页码

            records: "totalCount"   //数据总记录数

        },

        // 向后台请求的参数

        prmNames: {

            page: "page",

            rows: "limit"

            // order: "order"

        },

        // page和limit分别代表当前页数和每页数据量，这里是10

        // 数据加载完成并且 DOM 创建完毕之后的回调函数

        gridComplete: function () {

            //隐藏 Grid 底部滚动条

            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});

        }

    });

          function userAdd(){

               $(location).attr('href','/html/addReader.html');

          }

</script>

</html>

colModel里的数据要和你后台javaBean的属性是一致的，不然获取不到值

后端代码

dao层

package gentleman.dao;

import gentleman.bean.Lend_list;

import java.util.List;

public interface Lend_listMapper {

    List<Lend_list> selectLend();

}

Mapper层

 <?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

 <mapper namespace="gentleman.dao.Lend_listMapper">

   <resultMap id="BaseResultMap" type="gentleman.bean.Lend_list">

     <id column="sernum" jdbcType="BIGINT" property="sernum" />

     <result column="book_id" jdbcType="BIGINT" property="bookId" />

     <result column="reader_id" jdbcType="INTEGER" property="readerId" />

     <result column="lend_date" jdbcType="DATE" property="lendDate" />

     <result column="back_date" jdbcType="DATE" property="backDate" />

   </resultMap>

  <select id="selectLend" resultMap="BaseResultMap">

     select

     <include refid="Base_Column_List" />

     from lend_list

   </select>

    <sql id="Base_Column_List">

     sernum, book_id, reader_id, lend_dates, back_date, Status

   </sql>

   </mapper>

service层

package gentleman.service;

import gentleman.bean.Lend_list;

import java.util.List;

public interface LendListService {

    List<Lend_list> selectLend ();

}

serviceImpl





package gentleman.service;

import gentleman.bean.Lend_list;

import gentleman.dao.Lend_listMapper;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import java.util.List;

@Service

public class LendListServiceImpl implements LendListService{

      @Autowired

      private Lend_listMapper ll;

    @Override

    public List<Lend_list> selectLend() {

        return ll.selectLend();

    }

}




Controller层




package gentleman.Controller;

import com.alibaba.fastjson.JSON;

import com.github.pagehelper.PageHelper;

import com.github.pagehelper.PageInfo;

import gentleman.bean.Lend_list;

import gentleman.service.LendListService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

@Controller

public class LendListController {

       @Autowired

    private LendListService ls;

       @RequestMapping("/lend")

       @ResponseBody

       public String LendSelect(@RequestParam Map<String, Object> params){

           int page = Integer.parseInt(params.get("page").toString());

           int limit = Integer.parseInt(params.get("limit").toString());

           PageHelper.startPage(page,limit);

           List<Lend_list> lend_lists = ls.selectLend();

           PageInfo<Lend_list> rd = new PageInfo<>(lend_lists);

           int r = (int)rd.getTotal();

           HashMap<String, Object> map = new HashMap<>();

           map.put("list",lend_lists);

           map.put("totalCount",r);

           map.put("currPage",page);

           int sum = (int) Math.floor(r/limit)+1;

           map.put("totalPage",sum);

           return JSON.toJSONString(map);

       }

}




总结AND页面最终效果展示


这里的话，params传过来的值就是之前html里写的page和limit，分别获取转换成int类型
调用startPage()方法将页数和每页的数据条数传过去
再调用service方法获取List,
通过PageInfo把list传过去，里面的getTotal方法能够获取数据总数
根据这个总数就能算出总共有多少页
这样的话，再把数据传到前台，就完成了一个很简单的分页








												


											
SSM+PageHelper+jqGrid实现数据分页的更多相关文章
	

    
								
  1. Jqgrid pager 关于“local” dataType 动态加载数据分页的研究（没好用的研究结果）
		
    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
    
		
    2. 
						
  2. ssm+PageHelper实现分页查询
		
    通过搭建ssm框架,然后通过mybatis的分页插件pagehelp进行分页查询.源码:https://gitee.com/smfx1314/pagehelper 看一下项目结构: 首先创建一个mav ...
    
		
    3. 
						
  3. Vue2.0+ElementUI+PageHelper实现的表格分页
		
    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
    
		
    4. 
						
  4. mysq大数据分页
		
    mysql limit大数据量分页优化方法 Mysql的优化是非常重要的.其他最常用也最需要优化的就是limit.Mysql的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急 ...
    
		
    5. 
						
  5. Sql Server 数据分页
		
    http://www.cnblogs.com/qqlin/archive/2012/11/01/2745161.html 1.引言 在列表查询时由于数据量非常多,一次性查出来会非常慢,就算一次查出来了 ...
    
		
    6. 
						
  6. Oracle、MySql、SQLServer数据分页查询
		
    看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...
    
		
    7. 
						
  7. 知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页
		
    回到目录 数据分页是这个经常说的东西,无论在WEBForm还是WinForm中它都会被单独拿出来,或者是公用组件,或者是公用类库,反正对于数据分页这个东西,总是我们关注的一个话题,但事实上,数据分页归 ...
    
		
    8. 
						
  8. salesforce 零基础开发入门学习（八）数据分页简单制作
		
    本篇介绍通过使用VF自带标签和Apex实现简单的数据翻页功能. 代码上来之前首先简单介绍一下本篇用到的主要知识: 1.ApexPages命名空间 此命名空间下的类用于VF的控制. 主要的类包括但不限于 ...
    
		
    9. 
						
  9. Oracle中的数据分页
		
    --数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CryptoJS导入sha加密包出现错误
			
    Uncaught TypeError: Cannot read property 'extend' of undefined at sha224.js:12 at sha224.js:60 Uncau ...
    
			
    2. 
						
  2. Elasticsearch学习(1) Spring boot整合Elasticsearch
			
    本文的Spring Boot版本为1.5.9,Elasticsearch版本为2.4.4,话不多说,直接上代码. 一.启动Elasticsearch 在官网上下载Elasticsearch后,打开bi ...
    
			
    3. 
						
  3. “全栈2019”Java第二十八章：数组详解（上篇）
			
    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
    
			
    4. 
						
  4. RDLC报表的相关技巧二（主从报表）
			
    为了广泛支持客户端,系统框架运行在.Net Framework 4.0之上,Report viewer的版本也限制在11.0.3366.16. 使用NUGET安装Microsoft.ReportVie ...
    
			
    5. 
						
  5. jquery事件二 -- 选项卡，失去焦点
			
    以之前的选项卡例子为原版,当选上某一个选项卡的时候,选项卡周围会有一个蓝色的边框影响视觉体验,那么应该怎么去掉这个边框色呢?只需要加一行blur()--失去焦点函数就可以了 <!DOCTYPE  ...
    
			
    6. 
						
  6. docker-compose命令
			
    转自:https://www.jianshu.com/p/2217cfed29d7 先来看一份 docker-compose.yml 文件,不用管这是干嘛的,只是有个格式方便后文解说: version ...
    
			
    7. 
						
  7. NOIP前的模板
			
    1.筛\(phi\) \(logn\)求少数\(phi\) inline int phi(R int x){ R int res=x,tmp=x; for(R int i=2;i*i<=x;i+ ...
    
			
    8. 
						
  8. pip报failed to create process
			
    使用pip命令的时候报failed to create process 1.错误提示窗口如下图 2.报这个错误的原因,是因为你改动了python的目录名称或位置.因为,我的电脑是安装了anaconda ...
    
			
    9. 
						
  9. php图像处理函数image_type_to_extension、image_type_to_mime_type 的区别
			
    php中获得图像类型的两个函数image_type_to_extension.image_type_to_mime_type,做图像处理的时候一直不清楚这俩个函数有什么区别,今天特意查了一下,有了一些 ...
    
			
    10. 
						
  10. 换个角度看Salesforce之基础配置学习笔记(一)
			
    1. Salesforce.com与force.com的关系: Salesforce.com is build on the force.com platform seamlessly.That is ...
    
			
    11.