基于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 相关文章推荐
js获取 type=radio 值的方法
May 09 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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
多重?l件?合查?(二)
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
jquery实现数字输入框
2017/02/22 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python numpy数组复制使用实例解析
2020/01/10 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python3 re返回形式总结
2020/11/20 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
施工安全协议书
2013/12/11 职场文书
公益活动邀请函
2014/02/05 职场文书
党员批评与自我批评
2014/02/12 职场文书
学生请假条
2014/04/11 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
老兵退伍感言
2015/08/03 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python