ref: layui, listdata;add: list pagination

This commit is contained in:
liuyihui 2021-12-30 15:30:10 +08:00
parent 8476f11897
commit 05139f4ff2
22 changed files with 699 additions and 340 deletions

32
app.py
View File

@ -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__':

View File

@ -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",
]

View File

@ -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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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}

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

5
static/layui/layui.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -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;
}

View File

@ -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;">
<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 style="margin: 2% auto;">
<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="col-sm">
<div style="width: 36%;height: 60%;position: relative;">
<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: 2% auto;">
<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 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 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 class="layui-col-md4">
<a href="/new" class="layui-btn layui-btn-radius layui-btn-normal">下一个</a>
</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 class="layui-col-md4">
<a href="/elo?win=1" class="layui-btn layui-btn-radius layui-btn-normal">Ta</a>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footerRow1">
<div class="container">
<div class="row">
<div class="col-sm">
<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="col-sm">
<div class="layui-col-md6">
<p>Made By <a href="https://foolishfox.cn">Fox</a></p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>

View File

@ -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">
<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="col-sm">
<div class="layui-col-md6">
<p>Made By <a href="https://foolishfox.cn">Fox</a></p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>