[Bootstrap,JQuery] Table을 이쁘게 정리하기

안녕하세요?

이번시간에는 GMS 툴 개발에 따른 Frontend에서 유용한 플러그인을 소개해드리고자 합니다.

다음의 URL 을 참조하시면 확인해보실 수 있습니다.

https://datatables.net/examples/styling/bootstrap.html

아래는 적용(전) 과 (후) 의 스크린샷 입니다.

적용전

<적용전>

위의 사진은 현재 테스트 중인 약 2천개정도의 데이터를 플러그인 없이 보여줄때 모습입니다.

( 향후 데이터가 무지무지하게 쌓이면.. 엄청나겠죠 ?)

다음은 플러그인을 적용한 모습입니다.

10, 20,50, 100 개 들이로 정리해서 볼 수 있으며, Search 를 통해서 테이블 Row 를 검색할 수 있고, Pagination 기능을 제공해줍니다. 

"손수 구현해보고 싶다" 라는 마음이거나 한번도 구현해본적이 없다면 ( 페이지네이션, 엔트리, 검색 ) 직접 하시길 추천해드리고.

구현을 해보았고, 노가다로 느껴질 경우 해당 플러그인으로 편하게 작업을 해보는게 좋다고 생각됩니다.

사용방법은 아래 간략하게 정리하도록 하겠습니다.

jQuery 1.12 버전 이상으로 사용해주시면 될것 같습니다. ( 그 이하 버전을 테스트 해보지는 않았습니다. 예제 사이트에서 사용한 버전이 1.12 이므로 얘기드렸습니다. 필자는 2버전때 jquery 를 사용하였습니다. )

1. 파일 다운로드 및 <script src=""></script> 스크립트를 적용해주세요.

dataTables.bootstrap.min.js

jquery.dataTables.min.js

아래와 같이 되겠죠?

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

<script src="dataTables.bootstrap.min.js"></script>

<script src="jquery.dataTables.min.js"></script>

2. api 호출을 해봅니다.

다음과같이 호출을 해줍니다.

$('#example').DataTable();

처음부터 모든걸 다 만들어보겠다 싶으신분들은 한번 만들어보시는걸 추천해드립니다.

그러나, 현업에서 시간이 없으신분들은 사용해보시는걸 추천합니다.

(그러나, 보다 더 커스터마이징이 필요하다! 그렇다면 만드시는걸 추천해드립니다. )

사용해본 경험 - 편리합니다.

다만, 브라우저의 호환성은 테스트해보지 못했습니다. 크롬 48.0 이상 버전에서는 정상작동합니다.