Layui's method of implementing data tables and paging

1. The front-end part

html only needs to put a div with an id, which is convenient for js to obtain the rendering area

<div id="data_grid" lay-filter="demo" ></div>　　

The js part needs attention url is an asynchronous data interface, done is the callback function after rendering the form

table.render({
            elem: '#data_grid'
            //,width: 900
            //,height: 274
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'username', title:'用户名',width: 100} //空列
                ,{field: 'password', title: '密码', width: 120}
                ,{field: 'gender', title: '性别', width: 150}
                ,{field: 'nichen', title: '昵称', width: 150}
                ,{field: 'birthday', title: '出生年月', width: 120}
                ,{fixed: 'right', width: 215,align:'center', toolbar: '#barDemo'}
            ]]
            ,url:url
            ,skin: 'row' //表格风格
            ,even: true
            ,page: true //是否显示分页
            ,limits: [3,5,10]
            ,limit: 5 //每页默认显示的数量
            ,done:function(res){
                userPage.data = res.data;
            }
            //,loading: false //请求数据时，是否显示loading
        });　

Query according to conditions, the table is refreshed asynchronously, where is the attached parameter

$('#sub_query_form').on('click',function () {
        var queryPo = page.formToJson($('#query_form').serialize());
        var table = layui.table;
        table.reload('data_grid', {
            url: '/getUserList.action',
            page:{
                curr:1  //从第一页开始
            },

            method:'post',
            where:{
                queryStr:queryPo
            },
            done:function (res) {
                userPage.data = res.data;
            }
        });
    });　

Convert x-www-form-urlencoded Use

for json string

formToJson:function (data) {
        data=data.replace(/&/g,"\",\"");
        data=data.replace(/=/g,"\":\"");
        data="{\""+data+"\"}";
        return data;
    }

table toolbar 1. First define the button in html

<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">增加</a>
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        <!-- 这里同样支持 laytpl 语法，如： -->
        {{#  if(d.auth > 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{#  } }}
</script>

2. Reference in js

layui.use('table', function(){
    var table = layui.table;
    userPage.tab('/getUserList.action');
    //监听工具条
    table.on('tool(demo)', function(obj){
        var data = obj.data;
        userPage.data = obj.data;
        if(obj.event === 'detail'){
            layer.msg('ID：'+ data.id + ' 的查看操作');
        }
        else if(obj.event === 'del'){
            layer.confirm('真的要删除这条记录么',{icon: 3, title:'确定删除'}, function(index){
                obj.del();
                $.post('/doDelete.action?id='+data.id,function (res) {
                    userPage.reload(res);
                });
                layer.close(index);
            });

        }
        else if(obj.event === 'add'){
           layer.open({
               title:'增加窗口',
               content:userPage.template,
               yes:function () {
                   var user = page.formToJson($('#layer_form').serialize());
                   var data = 'user='+user;
                  $.post('/doAdd.action',data,function (res) {
                      userPage.reload(res);
                  });
                  layer.closeAll();
               }
           })

        }
        else if(obj.event === 'edit'){
            layer.open({
                title:'编辑窗口',
                content:userPage.template,
                success:function () {
                    $('input[name="id"]').val(userPage.data.id);
                    $('input[name="username"]').val(userPage.data.username);
                    $('input[name="password"]').val(userPage.data.password);
                    $('input[name="gender"]').val(userPage.data.gender);
                    $('input[name="nichen"]').val(userPage.data.nichen);
                    $('input[name="birthday"]').val(userPage.data.birthday);
                },
                yes: function(){
                    var mgUser = page.formToJson($('#layer_form').serialize());
                    var data = 'user='+mgUser;
                    $.post('/doEdit.action',data,function (res) {
                        userPage.reload(res);
                    });
                    layer.closeAll();
                }
            })
        }
    });
});

2 .Server part

The Controller layer needs to receive the following parameters, page, limit, and conditions to be queried. The return value is based on the default return value given by the layui document

 @RequestMapping("/getUserList")
    @ResponseBody
    public PageList<MgUser> getUserList(@RequestParam(required = false,defaultValue = "1") int page,@RequestParam(required = false,defaultValue = "5") int limit,@RequestParam(required = false) String queryStr){
        QueryPo queryPo = null;
        if (!StringUtils.isEmpty(queryStr)){   //性别类型转换
             queryPo = JSONObject.parseObject(queryStr,QueryPo.class);
            if ("1".equals(queryPo.getGender())){
                queryPo.setGender("男");
            }
            if ("2".equals(queryPo.getGender())){
                queryPo.setGender("女");
            }

        }
        PageList pageList = new PageList();
        try {
            if (!StringUtils.isEmpty(queryPo)){ //中文字转码
                if(!StringUtils.isEmpty(queryPo.getKeywords())){
                    queryPo.setKeywords(URLDecoder.decode(queryPo.getKeywords(),"utf-8"));
                }
            }
            List<MgUser> userList = userService.getUserList(page,limit,queryPo);   //根据条件查询分页数据

            pageList.setCode("0");
            pageList.setMsg("ok");
            pageList.setData(userList);
            int count = userService.countUserByExample(queryPo);
            pageList.setCount(count);

        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
            pageList.setCode("-1");
            pageList.setMsg("数据获取异常");
            return pageList;
        }

        return pageList;
    }　

The Service layer queries and Paging

public List<MgUser> getUserList(int page , int limit, QueryPo queryPo) {
        MgUserExample userExample = new MgUserExample();
        MgUserExample.Criteria criteria = userExample.createCriteria();
        if(!StringUtils.isEmpty(queryPo)){
            if (!StringUtils.isEmpty(queryPo.getGender())){
                criteria.andGenderEqualTo(queryPo.getGender());
            }
            if (!StringUtils.isEmpty(queryPo.getKeywords())){
                criteria.andUsernameLike("%"+queryPo.getKeywords()+"%");
            }
        }

        userExample.setStart((page-1)*limit);
        userExample.setLimit(limit);

        List<MgUser> mgUsers = userMapper.selectByExample(userExample);

        return mgUsers;
    }　

Note that since the Example generated by mybatis reverse engineering does not have limit and page, you need to add it yourself

    private int start;
    private int limit;
    
    public int getStart() {
        return start;
    }

    public void setStart(int start) {
        this.start = start;
    }

    public int getLimit() {
        return limit;
    }

    public void setLimit(int limit) {
        this.limit = limit;
    }

Then modify the mapper.xml of Mybatis and add the paging condition

<select id="selectByExample" resultMap="BaseResultMap" parameterType="com.wang.entity.MgUserExample" >
    select
    <if test="distinct" >
      distinct
    </if>
    <include refid="Base_Column_List" />
    from mg_user

    <if test="_parameter != null" >
      <include refid="Example_Where_Clause" />
    </if>
    <if test="orderByClause != null" >
      order by ${orderByClause}
    </if>
    <if test="start !=0 or limit!=0">
      limit #{start},#{limit}
    </if>
  </select>

This article is reproduced from: https://www.cnblogs.com/wangxiayun/p/9145638.html

For more informationlayuiPlease pay attention to the PHP Chinese websitelayui tutorialColumn

The above is the detailed content of Layui's method of implementing data tables and paging. For more information, please follow other related articles on the PHP Chinese website!