개발자의 공부방/Frontend

데이터테이블 DataTable] 옵션

  • -
728x90
반응형
var Table = $('#table').DataTable({


        "destroy": true, //테이블 재생성
"paging": true, //페이징처리
"ordering": true, //칼럼별 정렬기능
"autoWidth": false, //가로자동
"lengthChange": true, //데이터건수 변경
"pageLength": 50, //기본 데이터건수
"lengthMenu": [[50, 100, 1000], [50, 100, "Max(1000)"]], //데이터건수옵션
"order": [15,'desc'], //기본 정렬칼럼
"searching": false, //검색
"scrollX": true, //가로 스크롤
"ajax": function (data, callback, settings) { //ajax 호출
$.ajax({
        url: "data.do",
        data: { params: JSON.stringify({
                            id: id
                        })
                },
        success: function(res) {
//받아온 데이터 조작
//콜백함수에 파라미터 데이터
            callback(res);
        }
    });
},
"columns" : [ //받아온데이터의 이름        //칼럼 클래스
    {"data": "id", "defaultContent": "", "className":"left"},
    {"data": "name", "defaultContent": ""}
    
],
"columnDefs" : [//칼럼조작
//가로길이         //칼럼제목   //데이터타겟    //해당칼럼만 정렬기능사용안함
    {"width":"1em", "title":"ID", "targets":1, "orderable": false},
    {"width":"1em", "title":"Name", "targets":2}
]
})
반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.