layui表格分页不生效怎么办


本文摘自PHP中文网,作者藏色散人,侵删。

layui表格分页不生效的解决办法:首先打开相应的代码文件;然后动态添加代码为“var dom = $("<div id='showalladdableavms' style='display:none;width:100%'>”即可。

本教程操作环境:windows7系统、layui2.5.6版,该方法适用于所有品牌电脑。

推荐:《layUI教程》

layui之layer打开table后分页无效的解决方法

1.原代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

<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('.layui-layer-btn');

                              btn.css({'position':'relative','top':"-93%","text-align":"left","left":"8%"});

                              },

                              btn1:function(index, layero){

                                  //console.log(layero, index);

                                  var res = getoperavms('demo');

                                  console.dir(res)

                              }

                             });

function filldata(table,id,url){

              table.render({

                  elem: id,

                  height:"560"

                  ,url:url //数据接口

                  ,method: 'POST'

                  ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

                  ,page:true/*  { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档

                            first: true //显示首页

                           ,last: true //显示尾页

                  } */

                   ,limits : [10,20,30]

                   ,limit:10

                  ,request: {

                    pageName: 'page',//页码的参数名称,默认:page

                  }

                  ,cols: [[ //表头

                             {checkbox:true}

                          ,{field: 'id', title: 'ID', width:80, sort: true}

                          ,{field: 'avm', title: '机器编号', width:80}

                          ,{field: 'company', title: '公司名称', width:80}

                          ,{field: 'area', title: '区域', width:80, sort: true}

                          ,{field: 'circuit', title: '线路', width:80}

                          ,{field: 'position', title: '位置', width: 177}

                          ,{field: 'goodsxml', title: '商品库', width: 80, sort: true}

                           

                        ]]

                  ,where : {

                  //传值 startDate : startDate,

                          allavm:'yes'

                    }

                  ,response: {

                         // statusName: 'code' //数据状态的字段名称,默认:code

                         //,statusCode: 200 //成功的状态码,默认:0

                         //,msgName: 'message' //状态信息的字段名称,默认:msg

                         countName: 'total' //数据总数的字段名称,默认:count

                         ,dataName: 'rows' //数据列表的字段名称,默认:data

                        }

                   /* done:function(){

                             layer.open({

                                   type:1,

                                   maxmin:true,

                                   area:["800px","600px"],

                                   content: $("#showalladdableavms")

                                 });

                             } */

                 });

        }

</script>

2.现象:分页,选择框等无法操作,查了查说是html()得到的会丢失dom对象的事件,如果直接用dom会出现一只无法展示dom内容的问题。

阅读剩余部分

相关阅读 >>

layui自定义字体图标图文教程

layui时间控件闪退的问题介绍

layui怎么实现下载功能

layui框架分页设置详解

layui的upload组件使用和上传阻止

layui数据表格隐藏列的方法介绍

layui如何使用jquery

layui是什么时候开发的

基于layui的步骤条面板(附代码)

layui中进度条渲染介绍

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...