[jQuery] DataTables - Data

Processing 모드

• 클라이언트 측 처리: 전체 데이터 세트가 미리 로드되고 데이터 처리가 브라우저에서 수행됩니다.
• 서버 측 처리: 각 디스플레이에 필요한 데이터만 반환되는 모든 테이블 다시 그리기에 대해 Ajax 요청이 만들어집니다. 데이터 처리는 서버에서 수행됩니다.

10,000개 미만의 행은 클라이언트에서, 100,000개 이상의 행은 서버측에서 처리한다.

클라이언트 측 처리 (기본 작동 모드)

테이블의 데이터 순서, 검색, 페이징 및 기타 모든 데이터 처리 작업은 DataTables 자체에 의해 브라우저에서 수행됩니다.

서버 측 처리

서버 측 처리가 작동하는 곳은 테이블에 표시하려는 데이터의 양이 매우 많을 때입니다. 서버 측 처리 모드에서 데이터의 모든 순서, 검색 등은 서버에서 사용 가능한 데이터베이스 엔진을 사용할 수있는 서버로 전달되며, 이 엔진은 정확히 이러한 종류의 작업에 맞게 조정됩니다. 데이터의 각 페이지는 서버에 Ajax 요청을 하는 것을 포함합니다.

서버 측 처리는 serverSide 옵션에 의해 활성화됩니다.

데이터 소스 유형

DataTable에 사용되는 기본 데이터 쓰는 항상 배열이어야 합니다. 해당 배열의 각 항목은 표시할 행을 정의하고 DataTables는 세 가지 기본 JavaScript 데이터 유형을 행의 데이터 소스로 사용할 수 있습니다.

• 배열 - []
• 객체 - {}
• 인스턴스 - new MyClass()
colums.data나 colums.reder 옵션을 통해 데이터를 사용할 수 있습니다. 기본 작동 모드는 배열이지만 객체와 인스턴스는 일반적으로 복잡한 데이터로 작업할 때 더 직관적일 수 있습니다.

1) 배열

데이터가 나타나는 열에 대한 배열 요소 간의 매핑은 해당 위치의 배열 요소 값을 읽는 열 인덱스에 의해 수행되기 때문에 DataTable에서 배열을 사용하기 쉽습니다.

const data = [
  [
    "Tiger Nixon",
    "System Architect",
    "Edinburgh",
    "5421",
    "2011/04/25",
    "$3,120"
  ],
  [
    "Garrett Winters",
    "Director",
    "Edinburgh",
    "8422",
    "2011/07/25",
    "$5,300"
  ]
]

$('#example').DataTable({
  data: data
})

2) 객체

API를 통해 데이터를 적극적으로 사용하는 경우 데이터가 있는 배열 인덱스를 기억하지 않고 속성 이름만 사용하면 되므로 객체를 사용하면 특정 데이터 조각을 쉽게 얻을 수 있습니다.

const data = [
  {
    'name': 'Tiger Nixon',
    'position': 'System Architect',
    'salary': '123',
  },
  {
    'name': 'Garrett Winter',
    'position': 'Director','
    'salary': '2444'
  }
]

$('#example').DataTable({
  data: data,
  columns: [
    { data: 'name' },
    { data: 'position' },
    { data: 'salary' }
  ]
})

3) 인스턴스

인스턴스는 데이터를 업데이트하는 데 사용할 수 있는 추상 메서드를 정의하기 때문에 유용할 수 있습니다.

function Employee(name, position, salary, office){
  this.name = name;
  this.position = position;
  this.salary = salary;
  this._office = office;
  this.office = function() {
    return this._office;
  }
}

$('#example').DataTable(
  data: [
    new Employee("Tiger", "SA", "$123", "Korea"),
    new Employee("Winter", "Singer", "$1", "Japan")
  ],
  columns: [
    { data: 'name' },
    { data: 'salary' },
    { data: 'office' },
    { data: 'position' }
  ]
})

데이터 소스

실제로 작동할 데이터를 가져오는 방법

• DOM(문서의 일반 HTML)
• 자바스크립트
• Ajax 소스 데이터

1) DOM

DataTables가 시작되면 작동 중인 테이블에 이미 존재하는 데이터가 있는지 자동으로 확인하고 테이블에 사용합니다. (새 데이터를 사용하거나 새 데이터를 가져오기 위해 데이터를 전달하는 경우 이 데이터를 버립니다.)

2) 자바스크립트

이 데이터는 배열, 객체 또는 인스턴스의 형태일 수 있으며 원하는 곳 어디에서나 가져올 수 있습니다.

3) Ajax

Ajax 소스 데이터는 DataTables는 데이터를 가져오기 위해 Ajax 호출을 수행합니다. 디스플레이에서 데이터를 검색하기 위해 논리를 분리하여 특정 스크립트에서 테이블 데이터를 소싱하는 것이 종종 매우 유용할 수 있습니다. DataTables의 Ajax 소스 데이터는 ajax 옵션으로 제어됩니다.