DataTables 사용법

DataTables는 HTML의 <table>을 데이터 그리드 형식으로 사용하기 위한 라이브러리입니다.

 

속성의 순서도 중요합니다.  column 속성을 주려면 columnDefs 다음으로 줘야 작동합니다.

    <script>
                $(document).ready(function () {
                    var table = $('#productDataTable').DataTable({
                        "searching": true, "autoWidth": false,
                        "columnDefs": [
                            {"width": "5%", "targets": 0},//id //   {"width": "5%", "targets": 0, "order": "desc", "orderSequence": ["desc"]},//id
                            {"width": "20%", "targets": 6},//가입일
                            {"width": "5%", "targets": 3},// 상품 사이즈
                            {"width": "10%", "targets": 4},// 현재 재고량
                            {"width": "10%", "targets": 5},//업체명
                            {"width": "25%", "targets": 1},// productname
                            {"width": "10%", "targets": 2},// 카테고리,
                        ],
                        "order": [[0, 'desc'],]
                    });
                    $('#container').css('display', 'flex');
                    table.columns.adjust().draw();
                });
            </script>

 

 

 

참고 문헌

ponyozzang.tistory.com/220

 

datatables.net/reference/option/order

 

datatables.net/reference/option/columnDefs.targets