[JavaScript] Uncaught TypeError: Cannot read properties of undefined (reading 'row') 오류 해결

 

DataTables에서 cell().data()를 이용하여 화면 상의 데이터를 변경하는 과정에서 오류가 발생하였습니다.

기존의 테이블은 페이징이 안된 페이지였고, 이 테이블에서는 오류가 발생하지 않았습니다.

페이징이 된 테이블로 수정하자 1번째 페이지에서는 오류가 없이 실행되었으나 2번째 페이지부터는

Uncaught TypeError: Cannot read properties of undefined (reading 'row') 오류가 발생하였습니다.

 

원인

페이징이 되면서 2번째 페이지부터는 row index가 다시 0부터 시작되는 것을 발견하였습니다.

예를 들어 기존 테이블에 10개의 데이터가 있을 때 10번째 데이터는 row index가 9입니다.

Data	Row Index
data1	0
data2	1
data3	2
data4	3
data5	4
data6	5
data7	6
data8	7
data9	8
data10	9

pageLength가 5로 페이징한 테이블에서는 10번째 데이터는 2페이지에 존재하고 row index는 9가 아닌 4였습니다.

* pageLength : 한 페이지에 표시할 데이터 수

Page 1		Page 2
Data	Row Index	Data	Row Index
data1	0	data6	0
data2	1	data7	1
data3	2	data8	2
data4	3	data9	3
data5	4	data10	4

그래서 10번째 데이터를 변경하려 할 때 cell(rowIndex, columnIndex).data()의 rowIndex에 9의 값이 들어가니 오류가 발생하였습니다.

 

해결 방법

페이지가 바뀌면 rowIndex가 0부터 시작하게 해야합니다.

cell(rowIndex, columnIndex).data()의 첫 번째 인자 rowIndex를 newRowIndex로 변경했습니다

newRowIndex는 기존 rowIndex를 pageLength로 나눈 나머지입니다.

var table = $("#processTable").DataTable();
var pageLength = table.page.len();

var newRowIndex = rowIndex%pageLength;

 

단 페이지당 데이터 수가 All이면(pageLength = -1) pageLength로 나눈 나머지가 아닌 기존 rowIndex를 사용해야합니다.

if(pageLength != -1){
	newRowIndex = rowIndex%pageLength;
}else{
	newRowIndex = rowIndex;
}