bootstrap card

bootstrap 구문의 card를 이용하면 보다 깔끔하게 html 화면을 정리할 수 있다.

 

보통은 아래그림처럼 프로필을 나타내는데 card를 쓰지만

제목과 표, 제목과 그림등으로 담아서 정리하면 훨씬 보기 좋아진다.

예를 들면 표를 넣을때

<style>
    th { font-size: 14px; }
    td { font-size: 13px; }
</style>
<div class="card shadow mb-4">
    <div class="card-header">
        <h6 class="m-0 font-weight-bold text-primary">탐지 결과</h6>
    </div>
    <div class="card-body">
        <div class="chart-area">
            <table id="detection" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Datetime</th>
                        <th>Worldno</th>
                        <th>Feature</th>
        <!--                 <th>Value</th> -->
        <!--                 <th>Threshold</th> -->
        <!--                 <th>Autocorr</th> -->
                        <th>Au</th>
                        <th>Alert_level</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Datetime</th>
                        <th>Worldno</th>
                        <th>Feature</th>
        <!--                 <th>Value</th> -->
        <!--                 <th>Threshold</th> -->
        <!--                 <th>Autocorr</th> -->
                        <th>Au</th>
                        <th>Alert_level</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<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": "/{{ gamecode }}/_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": "value"},
//                 {"data": "threshold"},
//                 {"data": "autocorr"},
                {"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 %}

 

[이전]

[개선]

 

 

깔끔하게 정리하면

이전에 비해서...

참 많이 이뻐졌다..

 

web은 뭔가 만들어가는 재미는 있다..하하하..

 

자료 : https://www.w3schools.com/bootstrap4/bootstrap_cards.asp