DataTable+SpringMVC实现分页-优快云博客

本文详细介绍如何使用Datatable组件，包括从官网下载资源、初始化Datatable、定义DataTable公用Class及Controller接收设置等步骤，帮助读者快速掌握Datatable的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、datatable官网下载js,css http://www.datatables.club/ 然后页面引用

2，初始化datatable

/**
 * 交易信息
 * @type {{init: transaction.init}}
 */

var transaction={
    init:function(){
        transaction.initDataTables();
    },
    //初始化dataTable的方法
    initDataTables:function () {
        $("#transactionTable").DataTable({
            processing: true,
            serverSide: true,
            aLengthMenu: [5, 10, 20], //更改显示记录数选项
            pagingType: "full",
            bSort: false,// 排序
            ajax: {
                url: "/get/data.json",
                type: "POST",
                contentType: "application/json",
                data: function (ds) {
                    return JSON.stringify(ds);
                }
            },
            searching: true,//是否开始本地搜索
            columns: [
                {"data": "id"},
                {"data": "shpcoinUsersModel.email"},
                {"data": "shpNum"},
                {"data": "moneyNum"},
                {"data": "shpcoinCurrencyModel.name"},
                {"data": "createDate"},
                {"data": "state"}
            ]
        });
    }
}

3、DataTable 公用Class

package com.pizi.utils;

import java.util.ArrayList;
import java.util.List;

public class DataTables{
    //基本类型
    private int draw;
    private int start;
    private int length;
    //集合类型
    private Search search=new Search();
    private List<Order> order=new ArrayList<Order>();
    private List<Columns> columns=new ArrayList<Columns>();

    public int getDraw() {
        return draw;
    }

    public void setDraw(int draw) {
        this.draw = draw;
    }

    public int getStart() {
        return start;
    }

    public void setStart(int start) {
        this.start = start;
    }

    public int getLength() {
        return length;
    }

    public void setLength(int length) {
        this.length = length;
    }

    public Search getSearch() {
        return search;
    }

    public void setSearch(Search search) {
        this.search = search;
    }

    public List<Order> getOrder() {
        return order;
    }

    public void setOrder(List<Order> order) {
        this.order = order;
    }

    public List<Columns> getColumns() {
        return columns;
    }

    public void setColumns(List<Columns> columns) {
        this.columns = columns;
    }
    //获取search value
    public String searchValue(Search search){
        return search.getValue();
    }
}

//条件查询参数
class Search{
    private String value;
    private boolean regex;

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    public boolean isRegex() {
        return regex;
    }

    public void setRegex(boolean regex) {
        this.regex = regex;
    }
}

class Order{
    private int column;
    private String dir;

    public int getColumn() {
        return column;
    }

    public void setColumn(int column) {
        this.column = column;
    }

    public String getDir() {
        return dir;
    }

    public void setDir(String dir) {
        this.dir = dir;
    }
}

class Columns{
    private String data;
    private String name;
    private boolean searchable;
    private boolean orderable;
    private Search search=new Search();

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }

    public String getName() {
        return name;
    }

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

    public boolean isSearchable() {
        return searchable;
    }

    public void setSearchable(boolean searchable) {
        this.searchable = searchable;
    }

    public boolean isOrderable() {
        return orderable;
    }

    public void setOrderable(boolean orderable) {
        this.orderable = orderable;
    }

    public Search getSearch() {
        return search;
    }

    public void setSearch(Search search) {
        this.search = search;
    }
}

4、Controller 接收设置

/**
 * datatable 相关操作
 * @param dataTable
 * @return
 */
@RequestMapping("data.json")
@ResponseBody
public Map<String,Object> queryDataTableList(@RequestBody DataTables dataTable){
   Map<String,Object> map=new HashMap<String,Object>();
   //获得总条数
   long count= dataDao.queryListCount(dataTable.searchValue(dataTable.getSearch()));
   //执行查询获取数据
   List<Object> list= dataDao.queryList(dataTable.getStart(),dataTable.getLength(),dataTable.searchValue(dataTable.getSearch()));
   //dataTable返回参数配置
   map.put("data",list);
   map.put("recordsTotal",count);
   map.put("draw",dataTable.getDraw());
   map.put("recordsFiltered",count);
   //返回
   return map;
}

这简单版的可以了

转载于:https://my.oschina.net/u/4128799/blog/3046005