2021.07.15 - [공부기록/JQUERY] - [Jquery DataTables] 라이브러리 기본 사용법
[Jquery DataTables] 라이브러리 기본 사용법
[스프링 부트/RestController] 원격에서 data를 받아와서 테이블에 출력시키는 기능을 구현하고자 한다. jquery datatables library는 테이블과 데이터를 쉽게 binding하여 구현할 수 있게 도와준다. 공식홈페
amikim5263.tistory.com
기본 사용법은 위 포스트에서~
[스프링 부트/RestController]
이번 포스트에선 첫 번째 컬럼에 체크박스를 삽입하고 theader의 체크박스 선택시 전체 선택되는 기능에 대하여 써본다.
기본적으로 jquery, datatables 등 css, js를 추가한다.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" />
<script src="<c:url value='/js/jquery-3.5.1.min.js'/>" charset="utf-8"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<head>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/bootstrap.min.css'/>" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" />
</head>
<body>
<div class="container">
<table id="fileinfo" class="display" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" name="checkall" id="checkall"></th>
<th>bscd</th>
<th>Hash</th>
<th>File ID</th>
<th>파일명</th>
<th>파일 크기</th>
<th>FILE URL</th>
<th>삭제 여부</th>
<th>수정 날짜</th>
<th>수정 사용자</th>
<th>업로드한 페이지</th>
<th>비밀번호</th>
<th>생성 날짜</th>
<th>생성 사용자</th>
<th>비고</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan = "11" style = "text-align: right" >Total: </th>
<th colspan = "3"></th>
</tr>
</tfoot>
</table>
</div>
</body>[1] table에서 첫 번째 에 <input type="checkbox">를 추가한다.
<script src="<c:url value='/js/bootstrap.min.js'/>" charset="utf-8"></script>
<script src="<c:url value='/js/jquery-3.5.1.min.js'/>" charset="utf-8"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script>
$.ajax({
url:"http://localhost:7800/fileinfo"
}).done(function(d){
var table = $("#fileinfo").DataTable({
data: d
,dataSrc: ""
,columns : [
{ "data" : null },
{ "data" : "bs_cd" },
{ "data" : "file_hash" },
{ "data" : "file_id" },
{ "data" : "file_nm" },
{ "data" : "file_size" },
{ "data" : "file_url" },
{ "data" : "isDelete" },
{ "data" : "mod_date" },
{ "data" : "mod_user" },
{ "data" : "page_cd" },
{ "data" : "pw" },
{ "data" : "reg_date" },
{ "data" : "reg_user" },
{ "data" : "rmks" }
],
columnDefs: [
{
"targets" : [1,2,3,6,7,10,11,14],
"visible" : false
},
{
targets : 0,
orderable: false,
className: "select-checkbox",
data: null,
defaultContent: ''
}
],
select: {
style: "multi",
selector: "td:first-child"
},
initComplete: function(settings, json) {
$("#checkall").prop("checked",false);
$("#checkall").click(function(){
if($(this).prop("checked")){
table.rows().select();
}
else {
table.rows().deselect();
}
});
}
}
});
});
</script>[2] columns에서 첫번째 data를 null로 설정
[3] columnsDef에서 targets 0의 className: select-checkbox, data: null, defaultContent: ''로 설정해준다.
첫 번째 컬럼에 (index가 0인 컬럼) checkbox를 넣고 data는 넣지 않겠다는 의미다.
[3] select의 style을 multi로 바꾸고, selector를 td:first-child로 설정해준다.
이 설정을 통해 체크박스를 통해서만 행이 선택될 수 있도록 한다.
[4] initComplete은 초기화 함수다. 처음 데이터 테이블이 그려질 때 실행되는 함수로, 여기서 checkbox 전체 선택에 대한 이벤트 함수를 작성한다. table.rows().select(); 는 var table = $().DataTable({ ... 에서 선언한 table의 모든행(rows())을 선택하겠다는 함수다.
'공부기록 > 라이브러리' 카테고리의 다른 글
| [Tabulator] 등록 버튼 + 입력 폼 + 팝업 + 행 추가 (0) | 2021.07.18 |
|---|---|
| [Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용) (0) | 2021.07.18 |
| [Tabulator] 사용법(자바스크립트 그리드 라이브러리) (0) | 2021.07.17 |
| jquery dataTables vs. Tabulator 라이브러리 비교 (0) | 2021.07.16 |
| [Jquery DataTables] 라이브러리 기본 사용법 (0) | 2021.07.15 |
