pagination

This commit is contained in:
Flummi 2016-08-30 10:50:06 +00:00
parent 0621234e50
commit 852af35e46
5 changed files with 63 additions and 9 deletions

4
s/jquery-3.1.0.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,6 @@
html, body {
height: 100%;
}
body { body {
width: 100%; width: 100%;
margin: 1em auto 3em auto; margin: 1em auto 3em auto;

18
s/test.js Normal file
View File

@ -0,0 +1,18 @@
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
$.ajax({
url: './api/p/'+$('#posts').data('last'),
dataType: 'json',
success: function(msg) {
var html = "";
for(var i = 0; i < msg.items.length; i++)
if(msg.items[i].id)
html += "<a href=\"./"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"./t/"+msg.items[i].id+".png\" /></a>\n";
$('#posts').append(html);
$('#posts').data('last', msg.last);
}
});
}
});
});

View File

@ -5,12 +5,17 @@
<link rel="icon" type="image/gif" href="./s/favicon.gif" /> <link rel="icon" type="image/gif" href="./s/favicon.gif" />
<link rel="stylesheet" type="text/css" href="./s/test.css"> <link rel="stylesheet" type="text/css" href="./s/test.css">
</head> </head>
<div class="body"> <body>
<div class="body">
<div id="posts" data-last="{{ last }}">
{% for item in items %} {% for item in items %}
<a href="./{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="./t/{{ item.id }}.png" /></a> <a href="./{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="./t/{{ item.id }}.png" /></a>
{% endfor %} {% endfor %}
</div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div style="position: fixed; top:0;right:0" id="debug"></div>
<script src="./s/jquery-3.1.0.min.js"></script>
<script src="./s/test.js"></script>
</body> </body>
</html> </html>

View File

@ -50,10 +50,14 @@ function Websrv(tbot, tsql, tlib) {
else if(filePath == "./test") { // (test)mainpage else if(filePath == "./test") { // (test)mainpage
var tpl = swig.compile(templates.test); var tpl = swig.compile(templates.test);
var data = { items: [] }; var data = {
sql.query("select `id`,`mime` from `f0ck`.`items` order by `id` desc limit 20", (err, rows, fields) => { items: [],
last: 10000
};
sql.query("select `id`,`mime` from `f0ck`.`items` order by `id` desc limit 100", (err, rows, fields) => {
rows.forEach((e,i,a) => { rows.forEach((e,i,a) => {
data.items.push({ "id": e.id, "mime": e.mime }); data.items.push({ "id": e.id, "mime": e.mime });
data.last = e.id;
}); });
res.writeHead(200, { 'Content-Type': 'text/html' }); res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(tpl(data), 'utf-8'); res.end(tpl(data), 'utf-8');
@ -214,6 +218,26 @@ function Websrv(tbot, tsql, tlib) {
res.end(JSON.stringify(items), 'utf-8'); res.end(JSON.stringify(items), 'utf-8');
}); });
} }
else if(url[2] == "p" && Number.isInteger(parseInt(url[3]))) { // pagination
var eps = 50;
var id = url[3];
sql.query("select * from `f0ck`.`items` where `id` < ? order by `id` desc limit ?", [id, eps], (err, rows, fields) => {
var items = {
"items": [],
"last": id
};
rows.forEach((e,i,a) => {
items.items.push({
'id': e.id,
'mime': e.mime
});
items.last = e.id;
});
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(JSON.stringify(items), 'utf-8');
});
}
else if(Number.isInteger(parseInt(url[2]))) { // Item else if(Number.isInteger(parseInt(url[2]))) { // Item
var query = "select * from `f0ck`.`items` where `id` = ? limit 1; " // get item var query = "select * from `f0ck`.`items` where `id` = ? limit 1; " // get item
+ "select `id` from `f0ck`.`items` where `id` = (select min(`id`) from `f0ck`.`items` where `id` > ?); " // get previous item + "select `id` from `f0ck`.`items` where `id` = (select min(`id`) from `f0ck`.`items` where `id` > ?); " // get previous item