SSM+PageHelper+jqGrid實現數據分頁

本文轉載自查看原文 2019-04-10 13:38 589 JAVA/ 分頁插件/ SSM框架/ SSM

前言

前幾天自己寫了一個分頁功能，代碼邏輯寫的很亂
今天發現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配置直接上代碼

 1 <?xml version="1.0" encoding="UTF-8" ?>
 2 <!DOCTYPE configuration
 3         PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
 4         "http://mybatis.org/dtd/mybatis-3-config.dtd">
 5 <configuration>
 6 
 7     <typeAliases>
 8         <package name="gentleman.bean"/>
 9     </typeAliases>
10     
11     <plugins>
12         <!-- com.github.pagehelper為PageHelper類所在包名 -->
13         <plugin interceptor="com.github.pagehelper.PageInterceptor">
14             <!-- 使用下面的方式配置參數，可以去官網查看具體的參數介紹 -->
15             <property name="param1" value="value1"/>
16         </plugin>
17     </plugins>
18 </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層

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 3 <mapper namespace="gentleman.dao.Lend_listMapper">
 4   <resultMap id="BaseResultMap" type="gentleman.bean.Lend_list">
 5     <id column="sernum" jdbcType="BIGINT" property="sernum" />
 6     <result column="book_id" jdbcType="BIGINT" property="bookId" />
 7     <result column="reader_id" jdbcType="INTEGER" property="readerId" />
 8     <result column="lend_date" jdbcType="DATE" property="lendDate" />
 9     <result column="back_date" jdbcType="DATE" property="backDate" />
10   </resultMap>
11   
12  <select id="selectLend" resultMap="BaseResultMap">
13     select
14     <include refid="Base_Column_List" />
15     from lend_list
16   </select>
17    <sql id="Base_Column_List">
18     sernum, book_id, reader_id, lend_dates, back_date, Status
19   </sql>
20   </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方法能夠獲取數據總數
根據這個總數就能算出總共有多少頁
這樣的話，再把數據傳到前台，就完成了一個很簡單的分頁

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ssm+PageHelper實現分頁查詢 SSM框架整合后使用pagehelper實現分頁功能 ssm+maven+pageHelper搭建maven項目實現快速分頁 SSM框架手動實現分頁邏輯（非PageHelper） mybatis pagehelper實現分頁 PageHelper實現分頁原理 PageHelper實現分頁 mybatis + PageHelper 實現分頁 PageHelper實現分頁查詢 ssm工程集成mybatis分頁插件pagehelper