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