用了一段时间，感觉layui比bootstrap 方便了很多。在js操作上比bootstrap减少了许多的代码量。

今天遇到需要前台分页。当然，不是表格，如果是表格的话。使用yalui table和bootstrap table都很简单。

但是今天是要随意分页。任意标签。

看了看官方文档。也不是很懂，网上看了看。最后涂涂改改。终于中了出来。开心ing

人生就像魔法书，涂涂改改又是几千年。

需求：前台显示列表。<ul>  <li>

　　　分页操作

　　　　但是后台一直都是表格控件来完成的。这不用表格头疼。   逻辑分页比较简单。但是写的时候，后台调用本方法的时候，采用的是物理分页。但是layui 分页插件，看着比较适合逻辑分页。但是我有不能这样做。

　　　　最后弄出来了，思路如下：

　　　　1.加载layui库

　　　　2.发送ajax请求，获取数据。在这里，应该获取的是数据的总数。但是我懒。用的还是带有数据的接口。分页接口数据返回的里面带有数据总数。这个需要看使用的是什么分页。这里使用的是mybaits-plus的分页插件

　　　　3.监听jump: function(obj, first)方法。这个方法当你点击下一页或者分页的下标的时候会执行。进入的时候是第一页。所以会执行一次

　　　　4.然后在监听的函数里面在请求一次ajax。然后获得数据，渲染到页面。

代码如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" th:href="@{/favicon.ico}" />
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <script src="./lib/layui/layui.js" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
</head>
<body>

<ul id="test">
   
</ul>
 <div id="blogList"></div>

</body>

<script>
    layui.use(['jquery','laypage', 'layer','table'],function(){
       var $ =layui.jquery,
           laypage=layui.laypage,
           layer=layui.layer,
           table=layui.table;
       var pages=1;
       var limits=2;
        $.ajax({
           url:'/article/artList',
            type:'get',
            data:{page:pages,limit:limits},
            dataType:'json',
            success:function (datas) {
                laypage.render({
                    elem: 'blogList'
                    ,count: datas.count //数据总数，从服务端得到
                    ,limit:2
                    ,jump: function(obj, first){
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                          $.ajax({
                              url:'/article/artList',
                              type:'get',
                              data:{page:obj.curr,limit:obj.limit},
                              dataType:'json',
                              success:function (data1) {
                                  var arr=[];
                                  arr.splice(0,arr.length);
                                  layui.each(data1.data, function(index, item){

                                      arr.push('<li>'+ item.title +'</li>');
                                  });
                                  console.log(arr);
                                  $('#test').html(arr);

                              }

                          });

                    }
                });
            }
        });

       
    });

</script>
</html>

当layui与分页相遇--bootstrap何去何从的更多相关文章

  1. LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  2. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  3. Layui Table 分页记忆选中

    Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...

  4. layui的分页

    layui的分页需要后台配合,这边我使用的是pagehelper @RequestMapping("findGoods") private String findGoods(Int ...

  5. layui table 分页 序号始终从”1“开始解决方法

    在用Layui table 分页显示数据,用 type:"numbers" 进行显示序号有以下的问题 1.表格自带的分页,page:true 这种分页,在切换页面的时候序号可以正常 ...

  6. MUI 结合layui实现分页

    mui自带有分页,在ui上我还是认为layui的友好点. 第三方插件: template-web.js-----------------前端数据绑定 layui.js.layui.css------- ...

  7. 如何使用前端分页框架bootstrap paginator

    前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能.在实现交互良好的页面翻页功能时,往往还需要配合使用后端分页框架pagehelper.pagehelper ...

  8. Bootstrap分页插件--Bootstrap Paginator

    开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: & ...

  9. bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)

    html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...

随机推荐

  1. 冲刺随笔——Day_Seven

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...

  2. 第 4篇 Scrum 冲刺博客

    一.站立式会议 1.站立式会议照片 2.昨天已完成的工作 登录信息的匹配 3.今天计划完成的工作 ①售货员页面功能 ②销售排行 4.工作中遇到的困难 ①页面按钮太过复杂,逻辑错乱 ②有的同学数据库驱动 ...

  3. webstorm2020最新安装破解教程方法永久激活码

    现在webstorm的版本已经更新到2020.3了,还没有升级的小伙伴们赶紧升级啦,本文教大家如何安装webstorm2020.3版本并且破解,此方法亲测百分百可以永久激活webstorm2020.3 ...

  4. OI学习过程记录

    这帖子本来是教练为了给低年级学生分享经验而让我写的学习经历,不过等我退役之后可能就变成回忆录了. 初三 WC 前:上了正睿的线上课程,练了一些模拟赛,同时也正在学文化课. 然后,莫名奇妙1膜考了全校前 ...

  5. NOI Online #1 入门组 魔法

    全网都是矩阵快速幂,我只会倍增DP 其实这题与 AcWing 345. 牛站 还是比较像的,那题可以矩阵快速幂 / 倍增,这题也行. 先 \(Floyd\) 预处理两点之间不用魔法最短距离 \(d_{ ...

  6. TMOOC-1709-小明复仇

    题目描述 小明所在的世界上一共有n个城市,城市间有m条双向道路.小明现在在城市1,他想到位于城市n的小韩隆家询问他为什么没有将自己的五三复原完成.由于小韩隆手下有许多小弟,小明担心自己可能再也回不来, ...

  7. EM 算法-对鸢尾花数据进行聚类

    公号:码农充电站pro 主页:https://codeshellme.github.io 之前介绍过K 均值算法,它是一种聚类算法.今天介绍EM 算法,它也是聚类算法,但比K 均值算法更加灵活强大. ...

  8. 四、LoadRunner11安装和破解

    之前安装了LoadRunner12 社区版的,应为满足不了工作需求, 上网仔细查了教程下来LoadRunner11破解版 链接:https://pan.baidu.com/s/1dM8Lwf4p160 ...

  9. Linux下安装mysql-5.7.24

    Mysql数据库的安装对于开发者来说,是我们必然会面对的问题,它的安装过程其实并不复杂,并且网络上的安装教程也非常多,但是对于新手来说,各种不同形式的安装教程,又给新手们带来了要选择哪种方式进行安装的 ...

  10. QQ音乐PB级ClickHouse实时数据平台架构演进之路

    导语 | OLAP(On-Line Analytical Processing),是数据仓库系统的主要应用形式,帮助分析人员多角度分析数据,挖掘数据价值.本文基于QQ音乐海量大数据实时分析场景,通过Q ...