因为前端用的layui,其中table有个自带的分页功能,但是需要后端数据配合(就是后端需要个分页器),本人现在用tornado,查了很多,发现是模板语法写法,迫不得已自己构建了一个简单分页器,记录一下!
tornado 后端代码:
def pagination(page, limit, total, res):
'''
返回切片后的数据
:param page: 前端页数
:param limit: 前端分页数据
:param total: 结果数len(res)
:param res:sql结果
:return:
'''
# 将传进来的参数转为int值判断大小
page = int(page)
limit = int(limit)
total = int(total)
# 判断当前页所需数据量是否小于等于总数据数 eg:page*limit<=total ==> 1*10<=42 第一页十条数据小于等于总数据
if page * limit <= total:
# 判断当前是否第一页
if page == 1:
# 是第一页则从零取分页的数据量(不一定是一页十条)
r = res[0: limit * page]
print('page为1时', len(r), r)
return r
elif page == 0:
# page 在前端传值不可能为0,但避免客户瞎搞,提前预测
print('页数不能为0')
else:
# 取除page=1外的值 eg:page=2,limit=10 ==>res[10*(2-1):10*2] <====>res[10:20]
# 这样就能取完值,但最后一页需要另外取值
r = res[limit * (page - 1):limit * page]
print('page不为1时:', len(r), r)
return r
else:
# 当前页所需数据量大于总数据数则取最后一页的值
# total_page 可分页数 remainder 余数 若余数大于零则需要在页数加一
total_page, remainder = divmod(total, limit)
# 余数大于零,则取列表中最后的几条值
if remainder > 0:
# 余数大于零是在可分页数加一,代表最后一页是用来显示余下数据
total_page += 1
# total_page:可分页数+1,最后一页是为了显示不足limit的值,当可分页数==前端页数,就取余数值
if total_page == page:
print('数据有余数,余数为几则获取几个元素')
print('total_page+=1', total_page)
# 余数为几,则取多少条数据
r = res[-remainder:]
print(r)
return r
else:
# 否则表示页数超了,前端不会传超出可分页数值,所以此段代码可要可不要
print('数据只能分' + str(total_page) + '页,您给出:' + str(page))
if __name__ == '__main__':
a = []
for i in range(1, 39):
a.append(i)
print(a)
# print(a[-3:])
b = len(a)
print(b)
pagination(6, 10, b, a)
前端代码:(前端代码节选,包含时间、表格、分页、表格重载、下拉框数据、导出为excel文件)
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
<div class="layui-inline" style="margin-right: 0">
<div class="layui-input-inline">
<!--<input type="text" class="layui-input" id="test25" placeholder="开始时间"-->
<input type="text" class="layui-input" id="test25" placeholder="开始时间"
style="height: 38px;">
</div>
</div>
<div class="layui-inline">
<a>—</a>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test26" placeholder="结束时间"
style="height: 38px;">
</div>
</div>
<div class="layui-inline" style="width: 640px;">
<select id="doors" name="doors" xm-select="select3" xm-select-skin="normal">
</select>
</div>
<div class="layui-inline">
<div class="demoTable">
<button class="layui-btn layuiadmin-btn-list" id="select">查询
</button>
<button class="layui-btn layuiadmin-btn-list" data-type="add" id="export">导出
</button>
</div>
</div>
</div>
<!--表格-->
<div class="layui-card-body">
<table class="layui-hide" id="test"></table>
<!--lay-filter="test"-->
<div class="setPageDiv">
<div class="Pagination" id="pagination"></div>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<span style="padding-left: 50%;font-size: 25px;">刷卡记录</span>
</div>
</script>
</div>
</div>
</div>
</div>
layui.use(['index', 'table', "form", "jquery", "layer", "laydate", "table", "element", 'excel'], function () {
var $ = layui.jquery
, table = layui.table
, layer = layui.layer
, laydate = layui.laydate
, admin = layui.admin
, form = layui.form
, excel = layui.excel
, formSelects = layui.formSelects
, element = layui.element;
var nowTime = new Date();
var startTime = laydate.render({
elem: '#test25',
type: 'datetime',
max: 'nowTime',//默认最大值为当前日期
done: function (value, date) {
alert(value); //得到日期生成的值,如:2017-08-18
// console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endTime.config.min = {
year: date.year,
month: date.month - 1,//关键
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
};
}
});
var endTime = laydate.render({
elem: '#test26',
type: 'datetime',
max: 'nowTime',
done: function (value, date) {
alert(value); //得到日期生成的值,如:2017-08-18
// console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
startTime.config.max = {
year: date.year,
month: date.month - 1,//关键
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}
}
});
//显示表格数据
table.render({
elem: '#test'//重载的表格
, url: 'http://192.168.1.123:8977/get_table' //数据的地址
// , url: 'http://127.0.0.1:8977/get_table' //数据的地址
, method: 'post'
, cols: [[
{type: 'checkbox', fixed: 'left'}
, {field: 'id', title: 'ID', width: 80, sort: true, align: 'left'}
, {field: 'name', title: '事件类型'}
, {field: 'time', title: '时间', align: 'left'}
, {field: 'address', title: '地点', sort: true, align: 'left'}
, {field: 'msg', title: '信息', sort: true, align: 'left'}
]] //设置表头
, page: true
, limit: 10
, id: '#tabledata' // 这个ID是干嘛用的??? 按钮 点击搜 好你试一下
, where: { //设定异步数据接口的额外参数,任意设
'begintime': $("#test25").val()//获取输入框的值
, 'endtime': $("#test26").val()//获取输入框的值
, 'doors': JSON.stringify(formSelects.value('select3', 'val'))//获取输入框的值
}
});
$(document).on('click', '#select', function () {//selectzg id被点击时进入
//这里以搜索为例
table.reload('#tabledata', {
where: { //设定异步数据接口的额外参数,任意设
'begintime': $("#test25").val()//获取输入框的值
, 'endtime': $("#test26").val()//获取输入框的值
, 'doors': JSON.stringify(formSelects.value('select3', 'val'))//获取输入框的值
}
});
});
//以下代码可以在console中运行测试, 结果查看基础示例第一个
formSelects.data('select3', 'server', {
// url: 'http://127.0.0.1:8977/get_select'
url: 'http://192.168.1.123:8977/get_select'
});
//导出
$('#export').on('click', function () {
$.ajax({
url: 'http://192.168.1.123:8977/get_table',
// url: 'http://127.0.0.1:8977/getdata',
method: 'post',
dataType: 'json',
data: {
'begintime': $("#test25").val()//获取输入框的值
, 'endtime': $("#test26").val()//获取输入框的值
, 'doors': JSON.stringify(formSelects.value('select3', 'val'))//获取输入框的值
},
success: function (res) {
// 假如返回的 res.data 是需要导出的列表数据
console.log(res.data);// [{name: 'wang', age: 18, sex: '男'}, {name: 'layui', age: 3, sex: '女'}]
// 1. 数组头部新增表头
res.data.unshift({id: '序号', name: '事件类型', time: '时间', address: '地点', msg: '信息'});
// 2. 如果需要调整顺序,请执行梳理函数
var data = excel.filterExportData(res.data, [
'id',
'name',
'time',
'address',
'msg'
]);
// 3. 执行导出函数,系统会弹出弹框
excel.exportExcel({
sheet1: data
}, '刷卡记录.xlsx', 'xlsx');
}
});
});
})
页面展示:(10条一页)
页面展示(20条一页)