请问jquery.datatables 如何实现绑定数据和分页显示数据?

发布于 2022-09-07 03:32:36 字数 4836 浏览 17 评论 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 插件直接帮我实现了数据的展示和分页。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文