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提供的仅是部分回调介绍,以及他能用的属性以及方法,对照着租用自己去组装就好,觉得有用能实现的点个赞,有问题留言😉

相关推荐
广州一芯未来科技有限公司RFID7 分钟前
科技惊艳:RFID技术引领被装物联网信息化革新
大数据·开发语言·前端·网络安全·信息与通信·rfid·数字化
初学者7.8 分钟前
Lodash源码分析-union,unionBy,unionWith
前端·javascript
书山有路_邓3 小时前
vscode 如何鼠标双击时选择带有-的
前端
张三风啊5 小时前
vue config 接口地址配置
前端·javascript·vue.js
多情码农无情键5 小时前
浏览器漫谈HTML--2.2从表单标签看vue的响应式系统 理论+实战
前端·javascript·html
Uluoyu5 小时前
Vue.Draggable使用nested-with-vmodel进行拖拽
前端·javascript·vue.js
北极糊的狐5 小时前
vue页面成绩案例(for渲染表格/删除/添加/统计总分/平均分/不及格显红色/输入内容去首尾空格trim/输入内容转数字number)
前端·javascript·vue.js
边洛洛6 小时前
路由传参、搜索、多选框勾选、新增/编辑表单复用
前端·javascript·vue.js
OEC小胖胖8 小时前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
川石教育9 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件