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..