基于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 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
js中对象与对象创建方法的各种方法
Feb 27 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个人网站架设连环讲(一)
2006/10/09 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
Js 中debug方式
2010/02/07 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
民生工程实施方案
2014/03/22 职场文书
小小商店教学反思
2014/04/27 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
西岭雪山导游词
2015/02/06 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
用Python实现屏幕截图详解
2022/01/22 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL