Layui

layui 与 mybatis-plus 分页整合

2018-03-28  本文已影响277人  天边的鱼

(此代码拷贝可用)

前端与后端分页往往存在着数据 参数不对等的问题   

例如  当前页 、每页的容量等等    使用插件做分页最开始需要做的是 使得这两个数据前后端一致

1、服务端代码

@RequestMapping("/ssRole")

public ModelAndViewselectRoelByContent(Pagepagepage,UserGroup role) {

    ModelAndView mv = getModelAndView("authority_role/authority_role");

    page =rolePageMethodService.getRoleByContent(page,role);

    mv.addObject("lists",page);

    mv.addObject("roleContent",role);

    return mv;

}

注释 

   page内部包含的参数:size : 每页显示 数据条数       current : 当前页数

                                       records : 查询出的数据(list)      total: 数据总数

 role 对象 通常是进行搜索时的条件  

mapper.xml  进行全查  不用limit 函数    mybatis-plus  已经封装好 

                    或者考虑搜索功能 可以进行加一些  if   语句  

                    例如 :

                                            and  name  LIKE  CONCAT(CONCAT('%',#{name}),'%')

前端分页

var total = ${lists.total!};

layui.use(['laypage', 'layer'], function() {

var laypage =layui.laypage

        , layer =layui.layer;

    var form =layui.form;

    var total = ${lists.total!};

    //核心方法

    laypage.render({

        elem:'demo'

        , count: total//data.length; 数据总数

        , curr: ${lists.current!}   //当前页

        , limit: ${lists.size!}       //每页数据条数

        , limits: [5, 8, 10]        //可选的每页数据条数

        , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']   

        , jump:function (obj,first) {

                    if(!first){

                            curr = obj.curr;

                            var name =$("#roleNameSel").val();

                             window.location.href="${ctx}/rolePage/ssRole?current="+obj.curr

                                                                    +"&size="+obj.limit+"&name="+name;

                   }

            }

    });

});

上一篇下一篇

猜你喜欢

热点阅读