Layui - 调API接口渲染table表格数据

  1.  Home
  2. Text  
    3. Share to： 
<body>
    <table id="table_data" lay-filter="table_data"></table> <!--定义表格-->
<body>

<script type="text/javascript">
layui.use(['table'], function () {
    var table = layui.table;
    table.render({
        elem: '#table_data', // 定义表格的ID类名
        height: 'full-120',
        width: 'full',
        url: window.base.g_restUrl + 'banner/read',// 接口地址
        page: true,
        limits: [15, 25, 45, 60],
        limit: 15,
        cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', width: 100, fixed: 'left', align: 'center', sort: true},
                {field: 'img_id', title: '缩略图', width: 100, templet: '#showimg', align: 'center'},
                {field: 'type_id', title: '广告位置', width: 200, align: 'center', templet: '#typeName'},
                {field: 'title', title: '标题', width: 300, align: 'center', edit: 'text'},
                {field: 'href_url', title: '跳转路径', width: 500, edit: 'text'},
                {field: "status",title: '禁用状态',width: 150,sort: true,align: 'center',toolbar: "#switch",unresize: true},
                {field: 'sort', title: '排序', width: 200, edit: 'text', align: 'center'},
                {field: 'create_time', title: '创建时间', width: 200, align: 'center', sort: true},
                {title: '操作', width: 200, align: 'center', toolbar: '#barDemo', fixed: 'right'}
            ]],
            id: 'tableData',
        });
});
</script>
Last modification：June 13th, 2019 at 03:52 pm
© The copyright belongs to the author
如果觉得我的文章对你有用，请随意赞赏

Leave a Comment