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

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

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

效果图：

一、引用js依赖

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

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页面代码

许可名称

autocomplete="off" class="layui-input" placeholder="请输入许可名称" >

许可编码

autocomplete="off" placeholder="请输入许可编码" class="layui-input">

菜单名称

autocomplete="off" placeholder="请选择菜单名称" class="layui-input">

查询

查询语句：

$(function(){

initPage();

layui.use(['form'], function(){

var form = layui.form();

//监听提交

formon('submit(formFilter)', function(data){

initPage();

return false;

});

});

});

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。