zoukankan      html  css  js  c++  java
  • 当layui与分页相遇--bootstrap何去何从

    用了一段时间,感觉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>
    一万年太久,只争朝夕!
  • 相关阅读:
    作妖系列——更改spyder黑色主题
    latex beamer 插入代码
    LaTeX 如何在文档的侧面插入图片实现"绕排"?
    svm
    约束优化方法之拉格朗日乘子法与KKT条件
    Latex algorithm
    对于连续目标函数的学习问题,当误差为正态分布,而且在没有任何先验知识的条件下,最大似然估计与最小均方误差等价
    R语言table()函数
    高性能Linux服务器配置
    深度学习
  • 原文地址:https://www.cnblogs.com/chaoba/p/10458728.html
Copyright © 2011-2022 走看看