go-stat-reporter(3):使用datatables 做通用数据显示

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

博主地址是:http://blog.csdn.net/freewebsys

1,页面显示


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

2,页面显示代码



<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()
}

这样在页面当中就可以往页面中输出字段。

var {{rawJs $table.Id}};

因为golang template 模板的原因,要是直接输出数据的话。
会带上双引号。必须要加上 rawJs 函数才行。

3,显示效果


go-stat-reporter(3):使用datatables 做通用数据显示_第1张图片

4,总结


使用beego 模板,做数据展示。
jquery 增加西配置就可以了。指定ajax url ,和参数配置就可以了。

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/80919855

博主地址是:http://blog.csdn.net/freewebsys

你可能感兴趣的:(golang,stat-reporter)