使用bootstrap-pagination进行分页

最新推荐文章于 2024-05-12 07:23:05 发布

ox180x

最新推荐文章于 2024-05-12 07:23:05 发布

阅读量9.8k

点赞数 1

分类专栏： Python

本文链接：https://blog.csdn.net/ox180x/article/details/52205045

版权

Python 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

项目地址

前端示例代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="{{ url_for("static",filename="bootstrap/css/bootstrap.min.css") }}" rel="stylesheet" media="screen">
</head>

<body>
        <!--点击查询-->
    <input type="button" value="点击" onclick="query()">
         <!--这个地方展示数据-->
    <table id="data-table">
        <tr>
            <th>UID</th>
            <th>时间</th>
            <th>channel</th>
        </tr>

    </table>
    <!--这个地方展示分页-->
    <ul class="pagination">
    </ul>


    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="{{ url_for("static",filename="bootstrap/js/bootstrap.min.js") }}"></script>
    <script type="text/javascript" src="{{ url_for("static",filename="jquery-bootstrap-pagination.js") }}"></script>



<script>
    function sendmsg(url,data,func){
        $.getJSON(url,data,func)
    }

//进行查询
    function query(e,page){
        var query = {};
        query['page'] = page;
        //这里另每页数量为5，可自行调整
        query['page_size'] = 5;
        sendmsg("/api/count",query,loadlist);
    }
//返回结果处理
    function loadlist(json){
        $(".loaded-data").remove();
        for(var i=0;i<json.results.length;i++){
             $("#data-table").append(
            "<tr class=\"loaded-data\"><th>" +
            json.results[i]["uid"] + "</th><th>" +
            json.results[i]["dt"]+ "</th><th>" +
            json.results[i]["channel"]+ "</th></tr>")
        }
        //这里回调
        $(".pagination").unbind();
        $(".pagination").pagination({
            total_pages:json.total_pages,
            current_page:json.current_page,
            callback:query
        });
    }

</script>
</body>
</html>

后端示例代码：
这里使用python+mongoengine


class TestApi(MethodView):
    def get(self):
        page = request.args.get("page", 1, int)
        page_size = int(request.args.get("page_size", int))

        p = (page - 1) * page_size
        # 由于模拟数据少，所以直接查询所有
        query_result = RegisterRecord.objects()
        # 多个查询条件的话，可以:
        # query = {}
        # query['id__lte'] = ObjectId.from_datetime(datetime.utcnow())
        # query['id__gte'] = ObjectId.from_datetime(datetime.now())
        # result = RegisterRecord.objects(**query)

        count = query_result.count()
        total_page = self.get_page_number(count, page_size)
        current_page = page

        result = query_result.skip(p).limit(page_size)

        results = []
        for record in result:
            dt = record.pk.generation_time
            uid = record.uid
            channel = record.channel
            results.append(dict(dt=dt, uid=uid, channel=channel))

        return jsonify(results=results, total_pages=total_page, current_page=current_page)

    @staticmethod
    def get_page_number(count, page_size):
        count = float(count)
        page_size = abs(page_size)
        if page_size != 0:
            total_page = math.ceil(count / page_size)
        else:
            total_page = math.ceil(count / 5)
        return total_page

这要就行啦，嗯，就是这样~

ox180x

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用bootstrap-pagination进行分页

项目地址前端示例代码：<!DOCTYPE html><html><head> <title></title> <link href="{{ url_for("static",filename="bootstrap/css/bootstrap.min.css") }}" rel="stylesheet" media="screen"></head><body> <
复制链接

扫一扫