使用bootstrap-pagination进行分页

项目地址

前端示例代码:


<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>UIDth>
            <th>时间th>
            <th>channelth>
        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"#data-table").append(
            "" +
            json.results[i]["uid"] + "" +
            json.results[i]["dt"]+ "" +
            json.results[i]["channel"]+ "")
        }
        //这里回调
        $(".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

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

你可能感兴趣的:(使用bootstrap-pagination进行分页)