[javascript] bootstrap datatable 사용해보기

 

 

INTRO

---

 

Bootstrap 의 플러그인인 DataTable에 대해서 소개해보고자 한다.

 

 

 

---

 

 

 

1. table 태그 생성

--> 우선 Datatable로 사용하고자 하는 테이블 태그를 생성한다.

<table id="table_id" class="table table-striped table-bordered" style="width:100%">

                <thead>
                    <tr>
                        <th style="width: 10%">Model</th>
                        <th style="width: 30%">MAC</th>
                        <th style="width: 30%">SAID</th>
                        <th style="width: 30%">User</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>(+) New</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    {% for idx in range(allDevices|length) %}
                    <tr>
                        <td>{{allDevices[idx]['model']}}</td>
                        <td>{{allDevices[idx]['devMacId']}}</td>
                        <td>{{allDevices[idx]['said']}}</td>
                        <td>{{allDevices[idx]['userName']}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

 

---

 

 

 

 

 

2. 초기화하기

-->id는 table_id, 이제 script 태그 안에 설정을 해준다.

$(document).ready(function () {
	initDevice();
});

-->다음은 initDevice() 함수

function initDevice() {
    var table = $('#table_id').DataTable({
        select: true,
        ordering: false,
        paging: false
    });


    $('#table_id tbody').on('click', 'tr', function () {
        let device = getDevice(table.row(this).data()[1]);
        $(".modal-body #model").val(device.model);
        $(".modal-body #mac").val(device.devMacId);
        $(".modal-body #said").val(device.said);
        $(".modal-body #user").val(device.userName);
        $(".modal-body #otv").prop("checked", device.otv);
        $(".modal-body #serial").prop("checked", device.serial);
        $(".modal-body #msg").val(device.msg);

        $('#gigaModal').modal('show');
    });
}

 

 

--> 초기화 하는 옵션은 아래 링크를 참조했다. 우선 나는 select 라는 extension을 사용했고, 

정렬은 하지 않고, 페이징 처리도 하지 않았다.

https://datatables.net/manual/options

Options

 

 

-->select 같은 extension을 사용하는 방법은 아래 링크에서 확인할 수 있음

https://datatables.net/extensions/select/

Select

1. CDN을 추가한다. 링크에 잘 보면 CDN 경로를 찾을 수 있다. 이후 바로 사용이 가능.

2. extension에 대한 사용법 설명도 해당 페이지에 잘 나와있다.

 

--> 또한 해당 열을 클릭했을 때, 모달 창이 열리도록 만들었다.

$('#table_id tbody').on('click', 'tr', function ()

부분을 참고하면 된다.

---

 

 

 

3. 사용해보기

--> 적용이 끝나고 실행해보면, 아래와 같은 화면 생성

 

-->여기서 페이징 처리하는 Select box나, Search를 하는 input box의 위치를 옮기고 싶다면,

아래 페이지의 dom을 참고하면 된다.

또한 단순 좌/우 align 변경은 css로 처리가 가능하다.

https://datatables.net/reference/option/dom

dom

 

---

 

 

 

 

 

 

-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!