[JavaScript] 데이타테이블(DataTables) 유동적으로 높이 변경과 출력 갯수 바꾸기

데이타 테이블을 구현하고 sScrollY를 이용해 높이를 고정했다가

유동적으로 변경하고 싶어서 페이지 화면이 늘어나거나 줄어들면 테이블에 정보가 뿌려지는

dataTables_scrollBody 부분도 같이 변경되도록 구현 했다.

dataTables_scrollBody의 값이 늘면 뿌려지는 갯수도 추가되고 줄면 줄어들어야 한다.

 

 

var oSettings = table.fnSettings(); 

var table_row_h = 26;

var show = table_h / table_row_h; 

oSettings._iDisplayLength = parseInt(show.toFixed(0));

table.fnDraw();

 

table_h는 dataTables_scrollBody의 높이

table_row_h는 테이블에서 그려지는 1개의 row 높이이다.

구하는 방법은 크롬일 때 컨트롤+쉬프트+c를 누른후 마우스를 row 부분에 대면 width height 값이 나온다.

 

그리고 그 구한 값을 oSettings._iDisplayLength에 넣어준 후 

table.fnDraw(); 이걸 사용해 테이블을 다시 그려주면 된다.

 

여기서 중요한게 

높이가 바뀔 때마다 나누다 보니 값이 정확히 맞아 떨어지는 경우는 거의 없어서 toFixed로 소수점을 모두 제거해야하고,

처음 구현을 했을 때

oSettings._iDisplayLength = show.toFixed(0);

이렇게만 코딩을 했었는데 show의 값이 숫자이긴 하지만 문자열이여서 출력은 되도 next 버튼을 누르면 에러가 발생한다.

parseInt를 사용해 정수형으로 변환해주어야 한다.