pivot-table-js/table_pivot.html at master · jun-roh/pivot-table-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
    <header>
        <!-- css import -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/datatables/datatables.min.css"/>

        <!-- js import -->
        <!-- js Libraries -->
        <script src="js/jquery/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/datatables/datatables.min.js"></script>
        <!--        <script type="text/javascript" src="js/datatables/dataTables.rowGroup.min.js"></script>-->
        <script type="text/javascript" src="js/datatables/dataTables.rowsGroup.js"></script>
        <script src="js/alasql/alasql.js"></script>

        <!-- js Parameter -->
        <script src="js/parameter.js"></script>
        <!-- js Pivot Tables logic -->
        <script src="js/common.js"></script>
        <script src="js/pivot_table/pivot_dao.js"></script>
        <script src="js/pivot_table/pivot_table.js"></script>

    </header>

    <style>
        table {
            width: 100%;
            border: 1px solid #000000;
        }
        th, td {
            border: 1px solid #000000;
            height: 15px;
            text-align: center;
        }

        tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        }

        div.container {
            width: 80%;
            margin: 2rem;
        }

        .row {
            width: 100%;
        }
    </style>

    <body>
    <div class="container">
        <div class="row">
            <div id="result" style="width: 100%">
            </div>
        </div>
    </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function() {
            // row field 설정
            let row_field = [{key: "row_val"}, {key: "row_val_1"}];
            // column field 설정
            let col_field = [{key: "col_val"}, {key: "col_val_1"}];
            // aggregation field 설정
            let aggregation_field = [{
                key: "agg_val_1",
                calculate: "sum"
            },{
                key: "agg_val_2",
                calculate: "avg"
            }];
            // 원본 데이터 설정
            let data_list = parameter;

            setPivotTable({
                target: 'result',
                name: 'result_pivot',       // table 이름
                type: 'table',              // type(table[스타일적용], raw[데이터만 적용])
                data: {
                    data_list: data_list,   // pivot 기반이 되는 전체 데이터
                    row_field: row_field,   // row_field 정보
                    column_field: col_field,// column_field 정보
                    aggregation_field: aggregation_field // aggregation_field 정보
                },
                style: {
                    pageLength: 25,         // 테이블 row 표시 갯수
                    row_total: true,        // 행 합계 표시 여부
                    column_total: true,     // footer 열 합계 표시 여부
                    sub_total: true,        // sub total 표시 여부
                    column_limit: {
                        limit: true,
                        limit_length: 101
                    }
                },
            });
        });
    </script>
</html>