더 자세한 설명
https://www.datatables.net/
HTML
1 2 3 | <table id="table"> </table> | cs |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | $('#table').DataTable( { destroy: true,//테이블 파괴가능 bPaginate: true, //페이징처리 bLengthChange: true, // n개씩보기 lengthMenu : [ [10, 25, 50, -1], [10, 25, 50, "All"] ], // 10/25/50/All 개씩보기 bAutoWidth: false, //자동너비 ordering: true, //칼럼별 정렬 searching: false, //검색기능 ajax : { method:"post", url: controllerUrl, data:{ } }, columns: [ //칼럼별로 지정 ex)칼럼이 2개일때 {"title":타이틀, "mData":ajax 데이터명, "defaultContent": ""}, {"title":타이틀, "mData":ajax 데이터명, "defaultContent": ""} ] columnDefs : [{ "targets" : [ n번째칼럼 ], "orderable" : false, "searchable": false, "className" : "center", //칼럼에 클래스네임추가 "render" : function ( data, type, row ) { //row: ajax var html = '<button id="modifiedBtn" value="'+row.data+'"><i class="fas fa-edit"></i></button>' html = html+'<button id="deleteBtn" value="'+row.data+'"><i class="fas fa-trash-alt"></i></button>' return html; } }], createdRow: function( row, data, dataIndex ) { //data: ajax if(data.CESSATION_YN=='Y'){ $(row).addClass('cessationY'); } } | cs |
'DEV > Javascript&JQuery' 카테고리의 다른 글
제이쿼리 오늘날짜 받아오기 (0) | 2018.10.10 |
---|---|
자바스크립트 페이지 뒤로가기 차단 (0) | 2018.10.10 |
제이쿼리 DataTables 데이터만 reload (0) | 2018.10.10 |
자바스크립트 대소문자 변환 (0) | 2018.10.10 |
제이쿼리 tbody 정보 뽑아내기 (0) | 2018.10.10 |