처음부터 시작하는 Java

columDefs: [ { targets:0, createdCell: function (td, cellData, rowData, row, col) { if (col === 0) { if (rowData.serviceUseStcd !== '00102100') { oTable.api().cell(row, col).checkboxes.disable(); } } }, } ]

데이터 테이블이 테이블을 그릴 때 호출 되는 함수 예를 들어서 페이지를 넘기거나, 검색을 한다거나 한 후의 테이블을 그릴 떄 이벤트를 할당 할 수 있는 함수 예제 (기본) $('#example').dataTable( { "drawCallback": function( settings ) { alert( 'DataTables has redrawn the table' ); } } ); 다른 예시 해당 popover 를 표시하려고 할때 따로 함수를 만들지말고 drawCallback에 넣으면 해당 코드가 적용된다. 이런 popover가 있다고 치면 Dismissible popover 아래처럼 drawCallback에 popover를 실행하는 코드를 넣어주면 된다. drawCallback: function () {..

datatables로 테이블을 생성하다보면 데이터 테이블의 디폴드 값이 설정되어서 가끔 레이아웃이 맞지 않는 경우가 생기는데, 그럴때 해당 데이터 테이블의 옵션중 하나인 autoWidth 를 사용하여 레이아웃을 맞추도록하자! 이런식으로 하거나 전체 테이블의 컬럼라인을 잡아주는 옵션 (아래) 를 사용! "columnDefs": [ {"width": "100%", "targets": "_all" } ] 이런식으로 전체 컬럼의 width를 설정해주면 쪼그라들일이 없을 것이다!

아래의 스크린샷은 이해를 바람. 중요한것은 빨간박스의 컬럼헤드를 보면 됨 화면의 해상도가 안맞거나 줄어들때 데이터테이블의 사이즈가 변경되는데 아래처럼 헤드는 같이 움직이지 않고 지정된 해상도에 맞게 처리된다. 하지만 아래의 스크린샷은 컬럼에만 적용되는 스크롤바가 생겨서 넘어가게 되어 결과적으로 테이블의 헤더와 바디의 컬럼이 맞지 않게 되는 현상이 생겨서 상당히 불편하게 된다. 재수가 없다 ㄹㅇ; 불편 그자체다. 이렇게 스크롤 바를 당기면 컬럼 내용과 맞지 않게 된다. ㅇㅇ 이걸 아래의 컬럼내용의 사이징을 줄이지 않고 바디 컬럼과 같이 움직이게 == 헤드도 스크롤바를 당겼을 때 같이 움직이게 만들자. 데이터 테이블을 사용했을 시 dataTables_scrollHeadInner 라는 class가 생성되는데 ..

진심으로 나 server side 할줄 아는데 귀찮아서 못올리겠다. 예고만 해두고 나중에 올리도록 하겠음

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=haengro&logNo=220907524301 DataTable에서 버튼 클릭시 선택된 Row의 특정 컬럼 값 가져오기 DataTable 혹은 Table에서 데이터를 보여주고 특정 Row를 클릭하거나 버튼을 클릭했을때 해당 Row의 ... blog.naver.com

근데 ? 이상하게 다중정렬 기능이 동작을 안한다..... 라고 생각하다 역시 스택오버플로우에서 해결했다. 아래 코드를 입력하고 (아마 디폴트값이 true 일 것.) shift + 클릭하면 됌 orderMulti: true

deferRender: true, rowId: "title", buttons: [ { className: "btn btn-dark", text: "버튼으로만 가능?", action: function () { tables.ajax.reload(); } } ] deferRender : 걍 별거 없다 서버연기시키는거 같음 rowId : 별거 있다. 아이디 속성값으로 뭘 정한다는데 잘모르겠음; 자세한건 공식홈페이지로 가자.. 위에 코드처럼 쓰고 꼭 해줘야하는것. DOM설정을 해야한다. DOM 설정값은 앞의 게시글에 적혀있따. 또한 버튼의 cdn을 추가해야하니 없으면 넣자. 끝

select option 의 4가지 api - API를 통해서만 선택이 가능합니다. single - 하나의 항목만 선택할 수 있으며, 새 항목이 선택되면 다른 선택된 항목은 자동으로 선택 해제됩니다. multi- 여러 항목을 선택할 수 있습니다. 선택할 항목을 클릭하기만 하면 선택이 수행됩니다. os- 운영 체제 (OS) 스타일 선택. 이것은 가장 포괄적인 옵션이며 개별 항목을 선택/선택 취소하기 위한 ctrl/cmd 클릭, 범위 선택을 위한 Shift 클릭, 단일 항목 선택을 위한 수정되지 않은 클릭과 같은 복잡한 동작을 제공합니다. 코드도 디게 쉽다. $(document).ready(function() { $('#example').DataTable( { select: { style: 'multi' }..

체크박스칸을 만들기 위해서 빈 컬럼을 추가해 보겠다. 온갖 실패를 거듭하다가 오버스택플로우에서 해결방법을 찾았다. 1. 우선 에 를 하나 추가, 2. 아래처럼 colums에 data 값 없이 속성만 정해서 입력(여기서 data값을 못읽어온다고 하길래 data 값을 받아오지 않는걸 검색하다가 시간날림) 3. 끝. 주의사항 : colums의 순서에 맞게 해줘야한다. (원하는 위치) 체크박스를 없애면 빈 컬럼이 됨ㅇㅇ columns: [ { // targets: 0, // searchable: false, orderable: false, // 정렬기능 className: 'table-active dt-body-center', render: function (data, type, full, meta) { ret..

체크박스에 있는 디폴트 기능들의 위치나 순서를 바꾸기. dom: "" + "" + "" dom: "" ">"안에 들어있는 col- 그룹은 부트스트랩 4 버젼의(레이아웃을 정하는) 클래스 이름임. 중요한건 클래스 이름 끝에 있는 한자리~두자리의 알파벳이다(그 이상도 가능.) 알파벳이 정의하는 값은 다음과 같다. l : length changing input control (길이입력 컨트롤 변경) f : filtering input (필터링 입력) t : The table (테이블) i : Table information summary (테이블 정보 요약) p : pagination control (페이지 관리) r : processing display element (표시 요소 처리) B : buttons..

반갑다 데이터테이블아 ㅋ num title content id date hit

https://mchch.tistory.com/155 [Datatable] datatable 예시, datatable 옵션, datatable 생성 $("#table").DataTable().destroy(); //이전에 만든 것 없애고 다시 그리기 위함. const table = $("#table").DataTable({ responsive: false, //반응형 설정 pageLength: 10, //페이지 당 글 개수 설정 autoWidth.. mchch.tistory.com 여기는 데이터테이블의 행단위 커스텀 https://stackoverflow.com/questions/32640246/jquery-datatables-add-class-to-tr jQuery datatables add class..

엄청난 삽질 후 드디어 데이터를 가져와서 출력해본다. serverSide 방식. 클라이언트 사이드 방식이다 코드는 간단(?)하다. DataTables의 특성상 따로 tbody 부분은 생성하지 않아도 자동으로 생성된다. 이유는 스크립트에서 tbody에 들어 갈 컬럼을 정해주기 때문. 여기서 내가 삽질한 부분은 분명히 json 형식으로 데이터를 요청했고 data로 맞추어서 보냈는데 인식을 못하는 것이였다. 문제점은 processing : true와 serverSide : true를 해주는 것으로 해결했다. (프로세싱만 트루로 해줘야한다.) 또 다른 유의사항 : 컨트롤러에서 데이터를 보낼때 retrun 값을 data로 보내야한다 data totalRecodes 등의 데이터를 보내면 datatable이 알아서 ..

https://datatables.net/ DataTables | Table plug-in for jQuery DataTables Table plug-in for jQuery Advanced tables, instantly DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any H datatables.net DataTables는 HTML의 을 데이터 그리드 형식으로 사용하기 위한 라이브러리 쪽수 매기기 이전, 다음 및 페..