[에러해결]Uncaught TypeError: Cannot read property 'style' of undefined

jsp에서 Uncaught TypeError: Cannot read property 'style' of undefined 라는 에러가 발생했다.

 

 

 

아무리봐도 뭐가 문제인지 모르다가,,stackoverflow에서 답 발견!!

 

 

 

 

원인

<th>태그의 수와 datatables에서의 column수가 일치하지 않았던 것이 에러의 이유였다.

 

datatables에서 ID칼럼은 필요 없어서 <th>헤더로 명시하지 않았는데

javascript코드 에서는 columns:[...] 이 부분에서 id 헤더를 쓰고 있었음

 

 

 

 

빠져있던 ID헤더를 추가하여 column수를 맞춰주었다.

id칼럼은 화면에서 필요 없으므로

{"targets": [ 1 ],"visible": false},

visible false를 해주어 화면에서는 보이지 않게 했다..!

 

 

<table id="grid-table" class="table table-striped table-bordered display nowrap" style="width:100%">
	<thead>
	<tr>
		<th><font color="white">수정/삭제</font></th>
		<th><font color="white">ID</font></th>
		<th><font color="white">키 명</font></th>
		<th><font color="white">그룹명</font></th>
		<th><font color="white">설명</font></th>
		<th><font color="white">활성여부</font></th>
							
	</tr>
	</thead>
</table>

columnDefs:[
				{"targets": [ 1 ],"visible": false},
				{"width":"10%","targets":0}, 
				{"targets":[0,2,3,4,5],"className":'text-center'}
			],
columns:[
			{
					mData:"Edit",
					mRender : function(data,type,row){
					html= "<button type=\"button\" class=\"btn btn-success\" data-toggle=\"modal\" data-target=\"#update_snapshot_key\"";
					....(생략)
					}
			},
			{data:"id"},
			{data:"snapshot_key_name"},
			{data:"group_name"},
			{data:"description"},
			{data:"active_yn"}
		]

 

에러 해결!! 그리고 조회되는 datatable

 

 

 

참고사이트 : stackoverflow.com/questions/39376658/datatables-cannot-read-property-style-of-undefined/42158300