[컴][웹][자바스크립트] 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 으로 충분할 것이라고 한다.

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



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


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 을 사용한다.



$(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 추가하기






recordsTotal 의 format 이 다른 경우




Parameter names

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





References

  1. DataTables > Options



댓글 6개:

  1. dataTables를 생성하고 현재 적용중인데, 테이블 제목부분에 화살표가 자동으로 보입니다.
    이 부분에 이벤트를 주어 정렬을 하고 싶은데 어떤식으로 이벤트를 주어야 할지 감이 서지 않네요.
    혹시 아신다면 도움 부탁드립니다.

    답글삭제
    답글
    1. 제가 질문을 잘 이해 못했는데, 칼럼 제목에 있는 화살표를 얘기하시는 건가요? 그리고 이벤트를 주어 정렬을 하는 것은 "초기 정렬"을 이야기 하시는 건가요? 기본적으로 column 값에 option 에 orderable 를 줄 수 있습니다. 좀 더 자세한 질문이면 대답하기가 좀 편할 듯 하네요.

      삭제
  2. php와 mysql로 db를 리스트로 작성할려고 알아보던중에 DataTables를 알게되어 적용해 보았습니다.
    limit로 몇백개 지정으로는 정상 표시가 됩니다만, 수만개의 데이터를 표시할려니 거의 멈추다 시피 합니다.
    아직은 초보적인 수준이라, select * from tableName where 1; 로 데이터를 불러와서 mysql_fetch_array를 while로 돌려서 데이터를 표시해 주도록만 사용하고 있습니다. 위 정도의 방식으로 해당 server side방식을 사용하는것을 설명해 주실수 있는 문의 드려 봅니다..ㅜㅜ 실력이 미천하여 문서만으로는 이해가 되지 않습니다.

    답글삭제

  3. 안녕하세요. 서버사이드의 자세한 사용법은 DataTables 홈페이지에 가셔서 찾으시면 됩니다. 여기서 대략적인 설명을 드리면,
    서버 사이드는 이름만 거창하고 어려운 것은 아닙니다. DataTables 에서 default 로 원하는 data format 이 있습니다.(이것을 바꿀 수 있지만 처음 하시니 어려우실 수 있습니다.) 이 data format 은 DataTable 홈페이지의 예제등을 보시면 될 듯 합니다.
    이 data format 을 맞춰서 보내주시면 나머지는 DataTables 이 알아서 보여줍니다.
    Server 쪽에서는 DataTables 이 DataTables 의 모습이 바뀔 때마다 request 를 server 로 날리게 되는데, 이때 이 request 의 param 에 맞는 response 를 던져주기만 하면 됩니다.
    결국 client 작업보다는 server 쪽 작업이 조금 더 많습니다.
    도움이 되셨는지 모르겠네요. chrome debugger 등을 이용하시면 빠르게 이해하실 수 있을 것입니다.

    답글삭제
  4. 안녕하세요. 데이터 테이블을 이용해 테이블을 뿌리고 있습니다. 다름이 아니고 ajax 방식으로 데이터를 넘겨주어서 뒷단에서 데이터를 찾아서 뿌려주려고하는데, ajax통신은 잘되나 결과 값을 뿌려주질 못하고 있습니다. coloum과 thead에 있는 갯수도 동일하고요 컬럼 명도 일치합니다. 이것떄문에 몇일째 해결을 못하고 있습니다. Cross domain ajax request 방식으로 진행하였는데.. response로 조회하려는 값은 가져오나 뿌려주질 못하는 상황.. 제발 도와주세요.ㅠㅠㅠㅠ

    답글삭제
    답글
    1. 저도 이제 잘 쓰지 않아서 대답을 해드릴 수 없습니다. 하지만 response 로 data 를 이미 수신한 상황이시라면, debugger 로 원인을 찾아보시는 것이 빠를 듯 합니다.

      삭제