-
还你笑眼2018-04-23 00:00
- 43
- 0
请求到的数据如下
{
"message": "SUCCESS",
"data": {
"page": 1,
"size": 10,
"prevPage": 1,
"nextPage": 2,
"currentPageElements": 10,
"totalPage": 3,
"totalElements": 21,
"sort": {
"property": "id",
"direction": "ASC"
},
"content": [{
"id": 1,
"uuid": "779ed259xbf689de28bb725f6",
"username": "juzhili",
"accountLocked": false,
"avatar": "http://192.168.20.72:8088/2018/03/20/ccd68d65-35b9-4128-9481-140b115bbb7d",
"nickName": "天下第二帅",
"sex": null,
"telephone": "2",
"createTime": 1524465656000
}, {
"id": 2,
"uuid": "65f6b1x4acb835f856284062e0",
"username": "x123123",
"accountLocked": false,
"avatar": "http://192.168.20.72:8088/2018/04/04/10f1e6b041aa4194a995da7192bd28f0.jpg",
"nickName": "SuperStar",
"sex": true,
"telephone": "x",
"createTime": 1524465659000
}, {
"id": 5,
"uuid": "52ef1346702x4384e17",
"username": "4444",
"accountLocked": false,
"avatar": null,
"nickName": "1111",
"sex": null,
"telephone": "x",
"createTime": 1524465663000
}, {
"id": 7,
"uuid": "62ee5ec7357x7064968d9",
"username": "l123123",
"accountLocked": false,
"avatar": "http://192.168.20.72:8088/2018/04/04/d07383e7ca4443fb8d4c26705d69c9b4",
"nickName": "。楠哥＇",
"sex": true,
"telephone": "x",
"createTime": 1524465666000
}, {
"id": 12,
"uuid": "1facx8425ea4319fe4e6c0db2d",
"username": "ajaq454",
"accountLocked": false,
"avatar": "http://192.168.20.72:8088/2018/03/26/94cb5008692544b79def5aeeb126e44a",
"nickName": "光头强",
"sex": null,
"telephone": "x",
"createTime": 1521100292000
}, {
"id": 13,
"uuid": "7930bb19x4619c89e9692c9",
"username": "juzhili1",
"accountLocked": false,
"avatar": null,
"nickName": null,
"sex": null,
"telephone": "x",
"createTime": 1521100320000
}, {
"id": 15,
"uuid": "499547a4232xb61f09a7bf9",
"username": "juzhiliceshi",
"accountLocked": false,
"avatar": null,
"nickName": null,
"sex": null,
"telephone": "x",
"createTime": 1521525485000
}, {
"id": 21,
"uuid": "65d1a6b31b9x4b9bb3e3f2c2e8",
"username": "lsh1234567",
"accountLocked": false,
"avatar": null,
"nickName": null,
"sex": null,
"telephone": "x",
"createTime": 1522055010000
}, {
"id": 24,
"uuid": "0263505412xdd9ef00a6a8b",
"username": "3",
"accountLocked": false,
"avatar": null,
"nickName": null,
"sex": null,
"telephone": "x",
"createTime": 1522140329000
}, {
"id": 25,
"uuid": "7b7a53bf4625423x",
"username": "2",
"accountLocked": false,
"avatar": null,
"nickName": null,
"sex": null,
"telephone": "x",
"createTime": 1522140600000
}],
"lastPage": false,
"firstPage": true
}
}代码:
var self = this;
$('#myTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
url: "/api/user/findConsumer",
type: "get",
data: {
roleUuid: self.roleUuid,
username: self.username,
telephone: self.telephone,
nickName: self.nickName,
page: self.page
},
headers: {
"Authorization": "Bearer "+Cookies.get('access_token')
}
},
// 之后的不会写了
});前端代码
<table id="myTable" class="display table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>后端放回的 json 值是这样的
- page:1 第几页
- size:10 每页显示几条
- totalPage: 3, 共几页
- totalElements: 21, 总共几条数据
请问然后怎么绑定数据并且显示呢？我想使用 datatables 插件直接帮我实现了数据的展示和分页。
- 共 0 条
- 全部回答
-
剑鬼非人哉 普通会员 1楼
jQuery DataTables 是一个强大的数据处理库，它提供了非常直观的API来处理表格数据。要实现绑定数据和分页显示数据，你需要做以下几步：
- 安装 jQuery DataTables： 首先，你需要在你的 HTML 文件中引入 jQuery 和 DataTables 的 CDN。你可以从 https://www.datatables.net/ 下载 jQuery CDN。然后，在你的 HTML 文件中添加以下代码：
```html
```
- 创建数据源： 使用 jQuery DataTables 的 API 创建一个数据源。例如，如果你有一个 JSON 数据，你可以这样创建一个数据源：
javascript var data = [ { name: 'John Doe', age: 30, city: 'New York' }, { name: 'Jane Doe', age: 25, city: 'Chicago' }, { name: 'Mike Smith', age: 40, city: 'Los Angeles' } ];- 初始化 DataTables： 使用 jQuery DataTables 的 API 初始化 DataTables。例如，你可以这样初始化：
javascript $('#example').DataTable({ data: data, columns: [ { data: 'name' }, { data: 'age' }, { data: 'city' } ] });这段代码将创建一个表格，其中包含三列：名字（'name'），年龄（'age'）和城市（'city'）。
- 配置分页： 在初始化 DataTables 之后，你可以配置 DataTables 的分页功能。例如，你可以这样配置：
javascript $('#example').DataTable({ data: data, columns: [ { data: 'name' }, { data: 'age' }, { data: 'city' } ], columnsSortable: true, columnsReorderable: true, pages: [ { page: 1, text: 'First' }, { page: 2, text: 'Second' }, { page: 3, text: 'Third' }, { page: 4, text: 'Fourth' }, { page: 5, text: 'Fifth' } ] });这段代码将创建一个表格，其中包含五个页：第一页显示 "First"，第二页显示 "Second"，以此类推。
-
交互式操作： 当你想要交互式操作时，你可能需要使用 jQuery DataTables 的 API 来实现。例如，你可以使用 jQuery DataTables 的
draw方法来添加或删除行，使用drawEnd方法来关闭表格，使用drawTable方法来重绘表格，使用drawRow方法来添加行，使用drawCell方法来添加单元格，等等。 -
实现分页： 除了
draw方法之外，你还可以使用draw方法来添加分页。例如，你可以使用以下代码来添加分页：
javascript $('#example').DataTable({ data: data, columns: [ { data: 'name' }, { data: 'age' }, { data: 'city' } ], columnsSortable: true, columnsReorderable: true, pages: [ { page: 1, text: 'First' }, { page: 2, text: 'Second' }, { page: 3, text: 'Third' }, { page: 4, text: 'Fourth' }, { page: 5, text: 'Fifth' } ], initialize: function () { this.page( 1 ); }, draw: function () { // Add your code here } });这段代码将在第一页添加表格，然后每页增加一行。
注意：这只是一个基本的示例，你可能需要根据你的具体需求来调整和扩展 jQuery DataTables 的 API。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部