Datatables动态表头，动态列渲染

最新推荐文章于 2023-05-26 14:35:25 发布

545522390

最新推荐文章于 2023-05-26 14:35:25 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/u013239476/article/details/103059340

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="app">
    <button id="btnGet">请求接口</button>
    <table class="display" id="example"></table>

</div>
</body>

<script>

    $(function () {
        //这里用异步请求后端，获取数据
        // let dataset = [
        //     {id: 0, name: 'alice', age: 2, money: 2},
        //     {id: 2, name: 'vilson', age: 5, money: 2}
        // ];//数据格式
        let colunms = [];
        var tables;
        var clicks = 1;
        //将要渲染的colunms
        //根据后端返回的数据，取第一条数据，拼装colunms


        function getData() {

            $.ajax({
                url: "https://health.vilson.xyz/api/index/getData",
                success: function (result) {
                    colunms = [];
                    let obj = {};
                    let results = JSON.parse(result);
                    if (clicks === 2) {
                        // colunms =
                        //     [
                        //         {id: 1, admin_id: 1, admin_name: "admin", path: "订单管理展示页"},
                        //         {id: 2, admin_id: 2, admin_name: "admin2", path: "2订单管理展示页"},
                        //         {id: 3, admin_id: 3, admin_name: "admin3", path: "3订单管理展示页"},
                        //         {id: 4, admin_id: 4, admin_name: "admin4", path: "4订单管理展示页"},
                        //     ];
                        results =
                            [
                                {id: 1, admin_id: 1, admin_name: "admin", path: "订单管理展示页"},
                                {id: 2, admin_id: 2, admin_name: "admin2", path: "2订单管理展示页"},
                                {id: 3, admin_id: 3, admin_name: "admin3", path: "3订单管理展示页"},
                                {id: 4, admin_id: 4, admin_name: "admin4", path: "4订单管理展示页"},
                            ];
                    }
                    $.each(results[0], function (key, val) {
                        obj = {
                            "title": key,
                            "class": "center",
                            "render": function (data, type, full, meta) {
                                return full[key];
                            }
                        };
                        colunms.push(obj);
                        console.log(colunms);
                    });
                    console.log(tables);
                    if (tables) {
                        tables.destroy();
                        $('#example').empty();
                    }
                    console.log(colunms);
                    tables = $('#example').DataTable({
                        "processing": true, //是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
                        "data": results,//设置数据
                        "columns": colunms,
                        "filter": false,
                        // "destroy": true
                    });
                }
            });
        }

        getData();

        $("#btnGet").click(function () {
            clicks = 2;
            getData();
        });
    })
    ;
</script>
<style>
    .center {
        text-align: center;
    }
</style>
</html>

545522390

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Datatables动态表头，动态列渲染

<!DOCTYPE html><html><head> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <scri...
复制链接

扫一扫