[jquery 그리드] 데이타 테이블 적용방법 - DataTables is a plug-in for the jQuery Javascript library

웹 개발을 할때 그리드를 빼놓을 수 없을 것이다.

그래서 여러 그리드가 나와 있다. 

그 중에서 DataTables - Table plug-in for jQuery를 실제 적용시켜보려고 한다.

자세한 정보는 https://datatables.net/ 에 잘 나와 있다.

(상단 메뉴에 에디터도 있는것 같던데 클릭하니 페이지를 찾을 수 없다고 나왔다.)

가장먼저 DataTables is a plug-in for the jQuery Javascript library 라는게 눈에 띈다.

웹 화면에서도 이것저것 볼 수 있지만 로컬로 다운 받아서 보기로 했다.

좌측 메뉴 하단 쪽에 Download 메뉴를 클릭하면 된다.

다운로드 URL은

https://datatables.net/download/download

접속하면 자동으로 다운로드 된다. 밑에 달러표시가 있길래 유료인줄 알았는데 support 부분이였다.

시간이 조금 지나니 자동으로 다운로드 되었다.

다운로드 폴더를 가보니 DataTables-1.10.15.zip 파일이 있었다.

압축을 풀고 examples 폴더를 가서 index.html 을 클릭했더니 웹 화면에서 본 깔끔한 그리드가 나오지 않았다.

뭔가 css,js를 못찾는 느낌이 였다.

그래서 오토셋 http://autoset.net 이 설치되어 있는 디렉토리로 파일을 복사해서 

http://localhost/DataTables/examples/index.html

로 접속을 해보니 이제야 깔끔한 css,js 가 적용된 그리드가 나왔다.

여러분도 오토셋을 설치해서 웹루트(public_html)에 파일을 가져다 두고 해야합니다.

The Javascript shown below is used to initialise the table shown in this example:

Javascript

1 2 3

$(document).ready(function() {     $('#example').DataTable(); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

• //code.jquery.com/jquery-1.12.4.js
• ../../media/js/jquery.dataTables.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

• ../../media/css/jquery.dataTables.css

이렇게 js와 css들을 사용해서 깔끔하게 만들어 준다.

이제 응용은 내가 할일인가..??

에디터도 같이 있었는데 에디터 접속하려면 시간이 상당히 오래 걸렸다. 서버가 다운된줄 알았는데 한참 있으니 열리긴 열렸다.

https://editor.datatables.net/