资讯专栏INFORMATION COLUMN

Springmvc 结合 jquery插件Datatables的使用(基于java支持的服务器处理)

dcr309duan / 1553人阅读

摘要:但是这个插件本身还是挺不错的,对于报表的支持比较好。下面应该写服务端了,这呢随机获取表格数据表格数据以格式返回,返回大概就是这样了。

前言
觉得Datatables的中文文档写的太差劲了,开发手册和文档都是很不友好,demo也不够完善,不适合直接想使用的人来看, 需要用过一段时间之后再来看可能才会有柳暗花明的发现,不然就有点不明所以的感觉。但是这个插件本身还是挺不错的,对于报表的支持比较好。
正文

我定义了一个User对象,现在需要在某个页面上展示一些数据,这个页面就是下面的html(不好意思作为java开发者, 我还是使用了jsp),

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    首页
    
    
    
    
    
    


id username password age name nickname
Row 1 Data 1 Row 1 Data 2 Row 1 Data 1 Row 1 Data 2 Row 1 Data 1 Row 1 Data 2
就是一个简单的六列的表格, 不用过多的解释了, 但是这里有个id=“table_id_example” 需要用的到, 还有一点需要注意, datatables兼容bootstrap。

然后应该要看js了, 我是这样写的:

$(function () {
    $("#table_id_example").DataTable({
        draw: 1,//标识可以避免因ajax的异步性而导致展示错误数据
        recordsFiltered: 10,//过滤后数据总条数
        recordsTotal: 10,//过滤前数据总条数
        scrollY: 300,//滚动条高度
        paging: true,//是否支持分页
        serverSide: true,//是否支持服务器处理
        "bStateSave": true,// 状态保存
        "processing": true, // 打开数据加载时的等待效果
        "sAjaxSource": "/user/getTableData",
        "fnServerData": function (sSource,aoData,fnCallback,oSettings) {
            oSettings.jqXHR = $.ajax({
                "dataType": "json",
                "type": "GET",
                "url": sSource,
                "data": aoData,
                "success": function (data) {
                    fnCallback(data);
                },
                "error": function (e) {
                    console.log(e.message);
                }
            });
        },
        columns: [
            { title: "id",data: "id" },
            { title: "username",data: "username" },
            { title: "password",data: "password" },
            { title: "age",data: "age" },
            { title: "name",data: "name" },
            { title: "nickname",data: "nickname" }
        ]
    });
});
这里可以重新制定列名,也要定义数据值, 还要定义请求, 参数在注释中写了。

下面应该写服务端了,这呢:

@RestController
@RequestMapping("/user")
public class UserController {

    /**
     * Method Description:
     * 〈随机获取表格数据〉
     *
     * @param:      null
     * @return:     表格数据以String格式返回, 返回json
     * @author:     Andy
     * @date:       3/30/2018 4:46 PM
     */
    @RequestMapping(value = "/getTableData", method = RequestMethod.GET)
    public String getTableData() {
        List users = new ArrayList();
        for (int i = 0; i < 10; i++) {
            int temp = (int) (Math.random() * 10);
            String strTemp = String.valueOf(temp);
            UserDO user = new UserDO(i + "", "wang" + temp, "123", temp, "wang" + temp, ("andy" + strTemp));
            users.add(user);
        }
        ResultData data = new ResultData();
        data.setData(users);
        data.setDraw(1);
        data.setRecordsTotal(Integer.valueOf(users.size()));
        data.setRecordsFiltered(Integer.valueOf(users.size()));
        System.out.println(users.toString());
        String listJsonString = JSON.toJSONString(data);
        return listJsonString;
    }
}

ResultData:

public class ResultData {

    private Integer draw;
    private Integer recordsTotal;
    private Integer recordsFiltered;
    private List data;

    public Integer getDraw() {
        return draw;
    }

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

    public Integer getRecordsTotal(Integer integer) {
        return recordsTotal;
    }

    public void setRecordsTotal(Integer recordsTotal) {
        this.recordsTotal = recordsTotal;
    }

    public Integer getRecordsFiltered() {
        return recordsFiltered;
    }

    public void setRecordsFiltered(Integer recordsFiltered) {
        this.recordsFiltered = recordsFiltered;
    }

    public List getData() {
        return data;
    }

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

UserDO:

public class UserDO implements Comparable {
    /**
     * The id will use uuid
     */
    private String id;

    /**
     * This username should be applied with email
     */
    private String username;

    private String password;

    private int age;

    /**
     * True name
     */
    private String name;

    /**
     * Virtual name
     */
    private String nickname;

    public UserDO() {
    }

    public UserDO(String id, String username, String password, int age, String name, String nickname) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.age = age;
        this.name = name;
        this.nickname = nickname;
    }

    public String getId() {
        return id;
    }

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

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getName() {
        return name;
    }

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

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) {
            return true;
        }
        if (!(o instanceof UserDO)) {
            return false;
        }
        UserDO userDO = (UserDO) o;
        return id == userDO.id &&
                Objects.equals(username, userDO.username) &&
                Objects.equals(password, userDO.password) &&
                Objects.equals(age, userDO.age) &&
                Objects.equals(name, userDO.name) &&
                Objects.equals(nickname, userDO.nickname);
    }

    @Override
    public int hashCode() {
        return Objects.hash(id, username, password, age, name, nickname);
    }

    @Override
    public String toString() {
        return "UserDO{" +
                "id=" + id +
                ", username="" + username + """ +
                ", password="" + password + """ +
                ", age="" + age + """ +
                ", name="" + name + """ +
                ", nickname="" + nickname + """ +
                "}";
    }

    @Override
    public int compareTo(UserDO o) {
        return 0;
    }
}

大概就是这样了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93959.html

相关文章

  • Springmvc 结合 jquery插件Datatables使用基于java支持务器处理

    摘要:但是这个插件本身还是挺不错的,对于报表的支持比较好。下面应该写服务端了,这呢随机获取表格数据表格数据以格式返回,返回大概就是这样了。 前言 觉得Datatables的中文文档写的太差劲了,开发手册和文档都是很不友好,demo也不够完善,不适合直接想使用的人来看, 需要用过一段时间之后再来看可能才会有柳暗花明的发现,不然就有点不明所以的感觉。但是这个插件本身还是挺不错的,对于报表的支持比...

    Snailclimb 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高胜山 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 评论0 收藏0
  • Datatables表格插件学习

    摘要:是一款表格插件。当你打开服务器模式的时候,每次绘制表格的时候,会给服务器发送一个请求包括当前分页,排序,搜索参数等等。开启服务器模式需要使用和不定时一讲选项,进一步的信息,请参考下面的配置选项。 Datatables 是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,可以很方便的实现分页,即时搜索和排序。 一、简单使用 怎样简单地使用Data...

    Lyux 评论0 收藏0
  • DataTables表格插件使用说明

    摘要:简介与的作用一样,比更漂亮是一款表格插件。它是一个高度灵活的工具,可以将任何表格添加高级的交互功能。 DataTables简介 与EasyUI的Datagrid作用一样,比easyui更漂亮 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 支持分页、排序、搜索 支持4种数据源 支持多种主题 拥有多种扩展 文件引入 ...

    weij 评论0 收藏0

发表评论

0条评论

阅读需要支付1元查看
<