基于LayUI分页和LayUI laypage分页的使用示例


Posted in Javascript onAugust 02, 2017

本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下:

效果图:

基于LayUI分页和LayUI laypage分页的使用示例

 一、引用js依赖

主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/lay/dest/layui.all.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script>

二、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(); 
};

三、页面代码

1、分页表格及分页控件

<!-- 分页表格 --> 
<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; 
    }); 
      
      
  }); 
});

 四、懂 jquery 插件封装的大神可以将其封装成独立的分页插件,这样更加容易使用。我表示不太懂,^_^

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 #Javascript
javascript 取小数点后几位几种方法总结
Aug 02 #Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 #Javascript
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
angular $watch 一个变量的变化(实例讲解)
Aug 02 #Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 #Javascript
js实现前端图片上传即时预览功能
Aug 02 #Javascript
You might like
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
jcrop基本参数一览
2013/07/16 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Oracle中update和select 关联操作
2022/01/18 Oracle