jQuery插件Paginationjs分页

最新推荐文章于 2024-05-21 17:16:51 发布

maoziting_lhj

最新推荐文章于 2024-05-21 17:16:51 发布

阅读量275

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_46027411/article/details/131502495

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.0/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/paginationjs/2.6.0/pagination.min.js"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
        crossorigin="anonymous">
    <link href="https://cdn.bootcdn.net/ajax/libs/paginationjs/2.6.0/pagination.min.css" rel="stylesheet">
</head>

<body>
    <div id="data-container"></div>
    <div id="pagination-container"></div>

    <script>
        $("#pagination-container").pagination({
            // dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            // dataSource: "http://127.0.0.1/user/list?username=username",
            dataSource: function (done) {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1/user/list',
                    data: {username: 'username'},
                    success: function (response) {
                        done(response);
                    }
                });
            },
            /*  每页显示数据条数 */
            pageSize: 5,

            /* 
                每次翻页时的回调
            */
            callback: function (data, pagination) {
                $("#data-container").empty();
                console.log(data)
                
            },
        });
    </script>
</body>

</html>