摘要:但是這個插件本身還是挺不錯的,對于報表的支持比較好。下面應該寫服務端了,這呢隨機獲取表格數據表格數據以格式返回,返回大概就是這樣了。
前言
覺得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; } }
大概就是這樣了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/68926.html
摘要:但是這個插件本身還是挺不錯的,對于報表的支持比較好。下面應該寫服務端了,這呢隨機獲取表格數據表格數據以格式返回,返回大概就是這樣了。 前言 覺得Datatables的中文文檔寫的太差勁了,開發手冊和文檔都是很不友好,demo也不夠完善,不適合直接想使用的人來看, 需要用過一段時間之后再來看可能才會有柳暗花明的發現,不然就有點不明所以的感覺。但是這個插件本身還是挺不錯的,對于報表的支持比...
摘要:是一款表格插件。當你打開服務器模式的時候,每次繪制表格的時候,會給服務器發送一個請求包括當前分頁,排序,搜索參數等等。開啟服務器模式需要使用和不定時一講選項,進一步的信息,請參考下面的配置選項。 Datatables 是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能,可以很方便的實現分頁,即時搜索和排序。 一、簡單使用 怎樣簡單地使用Data...
摘要:簡介與的作用一樣,比更漂亮是一款表格插件。它是一個高度靈活的工具,可以將任何表格添加高級的交互功能。 DataTables簡介 與EasyUI的Datagrid作用一樣,比easyui更漂亮 Datatables是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能。 支持分頁、排序、搜索 支持4種數據源 支持多種主題 擁有多種擴展 文件引入 ...
閱讀 1587·2021-11-22 15:33
閱讀 1728·2021-11-15 18:01
閱讀 664·2021-10-09 09:43
閱讀 2604·2021-09-22 16:03
閱讀 758·2021-09-03 10:28
閱讀 3550·2021-08-11 10:22
閱讀 2718·2019-08-30 15:54
閱讀 1761·2019-08-30 14:21