sqlAchemy分頁實現

時間 2019-11-09

標籤 sqlachemy 分頁實現简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>

<div id="example"></div>

<script src="../lib/jquery-1.9.1.min.js"></script>
<script src="../lib/bootstrap.min.js"></script>
<script src="../build/bootstrap-paginator.min.js"></script>
<script>
    let currentPage = 1;//當前頁
    let pageSize = 3;//每頁顯示多少條

    function render() {
        $.ajax({
            url: "xxx",
            data: {
                page: currentPage,
                pageSize: pageSize,
                content: 'HUM',
                imei: '867726030890182',
            },
            dataType: "json",
            success: function (result) {
                console.log(result);
                // 將數據渲染到頁面 ***前端渲染數據*******
                $("#example").text('你好！！');
                // 調用分頁函數.參數:當前所在頁, 總頁數(用總條數 除以 每頁顯示多少條,在向上取整), ajax函數
                setPage(currentPage, Math.ceil(result.count / pageSize), render)
            }
        })
    }

    render();

    /**
     *
     * @param pageCurrent 當前所在頁
     * @param pageSum 總頁數
     * @param callback 調用ajax
     */
    function setPage(pageCurrent, pageSum, callback) {
        $("#example").bootstrapPaginator({

            size: "small",//控件的大小
            alignment: "center",//控件的位置
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首頁";
                    case "prev":
                        return "上一頁";
                    case "next":
                        return "下一頁";
                    case "last":
                        return "末尾";
                    case "page":
                        return page;
                }
            },
            // 顯示第幾頁
            currentPage: pageCurrent,
            // 總頁數
            totalPages: pageSum,
            //當單擊操做按鈕的時候, 執行該函數, 調用ajax渲染頁面
            onPageClicked: function (event, originalEvent, type, page) {
                // 把當前點擊的頁碼賦值給currentPage, 調用ajax,渲染頁面
                currentPage = page;
                callback && callback()
            }
        })
    }
</script>

</body>
</html>

前端

content = self.get_argument('content')
        imei = self.get_argument('imei')
        currentPage = int(self.get_argument('page'))  # 當前頁
        pageSize = int(self.get_argument('pageSize'))  # 每頁多少條

        query = db_session.query(Alarm).filter(Alarm.content == content, Alarm.IMEI == imei)  # Query對象
        count = query.count()  # 總數

        # limit x offset y 跳過y條數據，讀x條數據
        # values獲得的是一個生成器
        all_alarm = [{'warning': obj.warning, 'createtime': obj.createtime} for obj in
                     query.limit(pageSize).offset((currentPage - 1) * pageSize).values(Alarm.warning,
                                                                                       Alarm.createtime
                                                                                       )]

        self.write(json.dumps({'code': 0, 'data': all_alarm, 'count': count}, cls=DatetimeEncoder,
                              ensure_ascii=False))

後端

應用組件：Bootstrap-Paginatorcss

參數地址請參考：http://www.javashuo.com/article/p-bfkjjqft-ce.htmlhtml

組件GItHub地址：https://github.com/lyonlai/bootstrap-paginator前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。