go-stat-reporter（3）：使用datatables 做通用数据显示

本文链接：https://blog.youkuaiyun.com/freewebsys/article/details/80919855

本文介绍如何在Beego框架下使用DataTables实现数据展示，包括页面布局、JavaScript配置及Go模板技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目地址：
https://github.com/golangpkg/go-stat-reporter/
相关分类文章：
https://blog.youkuaiyun.com/freewebsys/article/category/7778259
本文的原文连接是:
https://blog.youkuaiyun.com/freewebsys/article/details/80919855

博主地址是：http://blog.youkuaiyun.com/freewebsys

1，页面显示

使用datatables 做数据显示。
https://datatables.net/examples/styling/material.html
样式使用 dataTables.material.min.css
是基于 goolge 的 material 做的页面。
https://getmdl.io/
页面做起来还好是挺方便的。

2，页面显示代码

<!doctype html>
<html lang="en">
<head>
    <title>【数据统计系统】</title>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="/static/css/Material+Icons.css">
    <link rel="stylesheet" href="/static/css/material.blue-indigo.min.css">
    <link rel="stylesheet" href="/static/css/dashboard.css">
    <link rel="stylesheet" href="/static/css/dataTables.material.min.css">
 </head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <main class="mdl-layout__content">
        {{range $key, $table := .Page.DataTables}}
            <div class="mdl-grid demo-content">
                <h5 class="mdl-cell">{{$table.Name}}</h5>
                <div class=" mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col">
                    <table id="dynamic-table-{{$table.Id}}" class="mdl-data-table dataTable" style="width: 100%;" role="grid">
                        <thead>
                        <tr>{{ range $table.LabelArray }}
                            <th>{{.}}</th>
                        {{ end }}
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        {{end}}
    </main>
</div>
</body>
<script type="application/javascript">
    jQuery(function($) {
        {{range $key, $table := .Page.DataTables}}
        var {{rawJs $table.Id}};
        $('#dynamic-table-{{$table.Id}}').DataTable( {
            "bFilter": false,
            "ordering": true,
            "processing": true,
            "serverSide": true,
            "lengthMenu": [[20, 30, 50, 100,1000, -1], [20, 30, 50, 100,1000, "All"]],
            "language": {"url": "/static/js/datatables.Chinese.json"},
            "ajax": "/admin/table/api?tableId={{$table.Id}}",
            "columns": [
            {{ range $table.ColumnArray }}
                { "data": "{{ . }}" },
            {{ end }}
            ]
        });
        {{end}}
    })
</script>

</html>

其中还使用rawJs代码：

//http://blog.xiayf.cn/2013/11/01/unescape-html-in-golang-html_template/
// 定义函数unescaped
func rawJs(x string) interface{}   { return template.JS(x) }
func rawHtml(x string) interface{} { return template.HTML(x) }

func main() {
    //增加自定义函数。
    beego.AddFuncMap("rawJs", rawJs)
    beego.AddFuncMap("rawHtml", rawHtml)
    //放到最后。
    beego.Run()
}