[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:
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:
The following CSS library files are loaded for use in this example to provide the styling of the table:
이렇게 js와 css들을 사용해서 깔끔하게 만들어 준다.
이제 응용은 내가 할일인가..??
에디터도 같이 있었는데 에디터 접속하려면 시간이 상당히 오래 걸렸다. 서버가 다운된줄 알았는데 한참 있으니 열리긴 열렸다.