[DataTable plug-in] 데이터 테이블 AJAX with serverSide

 

클라이언트에서 서버로 통신을 하려고 할 때, 여러 가지 타입을 사용할 수 있다.

 

예를 들어 가장 일반적인 application/json 또는 application/x-www-form-urlencoded 등이 있다.

 

해당 방법들을 사용해서 어떻게 데이터를 보낼 수 있는지 정리를 하려고 한다.

 

application/json

1. contentType에서  applicayion/json을 작성
2. data에서 return type을 JSON.stringify 를 사용해서 보내면 된다.
3. Spread Operator 방법을 사용해서 합쳐준다.

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.

 

자바에서 Map 객체로 받아서 데이터를 쉽게 처리할 수 있다.

$('#example').DataTable( {
	serverSide: true,
	ajax: {
        url: "서버 요청 URL",
        type: "POST",
        contentType: 'application/json, charset=utf-8;',
        data: function (data) {
            return JSON.stringify({
                    ...data,
                    ...{ // 추가적으로 보내고자 하는 정보
                            "startDate": $("input[id='startDate']").val().replaceAll("-", ""),
                            "endDate": $("input[id='endDate']").val().replaceAll("-", "")
                        }
                }
            )
        },
        dataSrc: function (res) {
            // response body Data
            return res.data;
        }
    }
})

 

---

application/x-www-form-urlencoded

해당 방식은 ajax가 default로 보내는 기본 contentTtype이다. 즉, 따로 contentType을 작성할 필요가 없다.

기본 전달 값에서 추가적으로 파라미터를 보내고 싶을 때,

아래와 같이 data.[파라미터 key] = [파라미터 value] 방식을 사용하면 된다.

$('#example').DataTable({
    serverSide: true,
	ajax: {
        url: "서버 요청 URL",
        type: "POST",
        contentType: 'application/x-www-form-urlencoded, charset=utf-8;',
        data: function (data) {
           // data에 추가적으로 보내고자 하는 정보
           data.testA = $("#testA").val();
           data.testB = $("#testB").val();
        },
        dataSrc: function (res) {
            // response body Data
            return res.data;
        }
    }
})

 

---

ServerSide Sent parameters

서버사이드 방식으로 할 때, 서버로 보내는 파라미터 값들이다.

Parameter name	Type	Description
draw	integer	Draw counter. This is used by DataTables to ensure that the Ajax returns from server-side processing requests are drawn in sequence by DataTables (Ajax requests are asynchronous and thus can return out of sequence). This is used as part of the draw return parameter (see below).
start	integer	Paging first record indicator. This is the start point in the current data set (0 index based - i.e. 0 is the first record).
length	integer	Number of records that the table can display in the current draw. It is expected that the number of records returned will be equal to this number, unless the server has fewer records to return. Note that this can be -1 to indicate that all records should be returned (although that negates any benefits of server-side processing!)
search[value]	string	Global search value. To be applied to all columns which have searchable as true.
search[regex]	boolean	true if the global filter should be treated as a regular expression for advanced searching, false otherwise. Note that normally server-side processing scripts will not perform regular expression searching for performance reasons on large data sets, but it is technically possible and at the discretion of your script.
order[i][column]	integer	Column to which ordering should be applied. This is an index reference to the columns array of information that is also submitted to the server.
order[i][dir]	string	Ordering direction for this column. It will be asc or desc to indicate ascending ordering or descending ordering, respectively.
columns[i][data]	string	Column's data source, as defined by columns.data.
columns[i][name]	string	Column's name, as defined by columns.name.
columns[i][searchable]	boolean	Flag to indicate if this column is searchable (true) or not (false). This is controlled by columns.searchable.
columns[i][orderable]	boolean	Flag to indicate if this column is orderable (true) or not (false). This is controlled by columns.orderable.
columns[i][search][value]	string	Search value to apply to this specific column.
columns[i][search][regex]	boolean	Flag to indicate if the search term for this column should be treated as regular expression (true) or not (false). As with global search, normally server-side processing scripts will not perform regular expression searching for performance reasons on large data sets, but it is technically possible and at the discretion of your script.

 

---

참고 사이트

https://api.jquery.com/jQuery.ajax/

jQuery.ajax() | jQuery API Documentation

https://datatables.net/manual/server-side#Example-data

Server-side processing