[컴][웹][자바스크립트] jquery plugin DataTables 사용방법

DataTables | Table plug-in for jQuery / DataTables 에서 lazy loading , dynamic loading / page 가 변할 때 마다 데이터 불러오기 / page 가 변할 때마다 다른 소스 불러오기 / DataTables 의 paging







DataTables ver :  1.10.1


DataTables 에서 page 를 누를 때 마다 page 에 해당하는 row data 를 가져오게 하고 싶었다. 기능이 있을까 뒤져봤는데 server-side processing 이라는 이름으로 되어 있었다.

우리가 흔히 lazy loading 이나 dynamic loading 같이 필요한 순간에 data 를 loading 하게 하는 작업이 여기서는 server-side processing 라고 되어 있다. 필요한 순간에 server 와 통신해서 data 를 가져오기 때문에 그런 이름을 택한 듯 하다.

참고로, 문법이 1.10.x 부터 바뀌었다.

Server-side processing

Server-side processing 은 아래와 같은 작업을 server 와의 통신을 통해 한다.(ajax)

• page 가 변경될 때마다 server 에서 data 를 불러오고
• searching 을 할 때 server 에 요청
• sorting 을 할 때 server 에 요청

Data 페이지 에서는 row 의 개수 100,000 을 기준으로 삼으라고 얘기한다. row 의 개수가 100,000 이하라면 client-side processing 으로 충분할 것이라고 한다.

이 녀석들에 대한 예제는 아래에서 찾을 수 있다.

• DataTables examples - Server-side processing

server-side processing 을 이용하기 위해서는 option 에 serverSide 를 추가해 주면 된다.

$(document).ready(function() {
    $('#example').dataTable( {
        "processing" : true,  // show indicator
        "serverSide" : true,
        "ajax": {
            "url": dataFile,
            "data": {
                "user_id" : 451
            }
          },


        "columns": [
            { "data": "r-engine" },
            { "data": "browser" },
            { "data": "platform" },
            { "data": "engine-ver" },
            { "data": "css-grade" }
        ]
    } );
} );

기본적으로 ajax 를 하면, 아래와 같은 parameter 들이 같이 전송된다. 기본적으로 GET 방법으로 보낸다. 여기서 draw 가 seq_id 같은 개념인데, send 할 때 값과 response 의 draw 값이 같아야 DataTables 에서 그 녀석을 올바른 녀석으로 인식하고 page 를 새로 그리게 된다.

draw:4
columns[0][data]:first_name
columns[0][name]:
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:last_name
columns[1][name]:
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
columns[2][data]:position
columns[2][name]:
columns[2][searchable]:true
columns[2][orderable]:true
columns[2][search][value]:
columns[2][search][regex]:false
columns[3][data]:office
columns[3][name]:
columns[3][searchable]:true
columns[3][orderable]:true
columns[3][search][value]:
columns[3][search][regex]:false
columns[4][data]:salary
columns[4][name]:
columns[4][searchable]:true
columns[4][orderable]:true
columns[4][search][value]:
columns[4][search][regex]:false
order[0][column]:0
order[0][dir]:asc
start:20
length:10
search[value]:
search[regex]:false
user_id:451
_:1406690284937

Cross domain ajax request

• DataTables example - JSONP data source for remote domains

JSONP 방식으로 다른 domain 에 있는 data 를 가져올 수 있다. 기본적으로 jQuery 에서 제공하는 jsonp 를 사용하게 된다.

$('#example1').dataTable( {
    "processing" : true,  // show indicator
    "serverSide" : true,
    "ajax": {
        "url": "http://192.168.100.63:8080/api/getList",
        "dataType": "jsonp",
        "data": function ( d ) {
                // custom parameters
                d.search_key = d.search.value;
            }
      },

    "columns": [
        { "data": "COUNT" },
        { "data": "STATUS" }
    ]
} );

위처럼 하면 아래처럼 request 가 날라가게 된다.

http://192.168.100.63:8080/api/getList?callback=jQuery20207170124552212656_1406779089266&draw=15&...&order%5B0%5D%5Bdir%5D=asc&start=25&length=25&search%5Bvalue%5D=%EB%8B%98%EB%B2%84%EC%8A%A4&search%5Bregex%5D=false&search_key=%EB%8B%98%EB%B2%84%EC%8A%A4

서버의 response 는 아래처럼 해주면 된다.

jQuery20207170124552212656_1406779089266({
    "draw": 3,
    "recordsFiltered": 795,
    "recordsTotal": 795,
    "data": [
        {
            "STATUS": 100,
            "COUNT": 4
        },
   ...
    ]
    
})

data 가 object type(dictionary) 일 때 column 을 정해주는 방법

DataTables 에서는 기본적으로 data 를 array 로 생각해서 index 로 접근한다. 그래서 data 가 map 형태일 때는 아래처럼 column 에 어떤 key 가 쓰이게 될 지를 알려줘야 한다. 이럴 때 "columns" option 을 사용한다.

• DataTables examples - Ajax sourced data > DataTables example - Ajax data source (objects)

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/objects.txt",
        "columns": [
            { "data": "r-engine" },
            { "data": "browser" },
            { "data": "platform" },
            { "data": "engine-ver" },
            { "data": "css-grade" }
        ]
    } );
} );


// json data
{
    "data": [
        {
            "r-engine": "Tiger Nixon",
            "browser": "System Architect",
            "platform": "$320,800",
            "engine-ver": "2011/04/25",
            "css-grade": "Edinburgh"
        }
    ]
}

DataTables 에 새로운 div 추가하기

• dom

recordsTotal 의 format 이 다른 경우

• DataTables 에서 recordsTotal 의 위치가 다른 경우

Parameter names

1.10 버전 이하에서 parameter 가 다르다. 1.10 의 parameter 이름을 아래 page 에서 찾을 수 있다.

• Converting parameter names for 1.10

References

1. DataTables > Options