摘要:但是这个插件本身还是挺不错的,对于报表的支持比较好。下面应该写服务端了,这呢随机获取表格数据表格数据以格式返回,返回大概就是这样了。
前言
正文</>复制代码
觉得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
摘要:但是这个插件本身还是挺不错的,对于报表的支持比较好。下面应该写服务端了,这呢随机获取表格数据表格数据以格式返回,返回大概就是这样了。 前言 觉得Datatables的中文文档写的太差劲了,开发手册和文档都是很不友好,demo也不够完善,不适合直接想使用的人来看, 需要用过一段时间之后再来看可能才会有柳暗花明的发现,不然就有点不明所以的感觉。但是这个插件本身还是挺不错的,对于报表的支持比...
摘要:是一款表格插件。当你打开服务器模式的时候,每次绘制表格的时候,会给服务器发送一个请求包括当前分页,排序,搜索参数等等。开启服务器模式需要使用和不定时一讲选项,进一步的信息,请参考下面的配置选项。 Datatables 是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,可以很方便的实现分页,即时搜索和排序。 一、简单使用 怎样简单地使用Data...
摘要:简介与的作用一样,比更漂亮是一款表格插件。它是一个高度灵活的工具,可以将任何表格添加高级的交互功能。 DataTables简介 与EasyUI的Datagrid作用一样,比easyui更漂亮 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 支持分页、排序、搜索 支持4种数据源 支持多种主题 拥有多种扩展 文件引入 ...
阅读 2517·2021-09-30 09:47
阅读 1454·2021-09-28 09:35
阅读 3361·2021-09-22 15:57
阅读 2615·2021-09-22 14:59
阅读 3731·2021-09-07 10:25
阅读 3185·2021-09-03 10:48
阅读 3129·2021-08-26 14:14
阅读 1042·2019-08-30 15:55
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要