개발자의 끄적끄적

[javascript/jquery] jquery datatable Cannot read property 'sWidth' of undefined 에러 해결 방법 jquery datatable 를 사용하여 데이터를 테이블에 표시하다보면 아래와 같은 에러가 발생하는 경우가 있습니다. Cannot read property 'sWidth' of undefined 위 에러의 원인은 여러가지가 있을수도 있겠지만, 제가 경험한 바로는 ajax 에서 가져와서 세팅하는 column 의 갯수와 실제 테이블에 구성이 되어있는 column 의 갯수가 일치하지 않을때 나타나는 경우였습니다. 일단 위 에러가 보이면, 바로 스크립트의 컬럼수와 테이블의 컬럼수를 비교해보시면 해결하실 수 있을겁니다. 참고들 하세요!

[javascript/jquery] datatable order by null 처리 방법 jquery datatable 에서 초기 정렬값이 자동으로 설정이 되어 있어서 불편한 경우가 있습니다. 즉 테이블의 맨 첫칸을 체크박스로 체크된것들을 컨트롤 하고자해서 만들었는데 정렬제외 옵션을 주어도 초기 1회로드시에는 정렬이 되는 경우가 있습니다! 그럴때는 아래와 같이 order 옵션을 빈값으로 추가해주면 됩니다. $("TARGET").DataTable({ order: [], ... }); 위와 같이 옵션을 주게 되면 넘겨받는 컨트롤러에서 order 값이 빈값으로 확인이 되어 정렬에서 제외시키는 로직을 구성할 수 있습니다! 참고들 하세요!

[javascript/jquery] datatable order by exception / 필드별 정렬 제외 방법 jquery datatable 에서 정렬을 필드별로 허용하거나 불가능하게 설정하거나 하고싶을때 아래처럼 columns 에 컬럼별로 옵션을 주면 해당 컬럼은 정렬에서 제외 시킬수 있습니다! columns: [ {"orderable": false, "data": "name"}, ... ], 위 내용 보시면 아시겠지만, 정렬조건에서 제외하고자 하는 컬럼 앞에 orderable: false 라는 옵션을 추가해주면 해당 컬럼은 정렬조건에서 제외되게 됩니다! 참고들 하세요!

[javascript/jquery] datatable reinitialize / datatable 재생성 방법 jquery datatable 을 사용하여 게시판형태의 기능을 연동할 때 특정 검색기능을 이용해서 해당 테이블이 새로고침 되게 연동을 해야하는 경우가 있습니다! 그럴때는 아래 옵션을 추가하면 됩니다! destroy: true, 위 내용처럼 destroy 옵션을 true 로 설정하면 기존에 생성되어있던 datatable 객체가 새로 생성될때마다 이전 객체를 죽이고 다시 만들어 냅니다! 따라서 새로운 내용이 반영된 테이블을 그자리에 다시 그릴수 있게 됩니다! 참고들 하세요!

[javascript/jquery] datatable auto width false example jquery datatable 를 선언하여 사용하고자 할때 아래와 같이 구성할 타겟에 옵션을 주어 선언하는 방식입니다. 하지만, 그럴게 사용하다 보면 테이블 각각 칼럼의 폭이 마음대로 조절되거나 하는 경우가 있습니다. 그럴때는 아래와 같이 옵션을 지정하여 주면 해결됩니다! $("TARGET").DataTable({ autoWidth: false, }); datatables 에서는 width 에 대한 조정을 할 수 있는데, 그걸 false 로 선언하면 강제로 변환되지않고 유지시킬 수 있습니다! 참고들 하세요!

[javascript/jquery] datatable null column handling / datatable 빈값 체크 방법 jquery datatables 를 이용하여 표과 개발을 연동할때, ajax 로 처리하여 스크립트에서 아래 처럼 column 안에 데이터를 대입해여 표기하게 됩니다. columns: [ {"data": "name"}, ..... ], 하지만, 위처럼 표시하면 필드안에 값이 null 인것 다른문자로 표기가 안되고 비어있게 됩니다. 그럴때 아래처럼 사용하시면 됩니다. columns: [ {"data": "name", "defaultContent": "-"}, ..... ], 동일하게 변수명이 name 인 데이터를 출력하는데 defaultContent 를 - 라는 문자로 선언한다는 ..

[javascript/jquery] datatable.js 소개 및 사용법 jquery 플러그인들 중에서 테이블 형식을 제공하고, 정렬 페이징 등등 이 쉽게 가능한 datatable 플러그인이라는게 있습니다. 우선 아래 css 와 js 를 로드하고 cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js 아래 내용처럼 적용시킬 타겟 아이디 혹은 클래스 등을 입력해서 동작시켜 주면 됩니다. $(document).ready( function () { $('#myTable').DataTable(); } ); .DataTable 안에 옵션들 및 데이터들을 주어 적용하고 ..