请问jquery.datatables 如何实现绑定数据和分页显示数据?
请求到的数据如下
{
"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
插件直接帮我实现了数据的展示和分页。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论