DataTables 란
웹에서 여러 가지의 리스트의 값을 보여줄 때 <table> 태그를 많이 이용합니다. Android의 ListView가 있드시 특정 데이터를 한눈에 보기위한 Layout을 사용합니다. DataTable은 <table>태그의 필요한 기능을 입혀 편리하게 사용하도록 만들어 주는 라이브러리입니다. 일반적인 <table>은 페이징이나 검색기능을 따로 구현해 주어야하는데, jquery에서 제공하는 DataTables 라이브러리를 이용하면 Paging, Search, Sort기능이 포함되어 있기에 편리하게 사용이 가능합니다. 혼자서 페이징, 검색기능 추가하려하니 막막했는데 이런 라이브러리가 있다는게 저에겐 큰 행운인거 같습니다.
홈페이지에 가면 상세한 설명이 있습니다. 참고하세요. URL : https://datatables.net/
DataTables 적용법
CDN을 이용한 라이브러리 추가
헤더에 추가해줍니다.
.ready 함수에 데이터테이블이 활성화 하도록 적어줍시다.
기본적인 DataTable만 이용한다면 $('#mytable').DataTable(); 만 선언해줘도 되나 특정 옵션들을 컬럼에 적용하고 싶다면 위와같이 Option을 적용할 수 있다. 기본적으로 제가 필요했던 기능은 첫번째 컬럼 Sorting 방지 , 파일 크기 Sorting 기능이 필요해 두가지를 추가했다. 파일크기에 따른 정렬 cdn을 추가해 주고 type : 'file-size' 의
4번째 컬럼에게 기능을 부여한다는 의미는 targets : 3이다. 컬럼 4번째는 파일크기에 따른 정렬을 적용한다는 것이다.
파일정렬 cdn :
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/file-size.js"></script>
위 소스는 제가 개발했을 때의 예제이며 우리가 적용해야할 예제를 살펴봅시다.
lengthMenu 옵션은 보여줄 개체의 개수를 수정해 줄 수 있다.
'HTML Javascript css' 카테고리의 다른 글
| [JSP] jsp 액션 태그와 디렉티브 include (3) | 2018.08.10 |
|---|---|
| [HTML+CSS] javascript 수정 시 새롭게 캐시 적용법 (1) | 2018.08.10 |
| [HTML + CSS] jquery validate input 태그 비밀번호 조합 설정 (0) | 2018.03.22 |
| [HTML + CSS] DIV 태그 1:3:1 분할 (0) | 2018.01.25 |
| [HTML + CSS]link 태그 css 반영 안될 경우 (1) | 2018.01.25 |
