kasumil의 코딩 공작소

제이쿼리 내 배열 검색 기능. 배열 내용을 join하면 된다. let dataTable = $('#dataTable').DataTable({ responsive: true, order: [[0, 'desc']], }); let checkBoxArr = []; $('#filter .filter').on('change keyup', function () { if(this.checked == true) { checkBoxArr.push(this.value); } else { checkBoxArr = checkBoxArr.filter((el) => { return el !== this.value; }); } dataTable .column(1) .search(checkBoxArr.join("|"), true, ..

데이터 테이블 만지면서 알게 된 사실인데, Data Table을 사용하면 rowspan과 같은 것은 자동으로 먹히지 않는다. 그로인해 문제점이 생기는데, 한개의 행을 클릭할 경우 펼쳤다가 접히는 구간이 필요한데, 해당 구간이 먹히지 않는 것이 문제였다. 그래서 기존에는 한개의 테이블을 더 만들었는데, 이제 방법을 찾았다. idx title content status date

버튼 클릭할 경우 해당 기간에 맞춰 동적으로 DataTable을 변경하는 기능이 필요했다. 코드는 기존에 작성했던대로 사용했으면 됐으나 기존 값이 있는 경우 새로 갱신이 되지 않았다. 2021.11.03 - [취업/Datatable] - [PHP] DATATABLE AJAX 통신하기2. [PHP] DATATABLE AJAX 통신하기2. https://kasumil.tistory.com/196 이전편에서 해당 내용을 언급했었다. 하지만, 해당 부분은 완벽하지 않았다. DB값에서 온 것을 바로 넣는 수준이었기때문에 그러하다. 응답 값을 수정하지 못 했으니까! kasumil.tistory.com 그래서 찾아보니 datatable을 destroy해라 이것을 사용해도 된다. 그런데, ui가 깨지는 문제가 발생하더..

데이터 테이블을 구현하는데 있어 서버사이드 기능이 필요했다. 프론트만 쓰면 좋지만, 이게 5천개가 넘어간 순간 1분이 넘게 로딩된다... 그래서 이전에는 구현하지 못했지만, 이번에 구현하게 되었다. 아래 테이블 컬럼들은 의미 없는 데이터입니다. // front.js 네트워크 통신시 전달되는 데이터 값. draw: 3 columns[0][data]: 0 columns[0][name]: columns[0][searchable]: true columns[0][orderable]: true columns[0][search][value]: columns[0][search][regex]: false columns[1][data]: 1 columns[1][name]: columns[1][searchable]: tru..

JS 파일안에서 사용시 말 그대로 버튼이 출력되지 않는 문제... 원인은 제이쿼리를 쓰면 $document.ready(function() {});을 쓰는데, 이게 감싸있다보니 그런 것. 해당 부분을 제거하면 된다. type price quantity time let data = { symbol: 'coke' }; $('#userhistoryTable').DataTable({ order: [ [ 3, "DEC" ] ], destroy: true, dom: 'Blfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], ajax: { url: 'curl', type: 'GET', data : data, dataSrc: '', error: function (e..

https://kasumil.tistory.com/196 이전편에서 해당 내용을 언급했었다. 하지만, 해당 부분은 완벽하지 않았다. DB값에서 온 것을 바로 넣는 수준이었기때문에 그러하다. 응답 값을 수정하지 못 했으니까! 하지만, 오늘 그 부분을 완벽하게 해결했다. 중간에 완성되지 않은 코딩을 넣어 하는 바람에 시간 낭비를 했다. 생각만해도 다시금 빡이 치는군....(╬▔皿▔)╯ 도대체 작동되지 않는 코드를 왜 블로그에 올리는거야 ┗|｀O′|┛ $('#테이블').DataTable({ order: [ [ 3, "DEC" ] ], ajax: { url: '통신할 대상.php', type: 'GET', data : { 내용. }, dataSrc: '', // 공백 필수 error: function (e) {..

기존에는 Datatable tbody 자체에 for_each함수를 써서 풀어내곤 했는데, ajax 통신으로 풀어내야 하는 경우가 있었다. 그로인해 js로 append나 html을 한 경우 문제가 발생하더라. 테이블 자체에 데이터가 없기에 빈 테이블입니다 라는 경고문과 아니면 10개 내지 50개 이렇게 갯수 출력을 바꾸니 테이블 tbody 데이터가 사라지는 문제가 발생하였다. 그로인해 ajax를 해야 했는데 DataTables: Cannot read property 'length' of undefined 라는 오류를 내뿜더라. 아무튼 해결함. $(document).ready(function() { $('#테이블 id').DataTable({ ajax: { url: '데이터 통신.php', type: 'GE..