제이쿼리 DataTables 사용법

더 자세한 설명

https://www.datatables.net/

HTML

<table id="table">
</table>
 

Javascript

$('#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');
                            }            
                        }