데이터과학 삼학년

Pandas dataframe to ajax datatables 본문

Web

Pandas dataframe to ajax datatables

Dan-k 2020. 1. 21. 15:02
반응형

Web 개발에서 ajax 를 사용하면 여러 데이터들을 아주 보기 좋게 테이블로 나타낼 수 있는 장점이 있다.

 

 

pandas dataframe을 ajax에 적용하기 위한 방법을 정리한다.

 

 

 

1. pandas df --> json for ajax

ajax는 기본적으로 json 형태의 data를 받기 때문에 pandas df를 json으로 변환해야한다.

pandas에서 json은 다양한 형태로 저장 될 수 있다.

아래 그림 처럼 orient 를 통하여 records, index, columns, values, table 등 다양한 json 형태로 저장할 수 있다.

ajax는 이 중 records의 방법을 선택하여 저장하면 된다!

 

source:https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.to_json.html

 

 

Ajax 홈페이지에서는 data 형태를 아래와 같은 형태로 저장했지만

 

 

 

실제로는 아래처럼 field 명도 함께 있어야 데이터가 읽을 수 있다.

 

 

 

2. 코드

코드는 크게 app.py 와 templates/table.html 로 나눈다.

app.py

from flask import Flask, render_template, jsonify

import pandas as pd

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('table.html')

@app.route('/get_table_data')
def get_data():
    data = pd.dataframe(...bq에서 불러오든...로컬에 있든..알아서...)
    detection_json = data.to_json(orient='records')
    json_dict = {}
    json_dict['data'] = json.loads(detection_json)
    return jsonify(json_dict)
    
if __name__ == '__main__':
    app.run(host='0.0.0.0',debug=True,port=5000)

templates/table.html

아래 코드에서 ajax : {url: 경로} 를 통해 data를 generate한 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Datatables Example</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h3>Detection Table</h3>
<table id="detection" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Datetime</th>
                <th>Worldno</th>
                <th>Feature</th>
                <th>Value</th>
                <th>Threshold date</th>
                <th>Alert_level</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Datetime</th>
                <th>Worldno</th>
                <th>Feature</th>
                <th>Value</th>
                <th>Threshold date</th>
                <th>Alert_level</th>
            </tr>
        </tfoot>
    </table>
<script>
    
function setupData() {
    $(document).ready(function () {
        $('#detection').DataTable({
            ajax: {
                // "url": "static/objects2.txt", // This works for the static file
                "url": "/get_table_data", // This now works too thanks to @kthorngren
                "dataType": "json",
                "dataSrc": "data",
                "contentType":"application/json"
            }
            ,columns: [
                {"data": "regdatetime"},
                {"data": "worldno"},
                {"data": "feature"},
                {"data": "value"},
                {"data": "threshold"},
                {"data": "alert_level"}
            ]
        });
    });
}
$( window ).on( "load", setupData );
</script>
</body>
</html>

 

 

이런식으로 실행을 하면...

 

 

 

이런 결과를 얻을 수 있다.

정렬, search, page 등 여러 기능을 다 쓸 수 있어 편리하다.

 

 

layout.html을 만들어 table, figure 등을 따로 관리하는 방향으로 가려한다~

 

자세한 내용

https://datatables.net/examples/data_sources/ajax

 

DataTables example - Ajax sourced data

Ajax sourced data DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting the ajax option to the address of the JSON data source. The ajax option also a

datatables.net

참고자료 : 

https://kutar37.tistory.com/entry/Grid-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%ACDatatables-%EC%82%AC%EC%9A%A9%EB%B2%95%EC%98%88%EC%A0%9C

728x90
반응형
LIST

'Web' 카테고리의 다른 글

탐지 결과 및 feature 시각화를 위한 WEB 서비스 개발  (0) 2020.01.23
main HTML 안에 여러 html을 넣는 방식  (0) 2020.01.23
Visualize figure using html form data on same web page  (2) 2020.01.16
Visualization tool - bokeh (feat.falsk)  (0) 2020.01.15
HTTP 응답코드와 메소드 정리  (0) 2020.01.15
'Web' Related Articles more
Comments