springBoot查詢數據分頁顯示

springBoot全部依賴和配置文件都寫好的狀況下
一、dao接口的實現方法

package com.cy.pj.sys.dao;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import com.cy.pj.sys.pojo.SysLog;
@Mapper
public interface SysLogDao {
/**
 * 
 * @param username 查詢條件（例如查詢那個用戶的日誌信息）
 * @return  總記錄數（基於這個結果能夠計算總頁數）
 */
    int getRowCount(@Param("username") String username);
    /**
     * 
     * @param username 查詢條件（例如查詢那個用戶的日誌信息）
     * @param startIndex 當前頁的起始位置
     * @param paInteger 當前頁的頁面大小
     * @return 當前頁的日誌記錄信息
     * 數據庫中每條日誌信息封裝到一個SysLog對象中
     */
    List<SysLog> findPageObjects(
            @Param("username")String username,
            @Param("startIndex")Integer startIndex,
            @Param("pageSize")Integer pageSize
            );
}

二、寫實現dao中Mapper的sql語句

<?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="com.cy.pj.sys.dao.SysLogDao">
<!-- sql元素用於對於sql語句共性的提取，須要的位置用<include>引入 -->
    <sql id="queryWhereId">
        from sys_Logs
        <where>
            <if test="username!=null and username!=''">
                username like concat('%',#{username},'%')
                <!-- concat 字符串的鏈接 -->
            </if>
        </where>
    </sql>
    <!-- 按條件統計記錄總數 -->
    <select id="getRowCount" resultType="int">
    select count(*)
    <include refid="queryWhereId"/>
    </select>
    <!-- 在映射文件中添加爲id爲 findPageObjects元素，，實現分頁查詢-->
    <select id="findPageObjects" resultType="com.cy.pj.sys.pojo.SysLog">
    select * 
    <include refid="queryWhereId"/>
    order by createdTime desc 
    limit #{startIndex},#{pageSize}
    </select>
</mapper>

三、寫pojo類對數據進行封裝，所顯示的表字段的pojo類
3.1這裏是SysLog

package com.cy.pj.sys.pojo;
import java.io.Serializable;
import java.util.Date;

import lombok.Data;
/**
 * 定義用於封裝日誌信息的一個pojo對象，這樣的對象，在定義時要遵循一下規則
 * 1）屬性儘可能都用對象類型
 * 2）提供無參數構造函數
 * 3）提供set/get方法，boolean類型變量不能以is做爲前綴
 * 4）實現序列化接口並手動添加序列化id（便於後續對此對象進行序列化）：在java中建議全部用於存儲數據 的對象都實現
 * FAQ?
 * 1)爲何要實現序列化接口
 * 2）什麼是序列化？（將對象轉化爲字節）
 * 3）爲何要序列化？應用在什麼場景？（將數據持久化，或將數據存儲到緩存中）
 * 4）什麼是反序列化？（將字節轉換爲對象
 * 5）如何序列化和反序列化
 * 5.1）設計類是要實現序列化接口
 * 5.2）構建IO對象（ObjectOutputStream/ObjectinputStream）
 * 5.3)經過I/O對象進行序列化和反序列化
 * @author Administrator
 *
 */
@Data
public class SysLog implements Serializable{

    private static final long serialVersionUID = -1592163223057343412L;
private Integer id;
//用戶名
private String username;
//用戶操做
private String operation;
//請求方法
private String method;
//請求參數
private String params;
//執行時長（毫秒）
private Long time;
//ip地址
private String ip;
//建立時間
private Date createdTime;
}

3.2對獲取的信息進行封裝（獲取分頁信息的頁碼值、頁面大小（就是每頁所顯示的記錄）、獲取的表總共記錄數、總頁數 、當前記錄）

package com.cy.pj.sys.pojo;

import java.util.List;

import lombok.Data;
/**
 * 
 * @author PageObject 爲業務封裝分業務相關數據的BO對象
 * @param <T>參數化的類型（泛型）
 */
@Data
public class PageObject<T> {//類名<泛型>：類泛型（這裏的泛型用於約束類中的屬性，方法參數，方法的返回值）
    /**當前頁的頁碼值 */
    private Integer pageCurrent=1;
     /**頁面大小*/
    private Integer pageSize=3;
      /**總行數(經過查詢得到)*/

    private Integer rowCount=0;
    /**總頁數(經過計算得到)*/

    private Integer pageCount=0;
    /**當前頁記錄*/
     private List<T> records;

}

3.3處理異常進行封裝

package com.cy.pj.sys.pojo;

public class JsonResult {
    /**
     * 狀態碼
     */
private int state=1;
/**
 * 狀態信息
 */
private String message="ok";
/**
 * 正確數據
 */
private Object data;
public JsonResult() {
}
public JsonResult(String message) {
    this.message = message;

}
public JsonResult(Object data) {
    this.data = data;
}
public JsonResult(Throwable t) {
    this.state=0;
    this.message=t.getMessage();

}
public int getState() {
    return state;
}
public void setState(int state) {
    this.state = state;
}
public String getMessage() {
    return message;
}
public void setMessage(String message) {
    this.message = message;
}
public Object getData() {
    return data;
}
public void setData(Object data) {
    this.data = data;
}

}

四、寫service接口

package com.cy.pj.sys.service;

import com.cy.pj.sys.pojo.PageObject;
import com.cy.pj.sys.pojo.SysLog;

public interface SysLogService {
    PageObject<SysLog> findPageObject(String username,Integer pageCurrent);
}

五、寫實現service接口的實現類

package com.cy.pj.sys.service.impl;

import java.util.List;

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

import com.cy.pj.sys.dao.SysLogDao;
import com.cy.pj.sys.pojo.PageObject;
import com.cy.pj.sys.pojo.SysLog;
import com.cy.pj.sys.service.SysLogService;

import om.cy.pj.common.exception.ServiceException;
@Service
public class SysLogServiceImpl implements SysLogService {
    @Autowired
    private SysLogDao sysLogDao;

    @Override
    public PageObject<SysLog> findPageObject(String username, Integer pageCurrent) {
        // 1.驗證參數的合法性
        // 1.1驗證pageCurrent的合法性
        // 不合法拋出IllegalArgumentException異常
        if (pageCurrent == null || pageCurrent < 1)
            throw new IllegalArgumentException("當前也顯示不正確");
        // 基於條件查詢總記錄數
        // 2.1執行查詢
        int rowCount = sysLogDao.getRowCount(username);
        // 2.2驗證查詢結果，假如結果爲0不在執行以下操做
        if (rowCount == 0)

            throw new ServiceException("系統登陸沒有查到對應的記錄");
        // 3.基於條件查詢當前頁記錄(pageSize定義爲2)
        // 3.1)定義pageSize
        int pageSize = 2;
        //3.2計算startIndex
        int startIndex=(pageCurrent-1)*pageSize;
        //3.3執行當前數據的查詢操做
        List<SysLog> records = sysLogDao.findPageObjects(username, startIndex, pageSize);
        //4.對分頁信息以及當前頁記錄進行封裝
        //4.1 構建PageObject對象
        PageObject<SysLog> pageObject = new PageObject<>();
        //4.2封裝數據
         pageObject.setPageCurrent(pageCurrent);
          pageObject.setPageSize(pageSize);
          pageObject.setRowCount(rowCount);
          pageObject.setRecords(records);
          pageObject.setPageCount((rowCount-1)/pageSize+1);
          //5.返回封裝結果
        return pageObject;
    }

}

5.自定義異常

package om.cy.pj.common.exception;

public class ServiceException extends RuntimeException {
public ServiceException() {
    super();
}

public ServiceException(String message) {
    super(message);
}
public ServiceException(Throwable cause) {
    super(cause);
}
}

controller類

@Controller
public class PageController {
    @Autowired
    private SysLogService sysLogService;

    /*
     * 在Controller類中添加分頁請求處理方法
     */    
    @RequestMapping("doFindPageObjects")
    @ResponseBody
    public JsonResult doFindPageObjects(String username,Integer pageCurrent) {
        PageObject<SysLog> findPageObject = sysLogService.findPageObject(username, pageCurrent);
        return new JsonResult(findPageObject);
    }

html頁面和js寫的方法
數據顯示頁面的js編寫方法

<div id="pageId" class="box-footer clearfix" dm="100"></div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">    
/* 分頁頁面加載完成，向服務端發起異步請求 */
    $(function() {
        $("#pageId").load("doPageUI",function(){
            doGetObjects();
        });
    });

    /* 定義異步請求處理函數， */
    function doGetObjects(){
        //1.定義url和參數
        var url = "doFindPageObjects";
        var params={"pageCurrent":1};
        //2.發起異步請求
         //請問以下ajax請求的回調函數參數名能夠是任意嗎？//能夠,必須符合標識符的規範
        $.getJSON(url,params,function(result){
            
            doHandleQueryResponseResult(result);
        });//特殊的ajax函數
    }
    function doHandleQueryResponseResult(result){
        if(result.state==1){//ok
            //更新table中tbody內部的數據
            doSetTableBodyRows(result.data.records);//將數據呈如今頁面上
            /* 
            //更新頁面page。html分頁數據 
            */
            doSetPagination(result.data);    
        }else{
            alert(result.message);
        }
    }
    
    function doSetTableBodyRows(records){
        //1.獲取tBody對象，並清除對象
        var tBody=$("#tbodyId");
        tBody.empty();
        //2.迭代records記錄，並將其內容追加到tbody
        for(var i in records){
            //2.1構建tr對象
            var tr=$("<tr></tr>");
            //2.2構建tds對象
            var tds=doCreateTds(records[i]);
            //2.3將tds追加到tr中
            tr.append(tds);
            //2.4將tr追加tbody中
            tBody.append(tr);
        }
    }
    function doCreateTds(data){
        var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"
        +"<td>"+data.username+"</td>"
        +"<td>"+data.operation+"</td>"
        +"<td>"+data.method+"</td>"
        +"<td>"+data.params+"</td>"
        +"<td>"+data.ip+"</td>"
        +"<td>"+data.time+"</td>";
        return tds;
    }


</script>

建立上下頁翻頁的按鈕HTML頁 以及js的編寫

<ul class="pagination pagination-sm no-margin pull-right">
    <li><a class="first">首頁</a></li>
    <li><a class="pre">上一頁</a></li>
    <li><a class="next">下一頁</a></li>
    <li><a class="last">尾頁</a></li>
    <li><a class="rowCount">總記錄數(0)</a></li>
    <li><a class="pageCount">總頁數(0)</a></li>
    <li><a class="pageCurrent">當前頁(0)</a></li>
</ul>
<script type="text/javascript">
    function doSetPagination(page){
        console.log("page",page)
        //1.初始化數據
        $(".rowCount").html("總記錄數("+page.rowCount+")");
        $(".pageCount").html("總頁數("+page.pageCount+")");
        $(".pageCurrent").html("當前頁("+page.pageCurrent+")");
    //2.綁定數據（爲後續對此數據的使用提供服務）
    $("#pageId").data("pageCurrent",page.pageCurrent);
    $("#pageId").data("pageCount",page.pageCount);
    }
    $(function(){
        //事件註冊
    $("#pageId").on("click",".first,.pre,.next,.last",doJumpToPage);
    })
    function doJumpToPage(){
        //1.獲取點擊對象的clss值
        var cls=$(this).prop("class");//Property
        //2.基於點擊的對象執行pageCurrent值得修改
        //2.1獲取pageCurrent， pageCount的當前值
         var pageCurrent=$("#pageId").data("pageCurrent");
            var pageCount=$("#pageId").data("pageCount");
            //2.2修改pageCurrent的值
            if(cls=="first"){//首頁
                pageCurrent=1;
            }else if(cls=="pre"&&pageCurrent>1){//上一頁
                pageCurrent--;
            }else if(cls=="next"&&pageCurrent<pageCount){//下一頁
                pageCurrent++;
            }else if(cls=="last"){//最後一頁
                pageCurrent=pageCount;
            }else{
             return;
    }
            //3.對pageCurrent值進行從新綁定
            $("#pageId").data("pageCurrent",pageCurrent);
            //4.基於新的pageCurrent的值進行當前頁數據查詢
            doGetObjects();
    }
     function doGetObjects(){
        //1.定義url和參數
        var url ="doFindPageObjects";
        //data是從指定元素上獲取綁定的數據
        //數據會在什麼時候進行綁定？（setPagination，doQueryObjects）
        var pageCurrent = $("#pageId").data("pageCurrent");
        //爲何要執行以下判斷，而後初始化pageCurrent的值爲1
        //pageCurrent參數在沒有賦值的狀況下，默認初始值應該爲1.
        if(!pageCurrent)
            pageCurrent=1;
        var params={"pageCurrent":pageCurrent};
        //2.發起異步請求
        //請問以下ajax請求的回調函數參數名能夠是任意的嗎？？能夠，必須符合標識符的規範
        $.getJSON(url,params,function(result){
            //請問result是一個字符串仍是json格式的js對象？  答：json格式對象
            doHandleQueryResponseResult(result);

        });
    }//特殊的ajax函數
    
</script>~~~~