layui表格分页失效的解决方法

今天在用layui写表格的分页时,用url数据接口出现了分页失效的问题。总共有40条数据,分页是一页10条数据,虽然4页是显示出来了,但是他第一页就有40条数据,2,3,4页点击并没有什么效果。然后解决方法是下面这个就可以了。

代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <script type="text/javascript" src="./layui/layui.js"></script>
  </head>
  <body>
<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      url: "https://www.cmy0.com/test/json.php",
       where : {
        id : 0,
        status : 1
      },
      cols: [
        [
          { type: "checkbox", LAY_CHECKED: true },
          { type: "radio" },
          { type: "numbers" },
          { type: "space", title: "空列", width: 120 },
          //表头
          { field: "area_id", title: "ID", width: 120, fixed: "left" },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "归属", align: "right" },
          { field: "first_pinyin", title: "拼音", hide: true },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "状态", fixed: "right", style: "color:red;" },
        ],
      ],
            page: true
            ,limits: [3,5,10]  //一页选择显示3,5或10条数据
            ,limit: 10  //一页显示10条数据
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            
    });
  });
</script>
  </body>
</html>

 

版权声明:
作者:迁
链接:https://www.lzz0.com/92.html
来源:学习笔记
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
layui表格分页失效的解决方法
今天在用layui写表格的分页时,用url数据接口出现了分页失效的问题。总共有40条数据,分页是一页10条数据,虽然4页是显示出来了,但是他第一页就有40条数据,2……
< <上一篇
下一篇>>