jQuery.datatables.js 플러그인 사용법 및 API 예제 상세 설명

1、DataTables의 기본 구성

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

예제：http://www.guoxk.com/html/DataTables/Zero-구성.html

2、DataTables의 기본 속성 설정

"bPaginate": true, //이동 기능
"bLengthChange": true, //한 페이지에 표시할 데이터 수 변경
"bFilter": true, //필터 기능
"bSort": false, //정렬 기능
"bInfo": true,//페이지 푸터 정보
"bAutoWidth": true//자동 너비

예제：http://www.guoxk.com/html/DataTables/기능-enablement.html

3、데이터 정렬

$(document).ready(function() {
$('#example').dataTable({
"aaSorting": [
[ 4, "desc" ]
]
});
});

0열부터 시작하여,4열 역정렬

예제：http://www.guoxk.com/html/DataTables/정렬-data.html

4、다중 열 정렬

예제：http://www.guoxk.com/html/DataTables/다중-column-sorting.html

5、특정 열을 숨기기

$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
});

예제：http://www.guoxk.com/html/DataTables/숨겨짐-columns.html

6、페이지에 있는 요소의 위치를 변경

$(document).ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- 한 페이지에 표시할 수 있는 개수
//f – 필터 입력
//t – 테이블
//i – 정보
//p – 페이지 넘기기
//r – pRocessing
//< and > – div 요소
//<"class" and > – class를 가진 div
//예제: <"wrapper"flipt>, <lf<t>ip>

예제：http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、상태 저장, 페이지 넘기기나 한 페이지에 표시할 데이터 수를 변경하면 쿠키에 저장되며 다음에 방문할 때는 마지막으로 닫은 페이지의 내용이 표시됩니다。

$(document).ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

예제：http://www.guoxk.com/html/DataTables/State-saving.html

8、숫자를 표시하는 페이지 넘김 스타일

$(document).ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});

예제：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、가로 제한

$(document).ready(function() {
$('#example').dataTable({
"sScrollX": ""100%
"sScrollXInner": ""110%
"bScrollCollapse": true
});
});

예제：http://www.guoxk.com/html/DataTables/Horizontal.html

10、높이 제한

예제：http://www.guoxk.com/html/DataTables/Vertical.html

11、水平和垂直 두 방향 모두 제한

예제：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、언어 변경

$(document).ready(function() {
$('#example').dataTable({
"oLanguage": {
"sLengthMenu": "한 페이지에 _MENU_ 개의 기록을 표시"
"sZeroRecords": "죄송합니다, 찾을 수 없습니다"
"sInfo": "_START_에서 _END_까지" /총 _TOTAL_ 개의 데이터
"sInfoEmpty": "데이터가 없습니다"
"sInfoFiltered": "(총 _MAX_ 개의 데이터에서 검색)"
"oPaginate": {
"sFirst": "첫 페이지"
"sPrevious": "이전 페이지"
"sNext": "다음 페이지"
"sLast": "마지막 페이지"
}
"sZeroRecords": "데이터를 찾을 수 없습니다",
"sProcessing": "<img src=\'#\'" /loading.gif' /">
}
});
});

예제：http://www.guoxk.com/html/DataTables/Change-language-information.html

13、click 이벤트

예제：http://www.guoxk.com/html/DataTables/event-click.html

14/tooltip 플러그인과 함께 사용됩니다

예제：http://www.guoxk.com/html/DataTables/tooltip.html

15、每页显示数据数量을 정의합니다

$(document).ready(function() {
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});

예제：http://www.guoxk.com/html/DataTables/length_menu.html

16、row callback

예제：http://www.guoxk.com/html/DataTables/RowCallback.html

마지막 열의 값이 "A"이면 두껍게 표시됩니다.

17、정렬 제어

$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
{"asSorting": ["asc"]},
{"asSorting": ["desc", "asc", "asc"]},
{"asSorting": []},
{"asSorting": []}
]
});
});

예제：http://www.guoxk.com/html/DataTables/sort.html

설명: 첫 번째 열을 클릭하면 기본적으로 정렬됩니다. 두 번째 열을 클릭하면 순서로 정렬됩니다. 세 번째 열을 클릭하면 한 번 정렬, 두 번 정렬, 네 번 정렬됩니다. 네 번째와 다섯 번째 열을 클릭하면 정렬되지 않습니다.

18、구성 파일에서 언어 팩을 읽습니다.

$(document).ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19、AJAX 소스로 사용

$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "."/arrays.txt'
});
});

예제：http://www.guoxk.com/html/DataTables/ajax.html

20. AJAX를 사용하여 서버에서 데이터를 정리합니다.

$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "."/server_processing.php",
/*아래 내용을 추가하면 데이터를 POST 방식으로 전달합니다.
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}*/
"oLanguage": {
"sUrl": "cn.txt"
}
"aoColumns": [
{"sName": "platform" },
{"sName": "version" },
{"sName": "engine" },
{"sName": "browser" },
{"sName": "grade" }
]//$_GET['sColumns']는 aoColumns에서 전달받은 데이터를 받습니다.
});
});

예제：http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21각 행에 id와 class를 로드합니다.

서버에서 반환하는 데이터 형식:

{"
“DT_RowId”: “row_8″,
“DT_RowClass”: “gradeA”,
“0″: “Gecko”,
“1″: “Firefox 1.5″,
“2″: “Win 98+ / OSX.2+”,
“3″: “1.8″,
“4″: “A”
}

예제：http://www.guoxk.com/html/DataTables/add_id_class.html

22、각 행에 자세한 정보를 표시하려면, 행의 시작 부분에 “+”표시로 자세한 정보를 표시

예제：http://www.guoxk.com/html/DataTables/with-row-information.html

23、다중 행 선택

예제：http://www.guoxk.com/html/DataTables/selectRows.html

22、jQuery 플러그인 jEditable 통합

예제：http://www.guoxk.com/html/DataTables/jEditable-integration.html

더 많은 참조：

주의해야 할 것은, dataTable가 처리할 table 객체는 thead와 tbody가 있어야 하며, 구조가 정리되어 있어야 합니다(데이터는 완전하지 않아도 됩니다). 이렇게 하면 올바르게 처리할 수 있습니다.

dataTable 바인딩 처리를 할 때 추가할 수 있는 매개변수는 다음과 같습니다：

위에 설명된 jQuery.datatables.js 플러그인 사용법 및 API 예제에 대한 자세한 설명을 소개드렸습니다. 많은 도움이 되었기를 바랍니다. 어떤 질문이 있으시면 댓글을 달아 주시고, 저는 즉시 답변드리겠습니다. 또한, 나락 교본 사이트에 대한 지지에 감사드립니다!

고지: 본 글의 내용은 인터넷에서 수집되었으며, 저작권자가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공적인 편집을하지 않으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（댓글을 달 때는 #을 @으로 변경하여 신고하시고, 관련 증거를 제공해 주시면, 사이트가 즉시 저작권 침해 내용을 삭제합니다.