JQuery DataTable 예제 1

이번 글에서는 Jquery datatable에 대해 알아보고자 한다.

 

서버에서 한꺼번에 데이터를 가져와서 보여줄 수도 있고 서버사이드 api를 활용해서 동적으로도 데이터를 불러올 수 있는 걸로 알고 있다.

 

그밖에 다양한 옵션에 대해 알아보고 개발 목적에 맞게 가져다 쓰면 될 것이다.

 

기본적인 설치는 아래와 같다.

 <link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
 <script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

 

필요한 라이브러리는 jquery, datatable style, datatable js 파일이다.

 

테이블 태그는 소스가 길어지기 때문에 직접 테스트한 소스 코드를 아래 링크에 공유하겠다.

plnkr.co/edit/G31AGSYruA7P1she?preview

Plunker - jQuery datable

테이블이 생성되고 나서 datatable을 구현해보자

 <script>
      $(document).ready(function() {
          $('#example-table').DataTable({
                paging:true, //paging 처리 여부다
                searching:true, //검색 여부
                language: { //언어 설정
                    paginate: {
                        previous: "이전",
                        next:"다음"
                    },
                    zeroRecords: "검색 결과가 없습니다.", //검색 결과 레코드가 없을 경우 표시할 텍스트
                    search:"검색:"
                }
          });
      });
</script>

간단한 옵션들에 대해서 알아봤다.

 

 

자세한 옵션은 아래 링크에서 참조하면 된다.

datatables.net/reference/option/

Options

 

물론 서버단에서 페이징 처리해서 게시판을 구현해도 되지만 jquery datatable 라이브러리를 활용하면 쉽게 구현할 수 있을 것이다.

 

jquery datatable extension도 참조하면 테이블 데이터 하나하나 수정할 수 있는 UI를 제공해주기 때문에 좀 더 효율적인 게시판을 구현하는데 도움이 될 것이다.

 

다음 jquery datatable 포스팅에서는 대용량 json 데이터를 불러와 게시판 테이블을 구현해보도록 하겠다