Maison > Article > interface Web > Que faire si la pagination du tableau layui ne prend pas effet

Que faire si la pagination du tableau layui ne prend pas effet

藏色散人original: 2020-11-19 11:46:188184parcourir

La solution au problème selon lequel la pagination des tables layui ne prend pas effet : ouvrez d'abord le fichier de code correspondant ; puis ajoutez dynamiquement le code sous la forme "var dom = $("a6f6827799bb29778d7e7d2b7dcd9f70" est OK.

" est OK, cette méthode convient à toutes les marques d'ordinateurs

Recommandé : "

tutoriel layUI. Que faire si la pagination du tableau layui ne prend pas effet "

Solution au problème selon lequel la pagination n'est pas valide après que la couche de layui ouvre la table

1. Code d'origine :

<body>
<div id="showalladdableavms" style="display: none;width:100%">
    <table id="demo" lay-filter="test"></table>
</div> -->
</body>
<script>
filldata(table,"#demo","getDateForUserJurisdiction.gds");
layer.open({
                               type:1,
                               title:"添加机器",
                               maxmin:true,
                               area:["100%","100%"],
                               btn:["确认添加"],
                               content: $("#showalladdableavms").html(),
                               success: function (layero) {
                              var btn = layero.find(&#39;.layui-layer-btn&#39;);
                              btn.css({&#39;position&#39;:&#39;relative&#39;,&#39;top&#39;:"-93%","text-align":"left","left":"8%"});
                              },
                              btn1:function(index, layero){
                                  //console.log(layero, index);
                                  var res = getoperavms(&#39;demo&#39;);
                                  console.dir(res)
                              }
                             });
function filldata(table,id,url){
              table.render({
                  elem: id,
                  height:"560"
                  ,url:url //数据接口
                  ,method: &#39;POST&#39;
                  ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                  ,page:true/*  { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            first: true //显示首页
                           ,last: true //显示尾页
                  } */
                   ,limits : [10,20,30]
                   ,limit:10
                  ,request: {
                    pageName: &#39;page&#39;,//页码的参数名称，默认：page
                  } 
                  ,cols: [[ //表头
                             {checkbox:true} 
                          ,{field: &#39;id&#39;, title: &#39;ID&#39;, width:80, sort: true}
                          ,{field: &#39;avm&#39;, title: &#39;机器编号&#39;, width:80}
                          ,{field: &#39;company&#39;, title: &#39;公司名称&#39;, width:80}
                          ,{field: &#39;area&#39;, title: &#39;区域&#39;, width:80, sort: true}
                          ,{field: &#39;circuit&#39;, title: &#39;线路&#39;, width:80} 
                          ,{field: &#39;position&#39;, title: &#39;位置&#39;, width: 177}
                          ,{field: &#39;goodsxml&#39;, title: &#39;商品库&#39;, width: 80, sort: true}
                          
                        ]]
                  ,where : {
                  //传值 startDate : startDate,
                          allavm:&#39;yes&#39;
                    }
                  ,response: {
                         // statusName: &#39;code&#39; //数据状态的字段名称，默认：code
                         //,statusCode: 200 //成功的状态码，默认：0
                         //,msgName: &#39;message&#39; //状态信息的字段名称，默认：msg
                         countName: &#39;total&#39; //数据总数的字段名称，默认：count
                         ,dataName: &#39;rows&#39; //数据列表的字段名称，默认：data
                        }
                   /* done:function(){
                             layer.open({
                                   type:1,
                                   maxmin:true,
                                   area:["800px","600px"],
                                   content: $("#showalladdableavms")
                                 });
                             } */
                 });
        }
</script>

2. Phénomène : la pagination, les cases de sélection, etc. ne peuvent pas être utilisées. Après vérification, il est dit que l'événement obtenu par html() perdra l'objet dom si vous l'utilisez directement. Il y aura un problème que le dom ne pourra pas afficher. le contenu du dom.

3. Solution : Ajouter dynamiquement :

var dom = $("<div id=&#39;showalladdableavms&#39; style=&#39;display:none;width:100%&#39;><table id=&#39;demo&#39; lay-filter=&#39;test&#39;></table></div>");
$(&#39;body&#39;).append(dom)

Cette méthode peut résoudre le problème d'être codé en dur dans la page. lorsqu'il est ouvert, ce qui pose un problème avec le ton gris foncé. En même temps, les événements de l'objet DOM sont également pris en charge, parfait

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!

layui html var 对象事件 dom display table

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la liaison de données dans layuiArticle suivant：Comment implémenter la liaison de données dans layui

Articles Liés

Voir plus