ref: layui, listdata;add: list pagination

app.py

@@ -46,17 +46,31 @@ def elo_res():
 
 @app.route('/list', methods=["GET"])
 def rank_list():
-    b = int(request.args.get('b'))
-    len = int(request.args.get('len')) if request.args.get('len') else 10
+    return render_template('list.html')
 
-    res = get_rank(ses, b, len)
-    kw = dict()
-    for k in range(len):
-        kw["P{:d}rank".format(k)] = b + k
-        kw["P{:d}name".format(k)] = res[k].name
-        kw["P{:d}rate".format(k)] = '{:.2f}'.format(res[k].rate)
+@app.route('/listdata', methods=["GET"])
+def rank_list_data():
+    page = int(request.args.get('page'))
+    limit = int(request.args.get('limit'))
 
-    return render_template('list.html', **kw)
+    ind = (page-1)*limit + 1
+    num = get_counts(ses)
+    res = get_rank(ses, ind, limit)
+
+    kw = {
+        "code": 0,
+        "msg": "",
+        "count": num,
+        "data": []
+    }
+    for k in range(limit):
+        kw["data"].append({
+            "rank": ind + k,
+            "name": res[k].name,
+            "rate": "{:.2f}".format(res[k].rate)
+        })
+
+    return kw
 
 
 if __name__ == '__main__':

lib/__init__.py

@@ -9,12 +9,13 @@
 # here put the import lib
 from .db_init import Person
 from .elo import set_result
-from .utils import match, get_rank, get_session
+from .utils import match, get_session, get_counts, get_rank
 
 __all__ = [
     "match",
     "Person",
     "set_result",
+    "get_session",
     "get_rank",
-    "get_session"
+    "get_counts",
 ]

lib/utils.py

@@ -28,6 +28,10 @@ def get_session() -> Session:
     '''
     return session_maker()
 
+def get_counts(ses: Session) -> int:
+    res = ses.query(Person).count()
+    return res
+
 def get_person(ses: Session) -> Person:
     '''get random person
 

static/layui/css/modules/code.css

@@ -0,0 +1 @@
+html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}

static/style.css

@@ -1,161 +0,0 @@
-html, body {
-    width         : 100%;
-    height        : 100%;
-}
-body {
-    background    : #EAEDF0;
-}
-img {
-    max-width     : 60%;
-    max-height    : 100%;
-    top           : 0;
-    left          : 0;
-    right         : 0;
-    bottom        : 0;
-    position      : absolute;
-    margin        : auto;
-}
-a {
-    color         : #ddd;
-    text-decoration: none;
-}
-.bto {
-    width         : 30%;
-    height        : 100%;
-    border        : none;
-    background    : #A5DE37;
-    border-color  : #A5DE37;
-    color         : #FFF;
-    border-radius : 100px;
-    margin        : 5px;
-}
-* {
-    text-align    : center;
-    margin        : 0 auto;
-    padding       : 0;
-}
-.header {
-    background    : #343a40;
-    height        : 9%;
-    color         : #ddd;
-}
-.header .textlogo {
-    float         : left;
-    font-size     : 5vh;
-    margin-left   : 3%;
-    margin-top    : 0.5%;
-}
-.header .nav {
-    float         : right;
-    font-size     : 2.5vh;
-    margin-right  : 2%;
-    margin-top    : 1.2%;
-    width         : 30%;
-}
-.main {
-    width         : 90%;
-    height        : 82%;
-    background    : #ffffff;
-    margin-top    : 0.5%;
-    border-radius : 30px;
-    padding       : 0.5%;
-}
-.footer {
-    width         : 100%;
-    height        : 5%;
-    color         : #ddd;
-    margin-top    : 0.5%;
-    font-size     : 2vh;
-}
-.footerRow1 {
-    background    : #343a40;
-    width         : 100%;
-    height        : 100%;
-}
-.footerRow2 {
-    background    : #eee;
-    height        : 25%;
-    width         : 100%;
-    color         : #222;
-}
-.container {
-    max-width     : 720px;
-    width         : 100%;
-    height        : 100%;
-    padding-right : 15px;
-    padding-left  : 15px;
-    margin-right  : auto;
-    margin-left   : auto;
-}
-.row {
-    display       : -webkit-box;
-    display       : -ms-flexbox;
-    display       : flex;
-    -ms-flex-wrap : wrap;
-    flex-wrap     : wrap;
-    margin-right  : -15px;
-    margin-left   : -15px;
-    height        : 100%;
-}
-.col-sm {
-    flex-basis    : 0;
-    flex-grow     : 1;
-    max-width     : 100%;
-    height        : 100%;
-    text-align    : center;
-}
-.col-sm p {
-    margin-top    : 1%;
-}
-.tg {
-    border-collapse: collapse;
-    border-color  : #aaa;
-    border-spacing: 0;
-    border-style  : solid;
-    border-width  : 1px;
-    width         : 75%;
-    margin        : 3% auto;
-}
-td, th {
-    text-align    : center;
-    height        : 3%;
-}
-.tg td {
-    background    : #fff;
-    border-color  : #aaa;
-    border-style  : solid;
-    border-width  : 0px;
-    color         : #333;
-    font-size     : 14px;
-    overflow      : hidden;
-    padding       : 10px 5px;
-    word-break    : normal;
-}
-.tg th {
-    background    : #f38630;
-    border-color  : #aaa;
-    border-style  : solid;
-    border-width  : 0px;
-    color         : #fff;
-    font-size     : 14px;
-    font-weight   : normal;
-    overflow      : hidden;
-    padding       : 10px 5px;
-    word-break    : normal;
-}
-.tg .tg-7d57 {
-    background    : #FCFBE3;
-    border-color  : inherit;
-    vertical-align: top;
-}
-.tg .tg-0pky {
-    border-color  : inherit;
-    vertical-align: top;
-}
-.tg .tg-0lax {
-    vertical-align: top;
-}
-.tg .tg-dg7a {
-    background    : #FCFBE3;
-    vertical-align: top;
-}

templates/index.html

@@ -4,86 +4,83 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>ELO Star</title>
-        <!-- <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> -->
-        <script src="{{ url_for('static', filename='jquery-3.1.1.min.js') }}"></script>
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
-    </head>
-    <body>
-        <header id="header" class="header">
-            <div class="textlogo"><p><a href="/">ELO Star</a></p></div>
-            <div class="nav">
-                <div class="row">
-                    <div class="col-sm">
-                        <p><a href="/list?b=1&len=10">排行榜</a></p>
-                    </div>
-                    <div class="col-sm">
-                        <p><a href="/">添加资料</a></p>
-                    </div>
-                    <div class="col-sm">
-                        <p><a href="https://git.foolishfox.cn/fox/ELOStar">Gitea</a></p>
-                    </div>
-                </div>
-            </div>
-        </header>
-        <script>
-            function title_height() { 
-                var height = document.getElementById('header').clientHeight;
-                $("#title").css("line-height", height*0.5+"px");
+        <script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='layui/css/layui.css') }}">
+        <style>
+            .layui-footer {
+                position: fixed;left: 0;right: 0;bottom: 0;z-index: 990;height: 7vh;line-height: 7vh;
+                padding: 0 15px;box-shadow: -1px 0 4px rgb(0 0 0 / 12%);background-color: #FAFAFA;
             }
-        </script>
-        <div class="main">
-            <div style="margin-top: 2%;height: 5%;">
+            .main {
+                text-align: center;background: #fff;height: 80vh;
+                margin-top: 2vh;padding-top: 1vh;padding-bottom: 1vh;border-radius: 20px;
+            }
+            img {
+                max-width: 60%;max-height : 100%;position: absolute;
+                top: 0; left: 0;right: 0;bottom: 0;margin: auto;
+            }
+            a {
+                color: #fff;text-decoration: none;
+            }
+        </style>
+    </head>
+    <body style="background: #EAEDF0;">
+        <div class="layui-header layui-bg-cyan" style="height: 9vh;">
+            <div style="float: left;font-size: 28px;margin-left: 5vw;line-height: 9vh;">
+                <a href="/">ELO Star</a>
+            </div>
+            <ul class="layui-nav layui-bg-cyan" style="height: 9vh;float: right;">
+                <li class="layui-nav-item layui-this"><a href="/new">比较</a></li>
+                <li class="layui-nav-item"><a href="/list">排行榜</a></li>
+                <li class="layui-nav-item"><a href="/">添加资料</a></li>
+                <li class="layui-nav-item"><a href="https://git.foolishfox.cn/fox/ELOStar">Gitea</a></li>
+            </ul>
+        </div>
+        <div class="layui-container main">
+            <div class="layui-row" style="margin-top: 2vh;height: 5vh;">
                 <h1>你对谁更有好感？</h1>
             </div>
-            <div style="height: 70%;width: 100%;margin-top: 3%;">
-                <div class="row">
-                    <div class="col-sm">
-                        <div style="width: 36%;height: 60%;position: relative;">
-                            <img id="P0" alt="Person 0" src={{ p0src }}>
-                        </div>
-                        <div style="margin: 2% auto;">
-                            姓名<br /><p id="N0">{{ p0name }}</p><br />
-                            代表作<br /><p id="W0">{{ p0work }}</p><br />
-                        </div>
+            <div class="layui-row" style="margin-top: 3vh;height: 60vh;">
+                <div class="layui-col-md4" style="text-align: center;">
+                    <div style="width: 60%;height: 30vh;position: relative;display: inline-block;">
+                        <img id="P0" alt="Person 0" src={{ p0src }}>
                     </div>
-                    <div class="col-sm">
-                        <div style="width: 36%;height: 60%;position: relative;">
-                            <img id="P1" alt="Person 1" src={{ p1src }}>
-                        </div>
-                        <div style="margin: 2% auto;">
-                            姓名<br /><p id="N1">{{ p1name }}</p><br />
-                            代表作<br /><p id="W1">{{ p1work }}</p><br />
-                        </div>
+                    <div style="margin: 3vh auto;height: 15vh;">
+                        姓名<br /><p id="N0">{{ p0name }}</p><br />
+                        代表作<br /><p id="W0">{{ p0work }}</p><br />
+                    </div>
+                </div>
+                <div class="layui-col-md4 layui-col-md-offset4" style="text-align: center;">
+                    <div style="width: 60%;height: 30vh;position: relative;display: inline-block;">
+                        <img id="P1" alt="Person 1" src={{ p1src }}>
+                    </div>
+                    <div style="margin: 2vh auto;height: 15vh;">
+                        姓名<br /><p id="N1">{{ p1name }}</p><br />
+                        代表作<br /><p id="W1">{{ p1work }}</p><br />
                     </div>
                 </div>
             </div>
-            <div style="height: 7%;width: 75%;margin-top: 2%;">
-                <div class="row">
-                    <div class="col-sm">
-                        <input class="bto" type="button" value="Ta" onclick="window.location.href='/elo?win=0'">
-                    </div>
-                    <div class="col-sm">
-                        <input class="bto" type="button" value="下一个" onclick="window.location.href='/new'">
-                    </div>
-                    <div class="col-sm">
-                        <input class="bto" type="button" value="Ta" onclick="window.location.href='/elo?win=1'">
-                    </div>
+            <div class="layui-row" style="margin-bottom: 3vh;height: 4vh;">
+                <div class="layui-col-md4">
+                    <a href="/elo?win=0" class="layui-btn layui-btn-radius layui-btn-normal">Ta</a>
+                </div>
+                <div class="layui-col-md4">
+                    <a href="/new" class="layui-btn layui-btn-radius layui-btn-normal">下一个</a>
+                </div>
+                <div class="layui-col-md4">
+                    <a href="/elo?win=1" class="layui-btn layui-btn-radius layui-btn-normal">Ta</a>
                 </div>
             </div>
         </div>
-        <footer class="footer">
-            <div class="footerRow1">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-sm">
-                            <p>© 2021 ELO Star</p>
-                        </div>
-                        <div class="col-sm">
-                            <p>Made By <a href="https://foolishfox.cn">Fox</a></p>
-                        </div>
-                    </div>
+        <div class="layui-footer layui-bg-cyan" style="text-align: center;">
+            <div class="layui-row">
+                <div class="layui-col-md6">
+                    <p>© 2021 ELO Star</p>
+                </div>
+                <div class="layui-col-md6">
+                    <p>Made By <a href="https://foolishfox.cn">Fox</a></p>
                 </div>
             </div>
-        </footer>
+        </div>
     </body>
 </html>

templates/list.html

@@ -4,109 +4,54 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>ELO Star</title>
-        <!-- <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> -->
-        <script src="{{ url_for('static', filename='jquery-3.1.1.min.js') }}"></script>
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
-    </head>
-    <body>
-        <header id="header" class="header">
-            <div class="textlogo"><p><a href="/">ELO Star</a></p></div>
-            <div class="nav">
-                <div class="row">
-                    <div class="col-sm">
-                        <p><a href="/list?b=1&len=10">排行榜</a></p>
-                    </div>
-                    <div class="col-sm">
-                        <p><a href="/">添加资料</a></p>
-                    </div>
-                    <div class="col-sm">
-                        <p><a href="https://git.foolishfox.cn/fox/ELOStar">Gitea</a></p>
-                    </div>
-                </div>
-            </div>
-        </header>
-        <script>
-            function title_height() { 
-                var height = document.getElementById('header').clientHeight;
-                $("#title").css("line-height", height*0.5+"px");
+        <script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='layui/css/layui.css') }}">
+        <style>
+            .layui-footer {
+                position: fixed;left: 0;right: 0;bottom: 0;z-index: 990;height: 7vh;line-height: 7vh;
+                padding: 0 15px;box-shadow: -1px 0 4px rgb(0 0 0 / 12%);background-color: #FAFAFA;
             }
-        </script>
-        <div class="main">
-            <table class="tg">
+            .main {
+                text-align: center;background: #fff;height: 80vh;
+                margin-top: 2vh;padding-top: 1vh;padding-bottom: 1vh;border-radius: 20px;
+            }
+            a {
+                color: #fff;text-decoration: none;
+            }
+        </style>
+    </head>
+    <body style="background: #EAEDF0;">
+        <div class="layui-header layui-bg-cyan" style="height: 9vh;">
+            <div style="float: left;font-size: 28px;margin-left: 5vw;line-height: 9vh;">
+                <a href="/">ELO Star</a>
+            </div>
+            <ul class="layui-nav layui-bg-cyan" style="height: 9vh;float: right;">
+                <li class="layui-nav-item"><a href="/new">比较</a></li>
+                <li class="layui-nav-item layui-this"><a href="/list">排行榜</a></li>
+                <li class="layui-nav-item"><a href="/">添加资料</a></li>
+                <li class="layui-nav-item"><a href="https://git.foolishfox.cn/fox/ELOStar">Gitea</a></li>
+            </ul>
+        </div>
+        <div class="layui-container main">
+            <table class="layui-table" lay-data="{url:'/listdata', page:true}">
                 <thead>
                     <tr>
-                        <th class="tg-0pky" style="width: 30%;">排名</th>
-                        <th class="tg-0pky" style="width: 35%;">姓名</th>
-                        <th class="tg-0lax" style="width: 35%;">分数</th>
+                        <th lay-data="{field:'rank'}">排名</th>
+                        <th lay-data="{field:'name'}">姓名</th>
+                        <th lay-data="{field:'rate'}">分数</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <tr>
-                        <td class="tg-7d57">{{ P0rank }}</td>
-                        <td class="tg-7d57">{{ P0name }}</td>
-                        <td class="tg-dg7a">{{ P0rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-0pky">{{ P1rank }}</td>
-                        <td class="tg-0pky">{{ P1name }}</td>
-                        <td class="tg-0lax">{{ P1rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-7d57">{{ P2rank }}</td>
-                        <td class="tg-7d57">{{ P2name }}</td>
-                        <td class="tg-dg7a">{{ P2rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-0lax">{{ P3rank }}</td>
-                        <td class="tg-0lax">{{ P3name }}</td>
-                        <td class="tg-0lax">{{ P3rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-dg7a">{{ P4rank }}</td>
-                        <td class="tg-dg7a">{{ P4name }}</td>
-                        <td class="tg-dg7a">{{ P4rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-0lax">{{ P5rank }}</td>
-                        <td class="tg-0lax">{{ P5name }}</td>
-                        <td class="tg-0lax">{{ P5rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-dg7a">{{ P6rank }}</td>
-                        <td class="tg-dg7a">{{ P6name }}</td>
-                        <td class="tg-dg7a">{{ P6rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-0lax">{{ P7rank }}</td>
-                        <td class="tg-0lax">{{ P7name }}</td>
-                        <td class="tg-0lax">{{ P7rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-dg7a">{{ P8rank }}</td>
-                        <td class="tg-dg7a">{{ P8name }}</td>
-                        <td class="tg-dg7a">{{ P8rate }}</td>
-                    </tr>
-                    <tr>
-                        <td class="tg-0lax">{{ P9rank }}</td>
-                        <td class="tg-0lax">{{ P9name }}</td>
-                        <td class="tg-0lax">{{ P9rate }}</td>
-                    </tr>
-                </tbody>
             </table>
         </div>
-        <footer class="footer">
-            <div class="footerRow1">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-sm">
-                            <p>© 2021 ELO Star</p>
-                        </div>
-                        <div class="col-sm">
-                            <p>Made By <a href="https://foolishfox.cn">Fox</a></p>
-                        </div>
-                    </div>
+        <div class="layui-footer layui-bg-cyan" style="text-align: center;">
+            <div class="layui-row">
+                <div class="layui-col-md6">
+                    <p>© 2021 ELO Star</p>
+                </div>
+                <div class="layui-col-md6">
+                    <p>Made By <a href="https://foolishfox.cn">Fox</a></p>
                 </div>
             </div>
-        </footer>
+        </div>
     </body>
 </html>