다른 명령
Jquery DataTables
- dataTables은 데이터를 테이블로 쉽게 표현하고 다양한 기능을 제공하는 라이브러리,
- https://datatables.net/ 참조
DataTables 사용 방법
- DataTables를 사용하기 위해서는 css와 js파일을 추가
사용 예제
- 간단한 테이블을 만드는 예제
1) html 코드
- - 테이블 헤드정보(thead) 와 바디(tbody) 기술
<table id="exampleTable" class="table table-bordered">
<thead>
<tr>
<th>Seq</th>
<th>Name</th>
<th>Age</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr th:each="data : ${serverData}">
<td th:text="${data.seq}></td>
<td th:text="${data.name}></td>
<td th:text="${data.age}></td>
<td th:text="${data.date}></td>
</tr>
</tbody>
</table>
2) js 코드
- 간단한 코드 1줄 임.
$("#exampleTable").DataTable({ });
- .DataTable() 명령어로 기본적인 옵션을 가진 테이블 생성.
- 다양한 option을 통해 테이블의 기능을 활성, 비활성 또는 커스터마이징 할 수 있음
- 예를 들어 paging을 비활성화 하고 싶다면 (paging은 디폴트 값은 true)
$("#exampleTable").DataTable({
paging: false
});
- 옵션 디폴트 값 및 종류는 가이드를 참고
datatable 츨력건수 기본값 세팅
jQuery DataTable 기본으로 표시되는 항목(행) 수 변경
- pageLength 옵션을 사용하여 변경
- 테이블이 처음 로드될 때 몇 개의 행을 보여줄지 설정
기본 갯수 변경 예시
$(document).ready(function() {
$('#example').DataTable({
"pageLength": 10 // 기본 표시 갯수를 10으로 설정
});
});
- pageLength: 한 페이지에 표시할 기본 항목 수를 지정
- 기본값은 10이지만, 원하는 숫자로 변경 가능 25, 50 등을 설정.
더 많은 옵션과 함께 설정하는 예시
$(document).ready(function() {
$('#example').DataTable({
"pageLength": 25, // 기본 표시 갯수를 25로 설정
"lengthMenu": [ [10, 25, 50, 100], [10, 25, 50, 100] ] // 선택할 수 있는 항목 갯수 메뉴
});
});
- lengthMenu: 사용자가 페이지당 표시할 행 수를 선택할 수 있는 드롭다운 메뉴를 제공.
- 첫 번째 배열은 설정할 수 있는 숫자
- 두 번째 배열은 해당 숫자의 레이블
실시간으로 기본 갯수 변경
- 만약 테이블이 이미 초기화된 후에 기본 표시 항목 수를 변경
var table = $('#example').DataTable();
table.page.len(50).draw(); // 표시할 기본 항목 수를 50으로 변경
datatable 속성 값에 따라 색상 변경
jQuery DataTable에서 특정 셀 값이 50 이상일 때 배경색 변경
- jQuery DataTable에서 특정 셀 값이 50 이상일 때 해당 셀의 배경색을 빨간색으로 변경하려면, createdRow 콜백 함수와 CSS 스타일을 사용하여 셀을 수정할 수 있음.
DataTable 초기화 시 셀 스타일 변경 예시
- 각 셀을 검사하여 값이 50 이상인 경우 해당 셀의 배경색을 빨간색으로 설정
$(document).ready(function() {
$('#example').DataTable({
"createdRow": function(row, data, dataIndex) {
// data[n]는 n번째 열의 데이터를 나타냄 (0부터 시작)
$('td', row).each(function(index) {
var cellValue = parseFloat($(this).text());
if (cellValue >= 50) {
$(this).css('background-color', 'red');
}
});
}
});
});
- createdRow: DataTable이 각 행을 생성할 때 호출되는 콜백 함수.
- row는 생성된 HTML 행 요소
- data는 해당 행의 데이터
- dataIndex는 행의 인덱스
- $('td', row).each(...): 각 행의 셀을 순회하면서 td 요소를 검사하고, 그 값이 50 이상이면 해당 셀의 배경색을 빨간색으로 설정.
- parseFloat: 텍스트 값을 숫자로 변환하여 숫자 비교를 가능.
특정 열에 대해서만 스타일 적용
- 만약 특정 열(예: 3번째 열)에 대해서만 배경색을 변경하고 싶다면
$(document).ready(function() {
$('#example').DataTable({
"createdRow": function(row, data, dataIndex) {
var cellValue = parseFloat(data[2]); // 세 번째 열 값 (0부터 시작하므로 인덱스 2)
if (cellValue >= 50) {
$('td:eq(2)', row).css('background-color', 'red'); // 세 번째 열의 배경색 변경
}
}
});
});
- data[2]: 세 번째 열의 값을 가져와 비교
- $('td:eq(2)', row): 해당 행의 세 번째 열을 선택하여 배경색을 변경
- 특정 열의 값만을 검사하고, 조건에 맞을 때만 스타일을 적용함.
참조
테마 변경
https://datatables.net/beta/1.9/examples/basic_init/themes.html