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

效果图：

一、引用js依赖

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

二、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 分页封装

分页封装 * @param laypageDivId 分页控件Div层的id * @param pageParams 分页的参数 * @param templateId 分页需要渲染的模板的id * @param resultContentId 模板渲染后显示在页面的内容的容器id * @param url 向服务器请求分页的url链接地址 */ function renderPageData(laypageDivId,pageParams,templateId,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,jsonObj);

  //重新初始化<a href="/tag/fenye/" target="_blank" class="keywords">分页</a><a href="/tag/chajian/" target="_blank" class="keywords">插件</a> 
  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类型。<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>了<a href="/tag/fenye/" target="_blank" class="keywords">分页</a>的所有配置信息。first一个Boolean类，检测<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>是否初始加载。非常有用，可避免无限刷新。 
        pageParams.pageIndex = obj.curr; 
        pageParams.pageSize = jsonObj.pager.pageSize; 
        if(!first){ 
          renderPageData(laypageDivId,url); 
        } 
      } 
    }); 
  }); 
}

});
};

3、刷新当前分页的方法，可省略

分页插件刷新当前页的数据，必须有跳转的确定按钮，因为根据按钮点击事件刷新 */ function reloadCurrentPage(){ $(".layui-laypage-btn").click(); };

三、页面 代码

1、分页表格及分页控件

Box" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"> 名称菜单名称许可链接

2、分页模板

Box" name="permissionId" lay-skin="primary" value="{{item.permissionId}}">

3、分页执行代码：

分页参数：

分页执行方法：

页面加载初始化分页：

如果包括上面效果图的查询，如下：

Html页面代码

菜单名称

菜单名称" class="layui-input">

        </div> 
      </div> 
      <div class="layui-inline"&gt; 
        <button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter"&gt;<a href="/tag/chaxun/" target="_blank" class="keywords">查询</a></button> 
      </div> 
    </div> 
  </form> 
</div>

查询语句：

layui.use(['form'],function(){
var form = layui.form();
//监听提交
formon('submit(formFilter)',function(data){
initPage();
return false;
});

});
});