一、引用js依赖

jquery-1.11.3.min.js , layui.all.js, json2.js

二、js分页方法封装(分页使用模板laytpl)

1、模板渲染

/**
 * 分页模板的渲染方法
 * @param templateId 分页需要渲染的模板的id
 * @param resultContentId 模板渲染后显示在页面的内容的容器id
 * @param data 服务器返回的json对象
 */
function renderTemplate(templateId, resultContentId, data){
  layuiuse(['form','laytpl'], function(){
    var laytpl = layui.laytpl;
    laytpl($("#"+templateId).html()).render(data, function(html){
      $("#"+resultContentId).html(html);
    });
  });
  layui.form().render();// 渲染
};
 
2、layui.laypage 分页封装
/**
 * layuilaypage 分页封装
 * @param laypageDivId 分页控件Div层的id
 * @param pageParams 分页的参数
 * @param templateId 分页需要渲染的模板的id
 * @param resultContentId 模板渲染后显示在页面的内容的容器id
 * @param url 向服务器请求分页的url链接地址
 */
function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url){
  if(isNull(pageParams)){
    pageParams = {
      pageIndex : 1,
      pageSize : 10
    }
  }
  $ajax({
    url : url,//basePath + '/sysMenu/pageSysMenu',
    method : 'post',
    data : pageParams,//JSON.stringify(datasub)
    async : true,
    complete : function (XHR, TS){},
    error : function(XMLHttpRequest, textStatus, errorThrown) {
      if("error"==textStatus){
        error("服务器未响应,请稍候再试");
      }else{
        error("操作失败,textStatus="+textStatus);
      }
    },
    success : function(data) {
      var jsonObj;
      if('object' == typeof data){
        jsonObj = data;
      }else{
        jsonObj = JSON.parse(data);
      }
      renderTemplate(templateId, resultContentId, jsonObj);
        
      //重新初始化分页插件
      layui.use(['form','laypage'], function(){
        laypage = layui.laypage;
        laypage({
          cont : laypageDivId,
          curr : jsonObj.pager.pageIndex,
          pages : jsonObj.pager.totalPage,
          skip : true,
          jump: function(obj, first){//obj是一个object类型。包括了分页的所有配置信息。first一个Boolean类,检测页面是否初始加载。非常有用,可避免无限刷新。
            pageParams.pageIndex = obj.curr;
            pageParams.pageSize = jsonObj.pager.pageSize;
            if(!first){
              renderPageData(laypageDivId, pageParams, templateId, resultContentId, url);
            }
          }
        });
      });
    }
  });
};
 
3、刷新当前分页的方法,可省略
/**
 * 分页插件刷新当前页的数据,必须有跳转的确定按钮,因为根据按钮点击事件刷新
 */
function reloadCurrentPage(){
  $(".layui-laypage-btn").click();
};
 
三、页面代码
 
<!-- 分页表格 -->
<div class="layui-form">
 <table class="layui-table">
  <thead>
   <tr>
    <th class="w20"><input type="checkbox" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"></th>
   <th class="w200">许可名称</th>
   <th class="w200">许可编码</th>
   <th class="w200">菜单名称</th>
   <th>许可链接</th>
  </tr
   </thead>
   <tbody id="page_template_body_id">
  </tbody>
 </table>
</div>
<!-- 分页控件div -->   
<div id="imovie-page-div"></div>
 
2、分页模板
<script id="page_template_id" type="text/html">
{{# layui.each(d.list, function(index, item){ }}
<tr>
  <td><input type="checkbox" name="permissionId" lay-skin="primary" value="{{item.permissionId}}"></td>
  <td>{{item.permissionName || ''}}</td>
  <td>{{item.permissionCode || ''}}</td>
  <td>{{item.menuName || ''}}</td>
  <td>{{item.permissionUrl || ''}}</td>
</tr>
{{# }); }}
</script>
 
3、分页执行代码:
 
分页参数:
function getPageParams(){
  var pageParams = {
  pageIndex : 1,
  pageSize : 2
  };
  pageParams.permissionName = $("input[name='permissionName']").val();
  pageParams.permissionCode = $("input[name='permissionCode']").val();
  pageParams.menuName = $("input[name='menuName']").val();
  return pageParams;
};
 
分页执行方法:
function initPage(){
  renderPageData("imovie-page-div", getPageParams(), "page_template_id"
      "page_template_body_id", basePath + '/sysPermission/pageSysPermission');
};
 
页面加载初始化分页:
$(function(){
  initPage();
});
 
如果包括上面效果图的查询,如下:
 
Html页面代码
<div>
      <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">许可名称</label>
            <div class="layui-input-inline">
              <input type="text" name="permissionName" 
                autocomplete="off" class="layui-input" placeholder="请输入许可名称" >
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">许可编码</label>
            <div class="layui-input-inline">
              <input type="text" name="permissionCode" 
                autocomplete="off" placeholder="请输入许可编码" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline layui-input-inline-0">
              <input type="text" name="menuName" 
                autocomplete="off" placeholder="请选择菜单名称" class="layui-input">
                
            </div>
          </div>
          <div class="layui-inline">
            <button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查询</button>
          </div>
        </div>
      </form>
    </div>
 
 
查询语句:
$(function(){
  initPage();
    
  layui.use(['form'], function(){
    var form = layui.form();
    //监听提交
    formon('submit(formFilter)', function(data){
      initPage();
      return false;
    });
       
       
  });
});
 
 
 

layui 通过laytpl模板,以及laypage分页实现的更多相关文章

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

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

  2. layui.laytpl 模板引擎用法

    目录 layui下载地址: 最终效果: 模板引擎文档 手册地址: 以下是代码思路: layui下载地址: https://www.layui.com/ 最终效果: 模板引擎文档 手册地址: https ...

  3. 拿来主义:layPage分页插件的使用

    布衣之谈 所谓插件,大概就是项目中可插可拔的比较小功能化的组件:这些功能组件若能力可及,自己也可以完成——也即自己造轮子,但翻看各种技术社区,相关领域的神人们往往会有更好的实现方案贡献出来,这个时候你 ...

  4. 如何基于layui的laytpl实现数据绑定

    想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的 ...

  5. laytpl模板——怎么使用ajax与数据交互

    第一次在项目中用laytpl模板,下面是一些使用过程中的探索,希望对小伙伴们有所帮助. 注:第一次使用这个模板的小伙伴建议先去看看官网 laytpl <script type="tex ...

  6. doT.js模板和pagination分页应用

    doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...

  7. 基于layPage分页插件浅析两种分页方式

    最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...

  8. 记录项目中用的laypage分页代码

    最终才觉得,好记性不如烂笔头,毕竟已经不是刚毕业时候的巅峰了,精力有所下降,很多时候记不住东西. 参考url:http://www.layui.com/laypage/ 直接上代码了 <scri ...

  9. layui之layer打开table后分页无效的解决方法

    1.原代码: <body> <div id="showalladdableavms" style="display: none;width:100%&q ...

随机推荐

  1. RBAC权限分配

    RABC:基于角色的权限访问控制(Role-Based Access Control) 一般在登录系统认证通过后,会先确定的该用户的操作权限,判断用户的后续操作是否合法! RABC至少需要三张表:用户 ...

  2. strom_hdfs与Sequence详解

    这片博客主要是讲解storm-hdfs,Squence及它们的trident方法使用,不多说上代码: pom.xml <dependency> <groupId>org.apa ...

  3. linux ,mac连接, git pull error, chmod修改文件的权限/chown修改文件和目录的所有者

    去项目目录下 启动服务 setsid npm start & Mac下如何用SSH连接远程Linux服务器 https://www.cnblogs.com/littleBit/p/536280 ...

  4. Struts2导图

  5. 一个茴字有三种写法——吐槽C#9.0的Records

    最近是微软开了Build 2020大会,由于疫情原因,改成了在线举行,Build大会上,C#公布9.0版本. 我个人对于C#的更新向来都是喜闻乐见,乐于接受的,对于博客园上某些人天天嘲讽C#只会增加语 ...

  6. c# 优化代码的一些规则——优先隐式类型[一]

    前言 说到底就是优先使用var,这个关键字,在c# 3.0中出现了. 首先要确认几点,一个就是var 是静态变量,而不是动态变量,也就是说使用var 你是不必去担心性能问题得, 百度百科: 1)静态存 ...

  7. VSCode开发Vue-代码格式化最完美设置

    Vue在VsCode上面的开发,代码格式话是个老大难问题了. 有很多文章介绍Prettier四个配置方法,以及如何启用.但是结果就是:一个一个配完,还是看着难受 现在尝试出一种最完美格式化方式,分享出 ...

  8. [PHP学习教程 - 文件]001.高速读写大数据“二进制”文件,不必申请大内存(Byte Block)

    引言:读写大“二进制”文件,不必申请很大内存(fopen.fread.fwrite.fclose)!做到开源节流,提高速度! 每天告诉自己一次,『我真的很不错』.... 加速读写大文件,在实际工作过程 ...

  9. ansible取出register变量中最长字符串

    背景 在用ansible撰写一个etcd恢复的playbook时,有一个操作是获取etcd启动时的"initial-cluster"启动参数,该参数在etcd集群不同节点不一致,需 ...

  10. Java实现 LeetCode 775 全局倒置与局部倒置(分析题)

    775. 全局倒置与局部倒置 数组 A 是 [0, 1, -, N - 1] 的一种排列,N 是数组 A 的长度.全局倒置指的是 i,j 满足 0 <= i < j < N 并且 A ...