DataTables (table plugin for jQuery) 1. 기본 Usage

Features

• 가변길이 페이징
  
• 조회중 필터링
  
• 데이터타입 탐지로 다중 컬럼 소팅
  
• 컬럼폭의 스마트 핸들링
  
• 다양한 데이터소스로 부터 데이터 표시
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
• 완전한 국제화 지원
• jQuery UI ThemeRoller support
• Rock solid - backed by a suite of 1300+ unit tests
• Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
• It's free!
• 상태 저장
  
• 컬럼 감추기
  
• 테이블의 동적 생성
  
• Ajax 데이터 자동 로딩
  
• Custom DOM positioning
• Single column filtering
• 선택적인 페이징 타입
  
• Non-destructive DOM interaction
• Sorting column(s) highlighting
• Extensive plug-in support
  • Sorting, type detection, API functions, pagination and filtering
• Fully themeable by CSS
• Solid documentation
• Full support for Adobe AIR

필수 조건

01.<table id="table_id">

02.    <thead>

03.        <tr>

04.            <th>Column 1</th>

05.            <th>Column 2</th>

06.            <th>etc</th>

07.        </tr>

08.    </thead>

09.    <tbody>

10.        <tr>

11.            <td>Row 1 Data 1</td>

12.            <td>Row 1 Data 2</td>

13.            <td>etc</td>

14.        </tr>

15.        <tr>

16.            <td>Row 2 Data 1</td>

17.            <td>Row 2 Data 2</td>

18.            <td>etc</td>

19.        </tr>

20.    </tbody>

21.</table>

thead 와 tbody 는 필수 , tfooter는 옵션

데이터 소스

• DOM (i.e. an HTML table in a page)
• JavaScript array
• Ajax source - a server-side file, with JSON formatting
• Server-side processing - where the server will deal with pagination, filtering etc

주요기능 설정

bAutoWidth  - 자동컬럼폭 계산
bFilter     - 데이터 필터링
bInfo       - 테이블정보 표시
bJQueryUI   - jQuery UI ThemeRoller 지원
bLengthChange - 정보표시갯수 허용 (10, 25, 50, 100), bPagenate 필요
bPaginate   - 페이징
bProcessing - 테이블 처리중 'processing' 인디케이터 표시
bSort       - 컬럼소팅 , 각 컬럼에 bSortable 옵션으로 조정가능
bSortClasses  -  소트된 컬럼에 클래스 추가 , 큰 데이터셋에서는 사용하지 말것
bStateSave  - 상태저장, true시 테이블에 표시된 정보사항을 쿠키에 저장, 리로딩시에 유지


옵션

주요기능 설정으로  DataTables적용시의 상세기능설정을 위한 다른 많은 Parameter가 있음

aaSorting   - array, 컬럼의 인덱스와 소트방향('asc' 또는 'desc')
aaSortingFixed -  aaSorting과 기본적으로 동일, 그러나 사용자에 의해 재정의 될 수 없음
aoSearchCols -  oSearch와 기본적으로 동일, 초기화시 개별 컬럼의 필터링상태를 정의,
                array는 컬럼의 갯수와 동일해야 한다.
                각 요소는 sSearch 와 bEscapeRegex (옵션). 'null'은 기본값으로 사용 가능
asStripClasses - 표시된 row에 적용할 CSS Array , Array길이에 따라 순서대로 적용됨
iCookieDuration - 세션정보 저장을 위한 쿠기 유지기간, 단위는 초
iDisplayLength  - 페이징시 한 페이지에 표시할 줄수. bLengthChange 사용시 사용자는 팝업메뉴로 설정 가능
iDisplayStart - 페이징 사용시 표시시작할 위치를 정의, 시작 줄(레코드) 번호 의미함.
                예) 페이지당 10줄인 경우 3페이지 부터 시작하려면 "20"
oSearch  - 초기화시 전역 필터링상태를 정의하기 위해 사용, 반드시 sSearch 가 정의되어 있어야 함
sAjaxSource  - DataTables에 외부소스로 부터 데이터를 aData 파라미터를 이용해서 로딩하도록 함
               읽어올 JSON 오브젝트의 url을 적음.
               오브젝트는 반드시  소스데이터와 2D  Array인 aaData를 포함해야 한다.
sPagenationtype  - 페이징메서드 'two-button' 또는 'full_numbers'
sDom  - DataTables를 인젝트할 다양한 컨트롤들의 DOM내 위치를 명확하게 명기한다.
        예) 페이지네이션 컨트롤을 테이블 상단에 위치시킨다.. 등
        스타일을 지원하기 위한 DIV요소도 추가될 수 있다.

        사용가능한 옵션

• 'l' - Length changing
• 'f' - Filtering input
• 't' - The table!
• 'i' - Information
• 'p' - Pagination
• 'r' - pRocessing

       사용가능한 상수

• 'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
• 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')

    
      문법

• '<' and '>' - div elements
• '<"class" and '>' - div with a class

      사용예

      '<"wrapper"flipt>', 'ip>'


콜백 Callbacks

fnDrawCallback  - 매 draw 이벤트시, 생성된 DOM의 모든 것을 동적으로 변경가능
fnFooterCallback  -  fnHeaderCallback() 과 동일하나 매 draw이벤트시 footer를 동적으로 변경가능
fnHeaderCallback  -  매 draw이벤트시 header 줄을 동적으로 변경가능
fnInitComplete  -  테이블초기화 완료시, DataTables는 일반적으로 순서대로 초기화되고, 이 함수가 필요없음
                   그러나 외부언어정보의 async XHR 콜 완료시 까지 true를 잡지 못한다.
fnRowCallback  - 각 테이블의 draw에 의해서 화면에 그려진 후에, 생성된 각 row에 대해 다음처리를 가능하게 한다.
                 row의 클래스명등을 설정하는데 사용
fnServerData  -  서버에서 데이터를 받을 때 기본함수를 override 할 수 있게 한다.
                 fnServerData는 Ajax Sourced Data 또는 Server-side Processing 을 사용 가능하다.


Columns

각 컬럼별로 특별한 지시를 원할 때, aoColumns 파라미터와 각 Object정보를 가지고 할 수 있다.
array 길이는 HTML 테이블의 컬럼수와 반드시 일치해야 한다.  기본값과 자동탐지 옵션을 원할 때는 'null'을 사용
Array내의 각 오브젝트는 아래의 파라미터 또는 'null'을  사용할 수 있다.

asSorting  - 소트 방향을 조정가능하고, 소트 핸들러의 동작을 조정할 수 있다.

bSeachable  - 컬럼의 데이터를 필터링 가능하게 함

bSortable  - 컬럼의 소팅 가능여부

bUseRendered - 컬럼에 fnRender() 를 사용할 때 , 소트와 필터링을 위해 렌더링하기 전에 원데이터를 사용하기 원할 수 있다.
               기본은 사용.
               이건은 일자(dates)등에 유용하게 사용될 수 있다.

bVisible  - 컬럼의 표시여부

fnRender  - 커스텀 표시함수로 이컬럼의 각 셀의 표시를 위해 콜된다.

iDataSort  -  선택된 컬럼의 소팅을 실행할 컬럼인덱스 (0부터 시작) , 숨겨진(hidden)컬럼의 소팅을 위해 사용할 수 있음

sClass  - 컬럼의 각 셀에 적용할 클래스

sName  - 이것은 DataTables의 server-side Processing에서만 사용한다.
         클라이언트에 어떤 컬럼을 표시할 것인지 아는데 매우 유용하고, 이것은 데이터필드에 매핑한다.
         이것을 정의하면 서버에서 예상하지 않은 순서로 값이 올때, 테이터테이블이 순서를 재구성할 정보를 제공한다.
         (클라이언트에서 컬럼 순서를 변경해도 서버쪽 코드는 수정할 필요가 없다.)

sSortDataType  - 소팅을 위한 데이터 소스 타입을 정의한다. 테이블로 부터 실시간 정보를 읽는데 사용가능하다.
                 이것은 폼 input 같은 사용자가 editable한 요소를 소팅할 수 있게 한다.

sTitle - 컬럼 타이틀

sType  - 컬럼이 소트될 방법을 정의할 수 있게 한다.
         현재 네가지 타입 (string, numeric, date , html - 소트전에 태그를 strip함) 이 사용가능함
         date는 JavaScript의 Date()으로 받아들이는 것에 주의할 것.
         예) "Mar 26, 2008 5:03 PM"
         사용가능한 값은 'string','numeric','date', 'html' ,  기본은 'html'이다.

sWidth  - 컬럼의 폭을 정의,  이것은 CSS 값 형태를 가질 수 있다.  예) 3em, 20px 등
         DataTables는 'smart' 폭을 제공한다. 이것은 주어진 특정한 폭에서 테이블을 가독성있게 할 수 있도록 해준다.




언어(국제화)

oLanguage 오브젝트의 프로퍼티를 이용해서 DataTables의 국제화를 완전하게 조절할 수 있다.
다음의 모든 스트링들은 HTML태그를 포함할 수 있다. 예) image등


oLanguage.oPaginate.sFirst -  'full_numbers' 페이징에서 첫페이지 버튼명
oLanguage.oPaginate.sLaxt -  'full_numbers' 페이징에서 끝페이지 버튼명
oLanguage.oPaginate.sNext -  'full_numbers' 페이징에서 다음페이지 버튼명
oLanguage.oPaginate.sPrevious -  'full_numbers' 페이징에서 이전페이지 버튼명
oLanguage.sInfo  -  현재 표시된 페이지의 정보를 사용자에게 줌
                    _START_ , _END_, _TOTAL_ 변수들은 테이블 디스플레이가 Update되는 것처럼 동적으로 변경(replace)되고
                    자유롭게 이동이나 삭제할 수 있다.
oLanguage.sInfoEmpty  -  테이블이 empty일때 스트링정보를 표시
oLanguage.sInfoFiltered  - 사용자가 테이블을 필터링 할 때, 이 스트링은 sInfo에 append된다.
                           변수 _MAX_는 동적으로 업데이트된다.
oLanguage.sInfoPostFix  - 때때로 info 스트링에 부가정보를 추가하려면 이 변수를 사용한다.
                          이정보는 sInfo에 언제든지 추가될 수 있다.
oLanguage.sLengthMenu - 페이징 길이옵션을 변경할때 사용,  _MENU_ 변수 기본값은 10,25,50,100 이다.
                        사용자가 선택박스를 필요시 변경할 수 있다.
oLanguage.sProcessing -  테이블 처리시 processing 표시글
oLanguage.sSearch  - 사용자가 필터링 입력박스에 타이핑할 때 잡히는 액션들의 기록
oLanguage.sUrl   - 언어관련 정보가 서버에 있을때, DataTables가 참조할 값으로 넘어간다.
                   JSON포맷으로 oLanguage오브젝트와 동일한 프로퍼티를 갖는다.
oLanguage.sZeroRecords  - 테이블에 정보가 없을 때, 테이블의 내부에 표시될 텍스트.
                          테이블이 필터되어 해당 레코드가 없을때도 사용됨


서버측 프로세싱


서버측 프로세싱을 사용할 때, DataTables는 각 페이지정보를 draw하기 위해 서버에 XHR request를 보낸다.
DataTables는 서버에 원하는 처리를 요청하기위해 변수들을 전송하고, DataTables가 원하는 포맷의 데이터를 리턴받는다.


서버로 전송하는 파라미터들

아래 정보는 각 draw request를 위해 서버에 전송된다.
서버측 스크립트는 draw를 위해 필요한 데이터를 포함인 이 정보들을 필수적으로 이용한다.

Type	Name	Info
int	iDisplayStart	표시할 시작 포인트     ** Start 와 Length는  mysql의 Limit 사용기준  ex) Limit  0, 20
int	iDisplayLength	표시할 레코드 수
int	iColumns	표시될 컬럼수 (개별 컬럼정보를 가져오는데 유용)
string	sSearch	전역 검색 필드
boolean	bEscapeRegex	전역검색이 정규표현식인지 아닌지
boolean	bSortable_(int)	컬럼이 클라이언트에서 sortable인지 아닌지
boolean	bSearchable_(int)	컬럼이 클라이언트에서 searchable인지 아닌지
string	sSearch_(int)	개별컬럼 필터
boolean	bEscapeRegex_(int)	개별컬럼 필터가 정유표현식인지 아닌지
int	iSortingCols	소트 대상 컬럼수
int	iSortCol_(int)	소트될 컬럼 (데이터베이스에서 이 숫자는 디코드 될 필요가 있음)
string	sSortDir_(int)	소트될 방향 - "desc" or "asc". Note that the prefix for this variable is wrong in 1.5.x where iSortDir_(int) was used)
string	sEcho	DataTables 이 rendering 하기위해 사용하는 정보

서버의 응답

각 리퀘스트에 대한 응답은 아래의 파라미터의 well formed JSON 오브젝트여야 한다.

Type	Name	Info
int	iTotalRecords	필터링 되기전의 전체 레코드수 (i.e. 데이터베이스의 전체 레코드수)
int	iTotalDisplayRecords	필터링후의 전체 레코드수(i.e. 필터링 적용후의 레코드수,  해당 리절트셋의 리턴된 레코드수가 아님)
string	sEcho	클 라이언트에서 받은 eEcho의 변경되지 않은 Copy. 이 파라미터는 각 draw마다 변경된다.(기본적으로는 draw count) - 이 구현은 아주 중요하다.  XSS 공격을 피하기 위해  이 파라미터를 integer로 캐스팅하는 것은 보안때문에 강력히 요구된다.
string	sColumns	선택적 - 컴마로 구분된 컬럼명의 스트링 (sName 과 조합하여 사용됨), 표시를 위해 필요한 경우 클라이언트측에 DataTables가 데이터 순서를 재정돈 할 수 있도록 한다.
array array mixed	aaData	2D array 데이터

리턴값의 예

01.{

02.    "sEcho": 3,

03.    "iTotalRecords": 57,

04.    "iTotalDisplayRecords": 57,

05.    "aaData": [

06.        [

07.            "Gecko",

08.            "Firefox 1.0",

09.            "Win 98+ / OSX.2+",

10.            "1.7",

11.            "A"

12.        ],

13.        [

14.            "Gecko",

15.            "Firefox 1.5",

16.            "Win 98+ / OSX.2+",

17.            "1.8",

18.            "A"

19.        ],

20.        ...

21.    ]

22.}

초기화 파라미터

bServerSide  -  서버측 프로세싱의 사용여부,  sAjaxSource 파라미터를 반드시 함께 사용해야 한다.

fnServerDate  -  서버로 부터 데이터를 얻는 default 함수($.getJSON)를 override 할수 있게 한다.
                 예) POST data를 사용하거나 정보를 Gears나 AIR 데이터베이스에서 가져오는 경우 등에 사용

sAjaxSource -  서버로 부터 데이터를 로딩할 주소값,  1회성으로 JSON 포맷의 데이터 파일도 사용가능