ページングを達成sqlAchemy

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>タイトル</ タイトル> 
    < リンクのrel = "スタイルシート" のhref =」../ CSS / bootstrap.min .css」> 
</ ヘッド> 
< 身体>

< DIVのID = "例" > </ DIV >

< スクリプトSRC = "../ libに/ jqueryの-1.9.1.min.js" > </ スクリプト> 
< スクリプトSRC = "../ libに/ bootstrap.min.js" > </ スクリプト> 
< スクリプトSRC = "../build/bootstrap-paginator.min.js" > </ スクリプト> 
< スクリプト> 
    せcurrentPageに=  1 ; // 当前页
    せたpageSize =  3 ; // 每页显示多少条

    機能レンダリング（）{
        $アヤックス（{
            URL：" XXX " 、
            データ：{
                ページ：currentPageに、
                pageSizeを：pageSizeを、
                内容：' HUM ' 、
                IMEI：' 867726030890182 ' 、
            }、
            データ型：" JSON " 、
            成功：機能（結果）{
                console.log（結果）。
                // フロントページの描画データへデータをレンダリング*** ******* 
                $（「#example 」）の.text（「こんにちは！」）;
                 // ページング機能のパラメータを呼び出す：現在のページを。総ページ数のAjax機能、（どのように多くのページあたりの合計で割った数、切り上げ）
                setPageで（currentPageに、Math.ceil（result.count / pageSizeを）、レンダリング）
            }
        }）
    }

    レンダリング（）;

    / * *
     *
     * @Param pageCurrent現在の場所ページ
     * @Param pageSumページ
     * @ParamコールバックAJAX呼び出し
     * / 
    関数setPageで（pageCurrent、pageSum、コールバック）{
        $（" #example " ）.bootstrapPaginator（{

            サイズ：「小」、// コントロールのサイズ
            アライメント：「センター」、// 位置制御
            itemTexts：機能{（タイプ、ページ、現在の）
                 スイッチ{（タイプの）
                     ケース 「まず」：
                         リターン 「ホーム」;
                     ケース 」PREV 「：
                         リターン 」前" 。
                    ケース "次の「：
                         リターン 」下一页「;
                     ケース 」最後「：
                         リターン 」末尾「;
                     ケース 」ページ」：
                         リターン・ページ。
                }
            }、
            //は、最初の数ページを表示
            pageCurrent、：currentPageに
             // ページの総数
            TotalPages：PageSum、
             // ボタン操作をクリックすると、関数が実行され、ページレンダリングするAJAX呼び出し
            onPageClickedを：機能（タイプのイベント、originalEvent、ページを）{
                 // AJAXを呼び出すクリックcurrentPageにに割り当てられている現在のページ番号、ページのレンダリング
                currentPageに= ページを。
                コールバック&& コールバック（）
            }
        }）
    }
</ スクリプト>

</ ボディ> 
</ HTML >

フロント

コンテンツ= self.get_argument（' コンテンツ' ）
        IMEI = self.get_argument（' IMEI ' ）
        currentPageに = INT（self.get_argument（' ページ'））  ＃現在のページ 
        のpageSize = INT（self.get_argument（' pageSizeを'））  ＃のページどのように多くの

        クエリ = db_session.query（アラーム）.filter（Alarm.content ==コンテンツ、Alarm.IMEI == IMEI）が   ＃のクエリオブジェクト 
        COUNT = query.count（）  ＃の合計を

        ＃リミットデータxの読み出し、データのオフセットのY X yをスキップ
        ＃の値が得られた発電機である 
        all_alarm = [{ ' 警告'：obj.warning、' CREATETIME '：obj.createtime} ため OBJ で
                     query.limit（ pageSizeを）.offset（（currentPageに - 1）* のpageSize）.values（Alarm.warning、
                                                                                       Alarm.createtime
                                                                                       ）]

        self.write（json.dumps（{ ' コード'：0、' データ'：all_alarm、' カウント'：カウント}、CLS = DatetimeEncoder、
                              ensure_ascii =偽））

バックエンド

アプリケーションコンポーネント：ブートストラップ・ページネータ

：パラメータのアドレスを参照してくださいhttps://www.cnblogs.com/zooey/p/9218089.html

コンポーネントGitHubのアドレスします。https：//github.com/lyonlai/bootstrap-paginator

おすすめ