layui分页laypage结合Flask+Jinja2实现流程

    Layui2.0普通用法
html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.9.0/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="demo-laypage-normal-1"></div>
<div id="demo-laypage-normal-2"></div>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.0/dist/layui.js"></script>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 普通用法
  laypage.render({
    elem: 'demo-laypage-normal-1',
    count: 50 // 数据总数
  });
  laypage.render({
    elem: 'demo-laypage-normal-2',
    count: 100 // 数据总数
  });
});
</script>
 
</body>
</html>

仅需要laypage.render就可以实现分页UI+逻辑回调的实现,此时可以看到后面的属性部分发现一个和重要的回调jump

定义了这个回调后,可以发现点击上一页下一页就能拿到你点击最终当前页以及每页显示的条书。每个后端去实现的逻辑大同小异,如果用flask的话,如果要用url_for去做的话,这个obj.curr无法传进去,只能使用浏览器的方法进行路由跳转。

Flask+Jinja2实现laypage步骤:

1.渲染页码

例如我的Flask路由是这样定义的:

python 复制代码
bp = Blueprint('blog', __name__, url_prefix='/blog', template_folder='templates', static_folder='static')

@bp.route('/index/<int:page>')
def index(page=1):
    post_pg = Post.query.paginate(page=page, per_page=5)
    count = post_pg.total
    return render_template('index.html', **locals())

那么我要访问此路由的URL应该是这种格式: http://127.0.0.1:8000/blog/index/1

首先第一点就是,后端返回模板的值中得带有 count,供laypage组件去进行具体页数的逻辑渲染

js 复制代码
    <script>
        layui.use(function () {
            let $ = layui.jquery
            let laypage = layui.laypage;
            laypage.render({
                elem: 'demo-laypage-theme-1',
                count: '{{ count }}',
                theme: '#1E9FFF',
                limit: 5
            });
        });
    </script>

已知这几点后,我们可以去jump回调那块实现整体逻辑

JS中可以使用Flask返回给模板的count,组件根据返回的值进行赋值即可,效果如下

其他语言页面数据初始化的时候把count一起返回即可

2.定义回调

首先我的limit是定死的,你们可以根据自己需求做去进行修改。逻辑是点击了分页跳转的任意事件,例如具体某一页,上一页下一页等,都会触发jump方法,此时仅需要利用window.location.href配合obj.curr就能跳转到具体的某一页

js 复制代码
<script>
    layui.use(function () {
        let $ = layui.jquery
        let laypage = layui.laypage;
        laypage.render({
            elem: 'demo-laypage-theme-1',
            curr: '{{ page }}',
            count: '{{ count }}',
            theme: '#1E9FFF',
            limit: 5,
            jump: (obj, first) => {
                // 首次不执行
                if (!first) {
                    window.location.href = `/blog/index/${obj.curr}`
                    console.log(obj.curr)
                    console.log(obj.limit)
                }
            }
        });
    });
</script>

此时点击事件触发后,可以发现URL进行了跳转

但是此时可以发现一个问题,URL虽然是变了,页面数据也拿到了,但是分页栏的当前页没有进行同步,此时去看文档可以发现一个关键参数 curr

如果你也是Flask+Jinja2的话你就可以和和我一样,继续使用插值渲染Flask提供的值,因为我的index路由是有一个page参数的,每次访问那个路由page就是我要获取的具体页,拿到具体页后渲染页面后,也需要同步进行分页组件的当前页更新,你只需要进行curr 的定义即可

js 复制代码
<script>
     layui.use(function () {
         let $ = layui.jquery
         let laypage = layui.laypage;
         laypage.render({
             elem: 'demo-laypage-theme-1',
             curr: '{{ page }}',
             count: '{{ count }}',
             theme: '#1E9FFF',
             limit: 5,
             jump: (obj, first) => {
                 // 首次不执行
                 if (!first) {
                     window.location.href = `/blog/index/${obj.curr}`
                     console.log(obj.curr)
                     console.log(obj.limit)
                 }
             }
         });
     });
 </script>

最终效果:

PS:实现思路大致差不多,Layui提供的仅是部分回调介绍,以及他能用的属性以及方法,对照着租用自己去组装就好,觉得有用能实现的点个赞,有问题留言😉

相关推荐
adminIvan几秒前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。20 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒20 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun36 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山37 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特2 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解2 小时前
【深度解析】CSS工程化全攻略(1)
前端·css