摘要:但是这个插件本身还是挺不错的,对于报表的支持比较好。下面应该写服务端了,这呢随机获取表格数据表格数据以格式返回,返回大概就是这样了。
前言
觉得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() { Listusers = 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
摘要:但是这个插件本身还是挺不错的,对于报表的支持比较好。下面应该写服务端了,这呢随机获取表格数据表格数据以格式返回,返回大概就是这样了。 前言 觉得Datatables的中文文档写的太差劲了,开发手册和文档都是很不友好,demo也不够完善,不适合直接想使用的人来看, 需要用过一段时间之后再来看可能才会有柳暗花明的发现,不然就有点不明所以的感觉。但是这个插件本身还是挺不错的,对于报表的支持比...
摘要:是一款表格插件。当你打开服务器模式的时候,每次绘制表格的时候,会给服务器发送一个请求包括当前分页,排序,搜索参数等等。开启服务器模式需要使用和不定时一讲选项,进一步的信息,请参考下面的配置选项。 Datatables 是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,可以很方便的实现分页,即时搜索和排序。 一、简单使用 怎样简单地使用Data...
摘要:简介与的作用一样,比更漂亮是一款表格插件。它是一个高度灵活的工具,可以将任何表格添加高级的交互功能。 DataTables简介 与EasyUI的Datagrid作用一样,比easyui更漂亮 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 支持分页、排序、搜索 支持4种数据源 支持多种主题 拥有多种扩展 文件引入 ...
阅读 2352·2021-09-30 09:47
阅读 1346·2021-09-28 09:35
阅读 3220·2021-09-22 15:57
阅读 2453·2021-09-22 14:59
阅读 3608·2021-09-07 10:25
阅读 3043·2021-09-03 10:48
阅读 3015·2021-08-26 14:14
阅读 902·2019-08-30 15:55