spring boot 下 dataTable|pagehelper 組合進行分頁 篩選 排序

  1）Js 需提前引用 jquery.dataTables

    $(function () {

        //提示信息  初始化設置 一般不需要改
        var lang = {
            "sProcessing": "處理中...",
            "sLengthMenu": "每頁 _MENU_ 項",
            "sZeroRecords": "沒有匹配結果",
            "sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
            "sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項",
            "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中數據為空",
            "sLoadingRecords": "載入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首頁",
                "sPrevious": "上頁",
                "sNext": "下頁",
                "sLast": "末頁",
                "sJump": "跳轉"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };


        //重要修改 表格內容的自定義，需要根據業務定制
        var table = $(".table-sort").dataTable({
            language:lang,  //提示信息
            autoWidth: false,  //禁用自動調整列寬
            stripeClasses: ["odd", "even"],  //為奇偶行加上樣式，兼容不支持CSS偽類的場合
            processing: true,  //隱藏加載提示,自行處理
            serverSide: true,  //啟用服務器端分頁
            searching: false,  //禁用原生搜索
            orderMulti: true,  //啟用多列排序
            ordering:true,//使用排序
            bStateSave:true,//記錄cookie
            columnDefs:[{
               // "targets": 'nosort',  //列的樣式名
               // "orderable": false    //包含上樣式名‘nosort’的禁止排序
                'targets' : [0,2,3,4,5,6,7,8],    //除第六，第七兩列外，都默認不排序
                'orderable' : false,
            }],
            order: [],  //取消默認排序查詢,否則復選框一列會出現小箭頭
            renderer: "bootstrap",  //渲染樣式：Bootstrap和jquery-ui
            pagingType: "simple_numbers",  //分頁樣式：simple,simple_numbers,full,full_numbers
            ajax: function (data, callback, settings) {

                //封裝請求參數
                var param = {};
                param.pageSize= data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
                param.startIndex = data.start;//開始的記錄序號
                param.pageIndex = (data.start / data.length);//當前頁碼
                //自定義的參數
                param.type=$("select[name='type']").val();//獲取要篩選的類別
                param.name=$("input[name='name']").val();//獲取要篩選的名字
                //獲取排序的參數
                console.log(data.order);
                param.order=data.order;
                //ajax請求數據方法
                $.ajax({
                    type: "GET",
                    url: "/query",//url請求的地址
                    cache: false,  //禁用緩存
                    data: param,  //傳入組裝的參數
                    dataType: "json",
                    success: function (result) {

                        //封裝返回數據重要
                        var returnData = {};
                        //這里直接自行返回了draw計數器,應該由后台返回
                        returnData.draw = data.draw;
                        //返回數據全部記錄
                        returnData.recordsTotal = result.totalCount;
                        //后台不實現過濾功能，每次查詢均視作全部結果
                        returnData.recordsFiltered = result.totalCount;
                        //返回的數據列表
                        returnData.data = result.data;

                        //調用DataTables提供的callback方法，代表數據已封裝完成並傳回DataTables進行渲染
                        //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
                        callback(returnData);
                    }
                });
            },
            //列表表頭字段
            columns: [
                { "data": "id" },
                { "data": "id" },
                { "data": "name" },
                { "data": "icon" },
                { "data": "url" },
                { "data": "addtime" },
                { "data": "sort" },
                { "data": "remarks" },
                { "data": "id" },
            ],
            //新建列的 數據內容
            "createdRow": function ( row, data, index ) {
                //行渲染回調,在這里可以對該行dom元素進行任何操作
                var $btn = $('<div class="btn-group text-cen">'+
                    '<button type="button" class="btn btn-sm btn-primary btn-edit">修改</button>'+
                    '<button type="button" class="btn btn-sm btn-danger btn-del">刪除</button>'+
                    '</div>'+
                    '</div>');
                $('td', row).eq(8).append($btn);
            }
        }).api();
        //此處需調用api()方法,否則返回的是JQuery對象而不是DataTables的API對象


        //查詢按鈕
        $("#SelectServer").click(function(){
            table.ajax.reload();
        });
    });

2)HTML 篩選部分

    <select name="type" class="select">
            <option value="-1">全部分類</option>
            <option value="0">父級</option>
            <option value="1">子集</option>
        </select>

   <input type="text" name="name" id="name" placeholder=" 菜單名稱" style="width:250px" class="input-text">
   <button name="" id="SelectServer" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜目錄</button>

3)后台的數據庫實體及表格需要的參數對象

admin_menu 表格可以按照下列字段新建

package com.example.springboot.model;

import java.util.Date;

public class admin_menu {
    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getIcon() {
        return icon;
    }

    public void setIcon(String icon) {
        this.icon = icon;
    }

    public Date getAddtime() {
        return addtime;
    }

    public void setAddtime(Date addtime) {
        this.addtime = addtime;
    }

    public int getSort() {
        return sort;
    }

    public void setSort(int sort) {
        this.sort = sort;
    }

    public int getParentid() {
        return parentid;
    }

    public void setParentid(int parentid) {
        this.parentid = parentid;
    }

    public String getRemarks() {
        return remarks;
    }

    public void setRemarks(String remarks) {
        this.remarks = remarks;
    }

    public Boolean getIsabort() {
        return isabort;
    }

    public void setIsabort(Boolean isabort) {
        this.isabort = isabort;
    }

    private int id;

    private String name;

    private String url;

    private String icon;

    private Date addtime;

    private int sort;

    private int parentid;

    private String remarks;

    private Boolean isabort;

}

package com.example.springboot.model;

import java.math.BigInteger;
import java.util.List;

public class RtPageInfo {
    private List Data;
    private Integer PageNum;
    private Integer PageSize;

    public List getData() {
        return Data;
    }

    public void setData(List data) {
        Data = data;
    }

    public Integer getPageNum() {
        return PageNum;
    }

    public void setPageNum(Integer pageNum) {
        PageNum = pageNum;
    }

    public Integer getPageSize() {
        return PageSize;
    }

    public void setPageSize(Integer pageSize) {
        PageSize = pageSize;
    }

    public long getTotalCount() {
        return TotalCount;
    }

    public void setTotalCount(long totalCount) {
        TotalCount = totalCount;
    }

    private long TotalCount;

}

4）拼接的篩選Sql。(*^▽^*)

 //結構化sql
    @SelectProvider(type = UserDaoProvider.class, method = "findUserByName")
    List<admin_menu> FindAllWhere(Map<String, Object> map);

    class UserDaoProvider {
        public String findUserByName(Map<String, Object> map) {
            String sql = "SELECT * FROM admin_menu";
            Integer type=Integer.parseInt(map.get("type").toString()) ;
            String name=map.get("name")!=null?map.get("name").toString():null;
            if(type!=-1||name!=null){
                sql += " where ";
                int i=1;
                if(type!=-1){
                    sql += i!=1?"and ":"";
                    sql +="parentid !=0";//測試
                    i++;
                }
                if(name!=null){
                    sql += i!=1?"and ":"";
                    sql +="name LIKE  '%"+name+"%'";
                i++;
                }
            }

            return sql;
        }
    }

5)分頁幫助類PageHelper的配置

package com.example.springboot.config;

import java.util.Properties;
  
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
  
import com.github.pagehelper.PageHelper;
  
@Configuration
public class PageHelperConfig {
  
    @Bean
    public PageHelper pageHelper() {
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        p.setProperty("offsetAsPageNum", "true");
        p.setProperty("rowBoundsWithCount", "true");
        p.setProperty("reasonable", "true");
        pageHelper.setProperties(p);
        return pageHelper;
    }
}

 

6)Controller 返回需要的Json

 //查詢
    @RequestMapping(value = "/query", method = RequestMethod.GET)
    @ResponseBody
    public RtPageInfo query(
            @RequestParam(required = false, name = "pageSize") Integer pageSize,
            @RequestParam(required = false, name = "startIndex") Integer startIndex,
            @RequestParam(required = false, name = "pageIndex") Integer pageIndex,
            @RequestParam(required = false, name = "type") Integer type,
            @RequestParam(required = false, name = "name") String name,
            HttpServletRequest req){
        //這里做查詢操作
        //驗證排序內容
        //int issort=Integer.parseInt(req.getParameter("order[0][column]")) ;
        //String  sortname=req.getParameter("order[0][dir]") ;
        PageHelper.startPage(startIndex,pageSize,"id desc");
        //正常無條件檢索
        //List<admin_menu> cs=admin_menuMapper.findAll();
        //多條件檢索 使用map K-V參數形式
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("type",type);
        map.put("name",name);
        List<admin_menu> cs=admin_menuMapper.FindAllWhere(map);
        PageInfo<admin_menu> page = new PageInfo<>(cs);
        //返回DataTable使用
        RtPageInfo pageInfo = new RtPageInfo();
        pageInfo.setData(page.getList());//這里是數據內容 List
        pageInfo.setPageNum(startIndex/pageSize);//Integer
        pageInfo.setPageSize(pageSize);//pageSize
        pageInfo.setTotalCount(page.getTotal());//BigInteger
        return pageInfo ;
    }

7)pom.xml 的引用

    <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>

8)數據庫結構 隨便建的

 

9）完成結果

 

10）難點及解決，截圖位置為重點

      1）分頁 ：結合pagehelper，前端自定義傳遞參數，使用ajax傳遞給后台，后台完成接收，處理分頁邏輯 很輕松就能完成

     

     

    

 

      2 ) 檢索 ：點擊按鈕，執行ajax的刷新操作，刷新過程中 獲取文本框內容，傳遞自定義參數  后台接收即可

      

      

      

      

 

      3）排序：啟用排序，標記排序列，自定義參數中傳遞參數，后台獲取  並操作邏輯