//layui的模板引擎和分页组合用

最新推荐文章于 2024-05-21 20:11:31 发布
最新推荐文章于 2024-05-21 20:11:31 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38708422/article/details/71516275
版权

//layui的模板引擎和分页组合用

<body class="gray-bg">

<script type="text/html" id="demo">

#[[{{#  layui.each(d.list, function(index, item){ }}

 

                                <tr>

                                    <td width="1%">

                                    {{index+1}}

                                    </td>

                                    <td width="1%">

                                    <input value="{{item.id}}" type="checkbox"  class="i-checks i" name="input[]">

                                    </td>

                                     <td>{{item.tableName}}</td>

      

                                  <td>{{item.tableComment}}</td>

      

                                  <td>{{item.formClass}}</td>

      

                                  <td>{{item.version}}</td>

      

                                    <td width="10%">

                                    <p>

                                    <button value="{{item.id}}" class="btn btn-danger btn-xs delone" type="button">

                                    <i class="fa fa-upload"></i>  

                                    <span class="bold">删除</span>

                                    </button>

                                                    </p>

                                    </td>

                                </tr>

{{#  }); }}]]#

    </script>

                     <div class="ibox-content">

                       <form role="form" id="form" action="/gTable/list/1-10" class="form-inline" method="post">

                            <div class="form-group">

                                <label for="exampleInputEmail2" class="control-label">表名:</label>

                                <input type="text" name="tableName" placeholder="表名"  class="form-control">

                                <input type="text" name="tableName" placeholder="表名" value="=" hidden="" readonly="readonly">

                            </div>

                        </form>

                   </div>

                   <div class="ibox-content">

                        <p >

                        <button id="edit" class="btn btn-success btn-xs" type="button"><i class="fa fa-upload"></i>  <span class="bold">编辑</span>

                        </button>

                        <button id="gStart" class="btn btn-warning btn-xs" type="button"><i class="fa fa-warning"></i> <span class="bold">代码生成</span>

                        </button>

                        <button id="synDataBase" class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>  同步数据库</button>

                       <button id="resetting" style="float:right;"class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>  重置</button>

                       <span style="float:right;">   </span> 

                       <button id="search" style="float:right;"class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>  查询</button>

                    </p>

                        <table class="table table-bordered table-hover">

                            <thead>

                                <tr >

                                    <th>序号</th>

                                    <th>

                                    <input id="checkAll"  type="checkbox"  class="i-checks" ">

                                    </th>

                                    <th>表名</th>

                                    <th>表描述</th>

                                    <th>表单分类</th>

                                    <th>版本</th>

                                    <th>操作</th>

                                </tr>

                            </thead>

                            <tbody id="view">

                            </tbody>

                        </table>

                        <div id="page"></div>

                    </div>

 

    <!-- 全局js -->

    <script src="js/jquery.min.js?v=2.1.4"></script>

    <script src="js/bootstrap.min.js?v=3.3.6"></script>

 

    <!-- iCheck -->

    <script src="js/plugins/iCheck/icheck.min.js"></script>

 

    <!-- jquery-form -->

    <script type="text/javascript" src="/js/laymi/jquery-form.js"></script>

    

    <!-- layui -->

    <script type="text/javascript" src="/js/layui/layui.js"></script>

    <script type="text/javascript">

function list(curr){

    $("#form").attr("action","/g/list/"+curr+"-"+10);

    $("#form").ajaxSubmit({

success:function(res){

layui.use(['laypage','layer', 'laytpl'], function(){

  var laypage = layui.laypage

  ,layer = layui.layer

  ,laytpl = layui.laytpl;

  var getTpl = demo.innerHTML;

     laytpl(getTpl).render(res, function(html){

     $("#view").html(html);

     //重新初始化

     $('.i-checks').iCheck({

                checkboxClass: 'icheckbox_square-green',

                radioClass: 'iradio_square-green',

            });

     //全选操作

     $('#checkAll').on('ifChecked',function(event){

 $('.i').iCheck('check');

  });

  $('#checkAll').on('ifUnchecked',function(event){

 $('.i').iCheck('uncheck');

  });

  //选中状态设置tr背景

  $('.i').on('ifChecked',function(){

 $(this).closest('tr').addClass("success");

  });

  $('.i').on('ifUnchecked',function(){

 $(this).closest('tr').removeClass("success");

  });

     });

  laypage({

    cont: 'page',//容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>

        pages: res.totalPage, //通过后台拿到的总页数

        curr: curr || 1, //当前页

    jump: function(obj, first){//触发分页后的回调

        if(!first){//点击跳页触发函数自身，并传递当前页：obj.curr

        //绑定页码

        $("#search").data("pageNumber",obj.curr);

        list(obj.curr);

        }

      }

  });

});

}

});

    }

爪爪BAI
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
edit类型 layui_使用LayUI操作数据表格 – 井传红 – 博客园
weixin_39613637的博客
12-21 825
接着上一篇继续完善我们的demo,这次我们加一个搜索按钮搜索在table标签的上方，加入这样一组html搜索商户：搜索在js加入初始化代码和定义加载方法layui.use('table', function(){var table = layui.table;//方法级渲染table.render({elem: '#LAY_table_user',url: 'UVServlet',cols: ...
Layui模块进行表格的渲染、数据绑定、提交
weixin_44539055的博客
04-18 2553
Layui模块进行表格的渲染、数据绑定、提交 在MVC做项目时经常遇到要页面显示在表单的数据， 例如这样的表格： 下面总结一下Layui表格的使用方法： Layui表格使用 01.首先要引用HTML代码中Layui的插件JS 02.声明 var layer, layuiTable;保存layui模块以便全局使用 03. 加载和初始化layui模块 layui.use(['lay...
layui 表格 模板中怎么使用循环
小寒风的
01-12 3214
{{# layui.each(d.details, function(index, item){ }} <div>{{item.pname}}</div> <div>{{item.idct}}</div> <div>{{item.idcardnumber}}</div> ...
LayUI # 下拉框关联绑定
qq_16313575的博客
01-13 659
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="...
layui 使用技巧
最新发布
github_39423829的博客
05-21 512
【代码】layui 使用技巧。
layui学习
strutce的专栏
12-23 7368
引用layui中个各个模块功能的使用：layui.use 对应模板引用的关键字：表单（form）,弹窗（layer），即使通讯 （layim），时间控件（laydate），分页（laypage），模板（laytpl），富文本编辑（layedit），文件上传（upload），常用元素（element），树形菜单（tree），工具块（util），加载流（flow），代码修饰器（code）， 因此要
基于LayUI分页和LayUI laypage分页的使用示例
08-29
本资源摘要信息主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，涵盖了LayUI分页、LayUI动态分页、LayUI laypage分页、LayUI laypage刷新当前页等知识点。 1. LayUI分页：LayUI提供了laypage插件来实现分页...
layui实现动态和静态分页
08-27
在实际开发中，我们可以根据自己的需要来选择使用layui的表格模块或分页模块，从而轻松地实现动态和静态分页。 layui是一个非常流行的前端框架，它提供了许多实用的功能模块，今天我们学习了layui实现动态和静态...
layUI实现前端分页和后端分页
10-16
layUI是一个优秀的前端组件库，提供了丰富的UI元素和便捷的API，包括前端分页和后端分页的实现。本篇将详细介绍如何使用layUI来实现这两种分页方式。 **前端分页** 前端分页是指在浏览器端进行数据的分块加载，通常...
layui 简单实现 TABLE 分页功能
08-08
在网页开发中，数据展示往往需要配合分页功能，以提高用户体验和加载速度。本篇文章将详细讲解如何使用 layui 实现 TABLE 的分页功能。 首先，我们需要确保已引入 layui 的 CSS 和 JS 文件。在 HTML 文件的 `<head>...
Layui带搜索的下拉框的使用以及动态数据绑定
qq_44211323的博客
06-18 1万+
说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影响用户体验。所以就有了带查询的下拉框出现，这个下拉框的功能很强大，结合了输入框和下拉框为一体，既可以进行模糊查询，又可以直接选择，比以前的下拉框更加方便了。今天要介绍的就是layui的form表单组件里的带查询的下拉框。 ...
LayUI模板引擎渲染数据
个人学习笔记库，一篇一篇记录成长的足迹
02-11 3111
LayUI模板渲染数据，非常详细！
layui模板引擎嵌套
weixin_39031283的博客
04-01 1282
layui模板引擎嵌套 实现一个轮播里面嵌套轮播的这样一个功能，我是利用layui模板引擎渲染出这种效果。 比如泳池时多个而且每个里面有泳池的多张图片。 后台返回的数据时这样的 前段代码： <div class="layui-carousel pool" id="banner"> <div carousel-item id="list" > ...
Layui框架的分页（laypage）和模板引擎（laytpl）的使用
my_dream2718的博客
07-07 1894
需求：根据数据信息生成数据分页展示。 （注：商品的评论列表，分页使用laypage，评论内容区块显示用laytpl） 思路：首先显示时，先请求数据，获取需要显示数据的总条数。在请求数据成功后，首先进行模板引擎的渲染，然后进行分页的渲染，更新当前页和显示条数。 跳页显示时，在分页插件的跳页回调方法中再次调用请求数据方法，更新总条数，重新进行数据渲染。 laytpl的模板定义 <script id="commentDemo" type="text/html"> <!--定义模板 -->
layui 数据表格 table的一些技巧，及自定义模板的使用
热门推荐
weixin_42170072的博客
11-07 2万+
table数据 有时总会有判断男女  类型之类的，所以通过下列方法即可轻松解决。 当然，这样在前台直接写死的 貌似不大好，没关系，我们可以通过自定义模板的方法 数据都来自后台，前台只做判断，如： 效果如下： 关于table表格时间格式的调整： 上图的方法，试过这么写，但有时候就不大好使，所以 下面推荐另一种方法，   上面是图片，代码如下： &...
分页插件layui模板引擎+layui分页（用layui写出复用性很好的前后端分离分页 很详细）
qq_42758867的博客
03-29 981
因为项目是前后端分离的，由于公司的前端人员不足所以这套分页适用于广大后端人员。前端人员尽量适用vue等框架。 好了这里开始首先肯定是依赖的js和css了，这里用到了layui和json2可以去官网下载。 <script src="../../../assets/js/jquery-3.3.1.min.js"></script> <script sr...
layui模板语言,渲染表格分组合并行
qq_43162050的博客
04-25 2612
layui模板语言表格渲染的运用
layui循环遍历数据_layui.laytpl渲染模板，遍历、输出、判断
weixin_39807954的博客
12-18 1万+
事先引用加载layui的laytpl模块，此处不作说明1.定义容器(用于填充渲染后的script)2.定义script模板角色类别:请选择角色类别{{# layui.each(d.roleTypeList, function(index, item){ }}{{# if(d.roleType == item.dicVal ){ }}{{ item.dicName}}{{# }else...
使用layui和servlet实现分页
06-10
好的，下面是使用layui和servlet实现分页的步骤： 1. 在前端页面引入layui的css和js文件，并添加一个div作为分页的容器： ``` <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> <div id="page"></div> ``` 2. 在servlet中获取需要分页的数据，并将其封装为一个json对象返回给前端页面： ``` protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int page = Integer.parseInt(request.getParameter("page")); // 获取当前页码 int limit = Integer.parseInt(request.getParameter("limit")); // 获取每页显示的记录数 // 根据页码和记录数从数据库中获取数据 List<User> userList = userService.getUserListByPage(page, limit); // 将数据封装为json对象返回给前端页面 JSONObject result = new JSONObject(); result.put("code", 0); result.put("msg", ""); result.put("count", userService.getUserCount()); result.put("data", userList); response.getWriter().write(result.toJSONString()); } ``` 3. 在前端页面使用layui的table组件展示数据，并添加分页功能： ``` <script> layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; table.render({ elem: '#table', url: 'userList', // 获取数据的servlet的url page: true, // 开启分页 cols: [[ {field:'id', title:'ID'}, {field:'name', title:'用户名'}, {field:'age', title:'年龄'} ]] }); laypage.render({ elem: 'page', limit: 10, // 每页显示的记录数 layout: ['prev', 'page', 'next', 'skip'], jump: function(obj, first){ if(!first){ // 点击页码时重新加载表格数据 table.reload('table', { where: { page: obj.curr, limit: obj.limit } }); } } }); }); </script> ``` 这样就完成了使用layui和servlet实现分页的过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值