도쿄사는 외노자

JQuery DataTables를 사용하는 도중,테이블 내에 버튼을 만들어, 클릭 이벤트를 집어넣고 화면이동을 해야 했다.보아하니 fnCreateRow에서 각 줄의 td를 비우고 append로 Button을 추가할 수 있기에,여기에도 적어두도록 한다. 1234567fnCreatedRow: function(nRow, aData, iDataIndex) { $(nRow).attr("data-json", JSON.stringify(aData)); // add button $(nRow).find('td').eq(5).html('').append(''+표시+''); $(nRow).find('td').eq(6).html('').append(''+입력+'');}Colored by Color Scriptercs 「eq」..

DataTables에서 스크롤이랑 column길이 적용시켜 놨더니역시 길이지정은 CSS에서 하고 싶다는 소리가 나와서...데이터테이블 적용 이후, 각 column에 CSS class를 입히게 되었다. 테이블을 따와서 바로 addClass로 class를 입혀 주어야 한다.DataTables는 scrollHead와 scrollBody로 나뉘어져 있기 때문에 각각의 에 길이를 설정한다. 코드는 다음과 같다. 12345678910111213141516171819202122232425262728293031/** * JavaScript (DataTables 적용 ) **/ $('.dataTables_scrollHead table thead').find('tr th').each(function(idx){ if (id..

DataTables로 테이블 출력 시, 기본적으로는 한 화면에 들어가도록 자동 조정이 되어버린다.보통은 그렇게 한 화면에 다 볼 수 있게 해 주는게 좋긴 한데...column수가 많으면 column을 지맘대로 접어버리니까...가끔은 가로 스크롤을 써서라도 내용을 한줄에 이쁘게 뽑고 싶어진다. 근데 데이터테이블은 에 클래스 지정이라든가 하기 애매하니까...CSS class를 입히려면 그냥 데이터테이블 뽑은 이후에 테이블 객체를 가져와서 addClass를 쓰라고 하드라.근데 괜히 그런식으로 테이블 가져오기도 싫고, CSS도 따로 지정하기 귀찮고...괜히 DataTables까지 망가지는것도 싫으니 그냥 DataTables에서 해결해 버리기로 했다. 일단 결론부터 적자면 1234567891011121314151..

Modal에서 데이터테이블을 뽑아놓고 보니데이터는 그대로 잘 나오는데, 테이블 헤더의 사이즈가 맞지 않더라.한번 헤더를 클릭해서 정렬시키고 나면 사이즈가 조절되긴 하는데...역시 열었을 때 바로 맞춰지지 않으면 의미가 없다. DataTable옵션에서 자체 해결은 힘든 것 같고...나중에 CSS를 조절하는 방법 등 여러가지가 나오긴 했는데결국 난 이 방법으로 해결했다. 1234 // when modal shown, trigger resize for datatables adjust width $('#modal').off('shown.bs.modal').on('shown.bs.modal', function(e) { $(window).trigger('resize'); });Colored by Color Scri..

jQuery DataTables의 추가 기능 중, Buttons Extension이라는 기능이 있다.이전 버전의 TableTools-Buttons와 동일한 기능이다. DataTables의 다른 항목과 마찬가지로, 테이블에 붙어 편의 기능을 제공하는데...이름 그대로 버튼을 달아준다.설정하는 것 만으로 복사, 출력, csv・excel・pdf출력이 가능하다. 기본 출력 위치가 lengthChange와 동일하기에,아무 설정도 하지 않고 Buttons를 달았다면 lengthChange가 사라지는 불상사가 발생한다.이는 DOM옵션을 통해 해결할 수 있다. DOM은 단 한줄로 DataTable에 표시할 항목을 설정 가능하다.데이터테이블의 각 옵션은 기본적으로 위치가 고정되어 있는데,dom설정을 통해, CSS변경 없..

jQuery Plugin 중, jQuery DataTables라는 게 있다.테이블에 검색이나 페이징, 필터 등의 기능을 달아주고 총 건수 등도 표시해 준다.API같은 건 그냥 직접 홈페이지 가서 보면 되고...일단 사용예를 하나 적어 보았다. 1234567891011121314151617181920212223$('#ListModal #List_table').dataTable({ "oLanguage" : { "sProcessing" : "처리중...", "sZeroRecords" : "데이터가 없습니다.", "sLengthMenu" : " _MENU_ 건 표시", "oPaginate" : { "sFirst" : "처음", "sNext" : "다음 페이지", "sPrevious" : "이전 페이지", "sL..