Méthode de Layui pour implémenter des tables de données et une pagination

1. La partie front-end

html n'a besoin que de mettre un div avec un ID, ce qui est pratique pour js pour obtenir la zone de rendu

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

La partie js a besoin d'attention, l'url est une interface de données asynchrone, la fonction de rappel est effectuée après le rendu du formulaire

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
        });　

selon la requête de condition, la table est actualisée de manière asynchrone, où se trouve le paramètre attaché

$('#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;
            }
        });
    });　

pour convertir x-www-form-urlencoded Utilisez

pour la chaîne json

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

barre d'outils du tableau 1. Définissez d'abord le bouton

<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>

Référence

2. 🎜>

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();
                }
            })
        }
    });
});

en html 2. Partie .Serveur

La couche contrôleur doit recevoir les paramètres suivants, page, limite, conditions à interroger, et la valeur de retour est basée sur la valeur de retour par défaut donnée par le document layui

 @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;
    }　

Requêtes de couche de service et pagination

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;
    }　

Notez que puisque l'exemple généré par l'ingénierie inverse mybatis n'a pas de limite ni de page, vous devez ajouter

    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;
    }

vous-même puis modifiez le mapper.xml de Mybatis. Vous devez ajouter la condition de pagination

<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>

Cet article est reproduit à partir de : https://www.cnblogs.com/wangxiayun/p/9145638.html

Pour plus de connaissances sur

layui veuillez faire attention au site Web PHP chinois tutoriel layuiColonne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!