데이터과학 삼학년

main HTML 안에 여러 html을 넣는 방식 본문

Web

main HTML 안에 여러 html을 넣는 방식

Dan-k 2020. 1. 23. 17:01
반응형

주 HTML을 구성하여 넣을 내용들을 영역을 나눠놓고, 각 영역별 들어갈 HTML을 작성하여 붙이는 작업을 할때 필요한 팁을 정리한다.

 

먼저 Main HTML을 구성하고 영역을 나누는 작업을 한다.

 

1.main HTML

<!DOCTYPE html>
<html lang="kr">
<head>
  <title>TSA Web Service</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
  <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>  
  <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>    
</head>
<body>
<div>
    <h2> Title </h2> 
</div>
<div class="container-fluid">
<div class="row">
   <div class="col-lg-3">
        {% include 'table.html' %}
   </div>
   
   <div class="col-lg-9">
        {% include 'figure.html' %}
   </div>
</div>
</div>
</body>
</html>

나는 컬럼을 3:9 의 비율로 나눠 각각 테이블과 그림을 넣을 예정이다.

 

main 안에 있는 include를 쓸 때 block 을 이용하여 table.html을 넣을 것이다.
그러나 단순히 table.html에 block을 직접 적용하면 main.html의 모든 내용을 복사하여(확장하여) 사용하는 것이기 때문에 중복이 발생한다.

이를 막기 위해 table_admin.html 이라는 다른 경로로 보내어 innerbody 만 가져오는 형태로 만든다.

자..코드를 보며 이해해 보자.

 

2.table.html --> 내가 표현하고 싶은 table의 진짜 형태

table.html은 main.html을 확장하여 사용하는 것이 아닌 table_admin.html을 확장하여 사용하고,

table_admin.html 은 안에 있는 내용만 반환하는 것이다. 

{% extends 'table_admin.html' %}
{% block body_content %}
<style>
    th { font-size: 14px; }
    td { font-size: 13px; }
</style>
<h3> <span style="color:brown"> [Detection Table] </span> </h3>
<table id="detection" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Datetime</th>
                <th>Worldno</th>
                <th>Feature</th>
                <th>Au</th>
                <th>Alert_level</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Datetime</th>
                <th>Worldno</th>
                <th>Feature</th>
                <th>Au</th>
                <th>Alert_level</th>
            </tr>
        </tfoot>
    </table>
<script>

    
function setupData() {
    $(document).ready(function () {
       var table = $('#detection').DataTable({
            "scrollX": true,
            "order": [[ 0, "desc" ]],
            ajax: {
                // "url": "static/objects.txt", // This works for the static file
                "url": "/{{ code }}/_get_data_for_table", // This now works too thanks to @kthorngren
                "dataType": "json",
                "dataSrc": "data",
                "contentType":"application/json"
            },
            columns: [
                {"data": "regdatetime"},
                {"data": "worldno"},
                {"data": "feature"},
                {"data": "au"},
                {"data": "alert_level"}
            ],
            columnDefs: [
                { "width": "30%", "targets": 0 }
            ],
           rowCallback : function(row, data, index) {
                      if (data["alert_level"] == "3") {
//                         $('td', row).css('background-color', 'Green');
                        $(row).find('td').css('color', 'red')
                      } 
                      else if (data["alert_level"] == "2") {
//                         $('td', row).css('background-color', 'Orange');
                        $(row).find('td').css('color', 'orange')
                      }
            }
           
        });
        
        $('#detection tbody').on( 'click', 'tr', function () {
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
        
        $('#detection tbody').on( 'click', 'tr', function () {
            var rowdata = table.row(this).data();
            window.open("/{{ code }}/figure?worldno="+rowdata['worldno']+"&"+"feature="+rowdata['feature'], "figure");
        });
        

    });
}
$( window ).on( "load", setupData );
</script>
{% endblock %}

 

3.table_admin.html

{% block innerbody %}
<div class="innerbody">
    {% block body_content %}
    {% endblock %}
</div>
{% endblock %}

 

좀 비잉~둘러온 느낌이지만...

그래도 이런 연결고리...재밌네..나름..허허허

 

figure.html 도 위와 동일한 방식으로 작업하면 된다!!!

728x90
반응형
LIST

'Web' 카테고리의 다른 글

Flask-Caching 소개  (0) 2020.01.30
탐지 결과 및 feature 시각화를 위한 WEB 서비스 개발  (0) 2020.01.23
Pandas dataframe to ajax datatables  (0) 2020.01.21
Visualize figure using html form data on same web page  (2) 2020.01.16
Visualization tool - bokeh (feat.falsk)  (0) 2020.01.15
'Web' Related Articles more
Comments