Flask+LayUI开发手记（一）：LayUI表格的前端数据分页展现

本文链接：https://blog.youkuaiyun.com/java15655057970/article/details/144680160

用数据表格table展示系统数据，是LayUI的基本功能，编码十分简单，就是通过table.render()渲染，把属性配置好就OK了，十分方便，功能也十分强大。

不过，在实现时，把table的有个功能却理解错了，就是分页。

table.render()的分页属性，主要包括三个，page、limit和limits，page是逻辑值，设置为true是分页，limit是每页显示行数，limits是设置面显示行数的多条选项。应该说，这几个属性都十分清晰，按说明配好后，果然分页控制栏就显示出来了，真不错。

原来以为只要在服务端把需要的数据生成好传到前端来，分页就算完成了，但做了一段时间就发现不对了。开始做无外乎就是用户、角色、权限编辑，记录都很少，用不上分页，等做日志显示时一下就看出错误了，分页设的16条，怎么系统在一个页面把全部100多条数据都展示了。

然后仔细研究才发现，这三个分页属性设置好，只是相当于打了了前端控制的开关，界面上显示出分页流程控件，可以进行分页切换操作，但数据展示内容，前端不管，还是要后端做处理的。table会在每次点击一次页面切换时，就向后端提交一次数据请求，请求中含有page和limit属性，后端按这两个参数把当前页的数据记录生成传下来。

我是一直不喜欢这种每换一次页就要向后端提数据请求的实现逻辑的。一页才展示10几条记录，每次换页都要去取数据，来来回回的，性能不好，对后端压力有些太多了。而且，大部分数据展示功能，总共也就是几百条数据，完全可以一次把数据取到前端来，只在前端做处理就可以了。这样无疑大大减轻后端服务器的压力，而且控制上也比较简单是吧。

也因此，我把系统需要进行分页展示的功能分成两种模式实现，一是前端数据分页，二是后端数据分页。前端数据分页，即一次性提取后台数据到前端，由前端实现全部的分页数据处理控制，后端数据分页，即前端展示分页操作栏，所有的分页操作均提交到后端进行数据请求，由后端生成分页数据传给前端。

下面这些程序，就是前端数据分页功能的实现，程序主要分为三个部分，前端html、JS实现、后端数据处理服务。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>CMS系统-登录日展示</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
</head>
<body>

<table id="admin_log" lay-filter="admin_log" style="margin-top:-15px;"></table>

<script type="text/html" id="toolBar">
    <div class="layui-btn-container">
        <div class="layui-inline"  style="display:inline;margin-right:10px;">
            <label class="layui-btn-sm">日期范围</label>
            <div class="layui-input-inline">
                <input type="text" id="bdate" placeholder="开始日期" autocomplete="off" class="layui-input layui-btn-sm">
            </div>
            <label