Jquery datatable - 편집 역사

2025년 5월 19일 (월) 21:59에 Devcafe님의 편집

2025-05-19T21:59:56Z

← 이전 판		2025년 5월 20일 (화) 06:59 판
64번째 줄:		64번째 줄:
	=== 테마 변경 ===		=== 테마 변경 ===
	https://datatables.net/beta/1.9/examples/basic_init/themes.html		https://datatables.net/beta/1.9/examples/basic_init/themes.html

			[[category:jquery]] [[category:jquery datatable]]

2024년 10월 16일 (수) 23:56에 Devcafe님의 편집

2024-10-16T23:56:50Z

← 이전 판		2024년 10월 17일 (목) 08:56 판
60번째 줄:		60번째 줄:
	=== [[datatable 속성 값에 따라 색상 변경]]===		=== [[datatable 속성 값에 따라 색상 변경]]===
	{{:datatable 속성 값에 따라 색상 변경}}		{{:datatable 속성 값에 따라 색상 변경}}

			== 참조 ==
			=== 테마 변경 ===
			https://datatables.net/beta/1.9/examples/basic_init/themes.html

Devcafe: /* datatable 속성 값에 따라 색상 변경 */

2024-10-15T23:29:24Z

datatable 속성 값에 따라 색상 변경

← 이전 판		2024년 10월 16일 (수) 08:29 판
57번째 줄:		57번째 줄:
	{{:datatable 츨력건수 기본값 세팅}}		{{:datatable 츨력건수 기본값 세팅}}

			----
	=== [[datatable 속성 값에 따라 색상 변경]]===		=== [[datatable 속성 값에 따라 색상 변경]]===
	{{:datatable 속성 값에 따라 색상 변경}}		{{:datatable 속성 값에 따라 색상 변경}}

Devcafe: /* datatable 속성 값에 따라 색상 변경 */

2024-10-15T23:29:06Z

datatable 속성 값에 따라 색상 변경

← 이전 판		2024년 10월 16일 (수) 08:29 판
58번째 줄:		58번째 줄:

	=== [[datatable 속성 값에 따라 색상 변경]]===		=== [[datatable 속성 값에 따라 색상 변경]]===
			{{:datatable 속성 값에 따라 색상 변경}}

Devcafe: /* datatable 츨력건수 기본값 세팅 */

2024-10-15T23:27:06Z

datatable 츨력건수 기본값 세팅

← 이전 판		2024년 10월 16일 (수) 08:27 판
55번째 줄:		55번째 줄:

	=== [[datatable 츨력건수 기본값 세팅]] ===		=== [[datatable 츨력건수 기본값 세팅]] ===
			{{:datatable 츨력건수 기본값 세팅}}

	=== [[datatable 속성 값에 따라 색상 변경]]===		=== [[datatable 속성 값에 따라 색상 변경]]===

2024년 10월 15일 (화) 23:26에 Devcafe님의 편집

2024-10-15T23:26:05Z

← 이전 판		2024년 10월 16일 (수) 08:26 판
35번째 줄:		35번째 줄:
	</source>		</source>

	2) ~~js코드~~		2) js 코드
	- 간단한 코드 1줄 임.		- 간단한 코드 1줄 임.
	<source lang=js>		<source lang=js>

Devcafe: /* = DataTables 사용 방법 */

2024-10-15T23:25:26Z

= DataTables 사용 방법

← 이전 판		2024년 10월 16일 (수) 08:25 판
3번째 줄:		3번째 줄:
	* https://datatables.net/ 참조		* https://datatables.net/ 참조

	=== DataTables 사용 방법==		=== DataTables 사용 방법===
	* DataTables를 사용하기 위해서는 css와 js파일을 추가		* DataTables를 사용하기 위해서는 css와 js파일을 추가
	** url		** url

2024년 10월 15일 (화) 23:25에 Devcafe님의 편집

2024-10-15T23:25:14Z

← 이전 판		2024년 10월 16일 (수) 08:25 판
43번째 줄:		43번째 줄:
	* .DataTable() 명령어로 기본적인 옵션을 가진 테이블 생성.		* .DataTable() 명령어로 기본적인 옵션을 가진 테이블 생성.
	* 다양한 option을 통해 테이블의 기능을 활성, 비활성 또는 커스터마이징 할 수 있음		* 다양한 option을 통해 테이블의 기능을 활성, 비활성 또는 커스터마이징 할 수 있음
	** 예를 들어 paging을 비활성화 하고 싶다면 ~~다음과 같이 처리하면 됩니다.~~		** 예를 들어 paging을 비활성화 하고 싶다면 (paging은 디폴트 값은 true)
			<source lang=js>
	~~paging은 디폴트 값이 true이므로, 이를 false 처리하면 됩니다.~~
	$("#exampleTable").DataTable({		$("#exampleTable").DataTable({
	paging: false		paging: false
	});		});
			</source>
	~~이 옵션의~~ 디폴트 값 및 종류는 아래 가이드를 참고 ~~바랍니다.~~
	https://datatables.net/reference/option/		* 옵션 디폴트 값 및 종류는 가이드를 참고
			*: https://datatables.net/reference/option/
	~~이 정도면 dataTables의 기본 기능을 활용하여 테이블을 사용 할 수 있습니다.~~		----

	~~다만 이런식으로 많은 양의 데이터를 처리할 경우 그 성능이 매우 떨어집니다.~~

	~~하나의 테이블을 로딩하는데 많은 시간이 소요되면 페이지 자체에 문제가 생길 수도 있죠~~

	~~위의 예시에서 처럼 th:each 루프를 돌며 모든 데이터를 그린 후 테이블이 로드되기 때문입니다~~

	~~이를 해결하기 위한 방법으로 Server~~-~~side Processing을 활용할 수 있습니다.~~

	=== [[datatable 츨력건수 기본값 세팅]] ===		=== [[datatable 츨력건수 기본값 세팅]] ===

	=== [[datatable 속성 값에 따라 색상 변경]]===		=== [[datatable 속성 값에 따라 색상 변경]]===

Devcafe: /* 사용 예제 */

2024-10-15T23:22:00Z

사용 예제

← 이전 판		2024년 10월 16일 (수) 08:22 판
13번째 줄:		13번째 줄:

	1) html 코드		1) html 코드
	~~:::~~:- 테이블 헤드정보(thead) 와 바디(tbody) 기술		:- 테이블 헤드정보(thead) 와 바디(tbody) 기술
	<source lang=html>		<source lang=html>
	<table id="exampleTable" class="table table-bordered">		<table id="exampleTable" class="table table-bordered">

Devcafe: /* 사용 예제 */

2024-10-15T23:21:26Z

사용 예제

← 이전 판		2024년 10월 16일 (수) 08:21 판
13번째 줄:		13번째 줄:

	1) html 코드		1) html 코드
	- 테이블 헤드정보(thead) 와 바디(tbody) 기술		::::- 테이블 헤드정보(thead) 와 바디(tbody) 기술
	<source lang=html>		<source lang=html>
	<table id="exampleTable" class="table table-bordered">		<table id="exampleTable" class="table table-bordered">
62번째 줄:		62번째 줄:

	이를 해결하기 위한 방법으로 Server-side Processing을 활용할 수 있습니다.		이를 해결하기 위한 방법으로 Server-side Processing을 활용할 수 있습니다.


	=== [[datatable 츨력건수 기본값 세팅]] ===		=== [[datatable 츨력건수 기본값 세팅]] ===

	=== [[datatable 속성 값에 따라 색상 변경]]===		=== [[datatable 속성 값에 따라 색상 변경]]===