집 > 기사 > 웹 프론트엔드 > Layui 테이블 페이지 매김이 적용되지 않으면 어떻게 해야 합니까?

Layui 테이블 페이지 매김이 적용되지 않으면 어떻게 해야 합니까?

藏色散人원래의: 2020-11-19 11:46:188184검색

layui 테이블 페이징이 작동하지 않는 이유에 대한 해결 방법: 먼저 해당 코드 파일을 연 다음 동적으로 코드를 "var dom = $("
"그렇습니다.

".

이 튜토리얼의 운영 환경: Windows 7 시스템,layui 버전 2.5.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다. "

layUI tutorial

Layui 레이어에서 테이블을 연 후 페이징이 유효하지 않은 문제 해결 방법

1. 원본 코드:

<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. 이후 페이징, 선택 상자 등이 작동하지 않습니다. 확인해 보니 html()로 얻은 dom 객체가 손실된다고 하는데, dom을 직접 사용하면 dom 내용이 표시되지 않는 문제가 발생합니다.

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)

이 방법은 페이지에 작성된 DOM 개체를 여는 문제를 효과적으로 해결할 수 있으며, 어두운 회색 톤 문제와 동시에 DOM 개체 이벤트도 지원됩니다. 완벽합니다

위 내용은 Layui 테이블 페이지 매김이 적용되지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

layui html var 对象事件 dom display table

성명：

이전 기사：Layui에서 데이터 바인딩을 구현하는 방법다음 기사：Layui에서 데이터 바인딩을 구현하는 방법