[Jquery DataTable] 生成模板文件

以前生成模板文件，都是在后端放一个文件，前端提供一个链接地址。碰巧看到用DataTable来生成模板文件的方式，特此记录下。

原理：创建一个空数据的DataTable,提供导出按钮功能，并隐藏DataTable。页面上就只会显示一个按钮，不显示DataTable.

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <div>
        <table id="demo" class="display w-100"></table>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

    <script>
        var columnDefsValue = [
            {
                targets: 0, title: "column1", className: "text-center",
            },
            {
                targets: 1, title: "column2", className: "text-center",
            },
            {
                targets: 2, title: "column3", className: "text-center",
            },
            {
                targets: 3, title: "column4", className: "text-center",
            },
            {
                targets: 4, title: "column5", className: "text-center",
            }
        ];

        var columnsExport = [0, 1, 2, 3, 4];

        var oTable = $('#demo').dataTable({
            data: [],
            "searching": false,
            dom: 'Bfrtip',
            buttons: {
                buttons: [
                    {
                        extend: "excel",
                        className: 'btn btn-primary',
                        text: " <span class='color-white'>Template</span>",
                        filename: "Template",
                        title: '',
                        exportOptions: {
                            columns: columnsExport
                        },
                    },
                ],
                dom: {
                    button: {
                        className: 'btn'
                    }
                }
            },
            info: false,
            lengthChange: false,
            cellspacing: true,
            destroy: true,
            paging: false,
            columns: columnDefsValue
        });

        oTable.hide();
    </script>
</body>

</html>

 

posted @ 2023-04-25 10:47  WikiChen  阅读(61)  评论(0)  编辑  收藏  举报