본문 바로가기
개발

jQuery Datatable에서 page.info().recordsTotal이 0으로 출력되는 문제 해결 방법

by 농담곰이 2023. 5. 6.
반응형

jQuery DataTables에서 `page.info().recordsTotal`이 0으로 출력되는 현상은 다양한 이유로 발생할 수 있습니다. 이를 해결하기 위해서는 다음과 같은 방법들을 시도해볼 수 있습니다.

1. 데이터 로드 확인하기

데이터 테이블이 초기화될 때 데이터를 로드하도록 설정하였는지 확인해보세요. 만약 데이터가 로드되지 않았다면, `recordsTotal`이 0으로 출력될 수 있습니다. `ajax` 옵션을 사용하여 서버에서 데이터를 로드할 수 있습니다.


2. `recordsTotal` 설정하기

`recordsTotal`은 DataTables에서 사용되는 내부 속성으로, 표시할 데이터의 총 개수를 나타냅니다. 이 값을 설정하지 않으면 `page.info().recordsTotal`이 0으로 출력됩니다. 서버에서 데이터를 로드하는 경우, 서버에서 총 개수를 반환하도록 설정해야 합니다. 예를 들어, 서버에서 총 개수를 `totalRecords`로 반환하는 경우, 다음과 같이 설정할 수 있습니다.

```javascript
$('#myTable').DataTable({
  "ajax": "/data",
  "columns": [
    { "data": "name" },
    { "data": "position" },
    { "data": "office" },
    { "data": "age" },
    { "data": "start_date" },
    { "data": "salary" }
  ],
  "processing": true,
  "serverSide": true,
  "ajax": {
    "url": "/data",
    "dataSrc": function (json) {
      json.recordsTotal = json.totalRecords; // recordsTotal 설정
      json.recordsFiltered = json.totalRecords; // recordsFiltered 설정
      return json.data;
    }
  }
});
```

위 코드에서 `ajax` 옵션 내부의 `dataSrc` 함수에서 `recordsTotal`과 `recordsFiltered` 속성을 설정하고 있습니다. 이를 설정하면 `page.info().recordsTotal` 값이 서버에서 반환된 총 개수로 설정됩니다.

3. `destroy()` 메서드 사용하기

데이터 테이블을 초기화할 때 `destroy()` 메서드를 사용하여 테이블을 삭제하고 다시 초기화할 수 있습니다. 이를 통해 데이터가 올바르게 로드되고 `recordsTotal`이 정확하게 설정됩니다.

```javascript
var table = $('#myTable').DataTable();
table.destroy();
$('#myTable').DataTable({
  // 설정 옵션
});
```

위 코드에서는 `table` 변수를 사용하여 데이터 테이블 인스턴스를 가져오고, `destroy()` 메서드를 사용하여 테이블을 삭제하고 다시 초기화하고 있습니다.

이러한 방법들을 시도해보면 `page.info().recordsTotal`이 0으로 출력되는 현상을 해결할 수 있습니다.

반응형

댓글