'부트스트랩 테이블 생성하기'에 해당되는 글 1건

[bootstrapTable] 부트스트랩 테이블 JSON 값으로 만들기 


1. 필요한 라이브러리

     -JavaScript

 <!--  Jquery 가져오기 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- bootstrap 가져오기 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <!-- bootstrap table 가져오기  -->
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

     - CSS

<!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- 부트스트랩 테이블 -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">

 


2. 테이블 생성하기

 - Html 테이블 부분에서 field 값을 명시한다.

 <!-- 테이블 생성 부분 -->
            <table id="table">
                <thead>
                    <tr>
                        <!-- JSON 값과 매칭될 field를 명시 -->
                        <th data-field="subject">학과</th>
                        <th data-field="name">이름</th>
                        <th data-field="number">학번</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

- JavaScript 부분에서 데이터값과 테이블을 생성한다.

// document ready 
        $(function () {
            var $table = $("#table");
            // 테이블 표현할 데이터 표현
            var data = [
                {
                    "subject": "경영학과",
                    "name": "가나다",
                    "number": "20191234"
                },
                {
                    "subject": "체육학과",
                    "name": "알란",
                    "number": "20194567"
                },
                {
                    "subject": "심리학과",
                    "name": "구론",
                    "number": "20171227"
                },
                {
                    "subject": "심리학과",
                    "name": "구론",
                    "number": "20171227"
                }
            ];
            $table.bootstrapTable({ data: data })
        });

3. 결과화면


4. 전체코드

 

더보기

<!doctype html>

<html lang="ko">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, Bootstrap Table!</title>

 

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    

        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">

</head>

 

<body>

    <div id="wrap">

        <div class="pt-3"></div>

        <div class="container">

            <!-- 테이블 생성 부분 -->

            <table id="table">

                <thead>

                    <tr>

                        <!-- JSON 값과 매칭될 field를 명시 -->

                        <th data-field="subject">학과</th>

                        <th data-field="name">이름</th>

                        <th data-field="number">학번</th>

                    </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"

        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script> -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

 

    <script>

        // document ready 

        $(function () {

            var $table = $("#table");

            // 테이블 표현할 데이터 표현

            var data = [

                {

                    "subject": "경영학과",

                    "name": "가나다",

                    "number": "20191234"

                },

                {

                    "subject": "체육학과",

                    "name": "알란",

                    "number": "20194567"

                },

                {

                    "subject": "심리학과",

                    "name": "구론",

                    "number": "20171227"

                },

                {

                    "subject": "국문학과",

                    "name": "트레비",

                    "number": "20097892"

                }

            ];

            $table.bootstrapTable({ data: data })

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

,