layui从接口获取数据并动态渲染table表格的通用函数

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、HTML代码

<table class="formtable" id="asideMenu"></table>

二、定义两个函数

1.获取数据data的函数

 
function getData() {
     
      $.ajax({
        url: '',//放你自己的接口
        type: "get",
        dataType: "json",
        contentType: 'application/json',
        crossDomain: true,
        xhrFields: {
          withCredentials: true
        },
        data: JSON.stringify(),
        success: function (data) {//返回的数据我放在data.obj.records里
        
         setData("#asideMenu",data.obj.records);//调用setData渲染table 
        },
        error: function (data) {
          layer.msg(data.msg);
        }
      });
    }

2.table渲染数据

function setData(Id, data) {
      var table = layui.table;
      table.render({
        elem: Id  //table的id属性
        , data: data  //后台获取的数据
        , cols: [[ //你自己的表头
            { field: 'ssqy', title: '所属企业' },
            { field: 'title', title: '产品名称' },
            { field: 'yijifenlei', title: '一级分类' },
            { field: 'cplx', title: '产品类型' },
        ]]
      });

3.展示

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了table动态渲染的使用