DataTable 5

[DataTable plug-in] 데이터 테이블 AJAX with serverSide

클라이언트에서 서버로 통신을 하려고 할 때, 여러 가지 타입을 사용할 수 있다. 예를 들어 가장 일반적인 application/json 또는 application/x-www-form-urlencoded 등이 있다. 해당 방법들을 사용해서 어떻게 데이터를 보낼 수 있는지 정리를 하려고 한다. application/json contentType에서 applicayion/json을 작성 data에서 return type을 JSON.stringify 를 사용해서 보내면 된다. Spread Operator 방법을 사용해서 합쳐준다. JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 자바에서 Map 객체로 받아서 데이터를 쉽게 처리할 수 있다. $('#examp..

[DataTable plug-in] 데이터 테이블 생성

데이터 테이블 플러그인의 사용방법에 대해 알아보겠습니다. HTML 준비 아래와 같이 HTML table 태그를 준비하면 된다. DataTable 생성 방법 type: 요청 보내는 방법 (GET, POST 등등) contentType: 요청 보내는 데이터 Type에 대해 정의하는 곳. dataType: 응답을 받는 데이터 Type을 정의하는 곳. data: 요청 보내는 데이터를 정의하는 곳이다. dataSrc: 응답으로 받은 데이터를 중간에서 조작 할 수 있다. columnDefs: 컬럼별 조작을 할 수 있는 곳. 생성 방법 1. jQuery의 selector를 사용해서 Id로 target_table을 가지고 있는 HTML 태그를 불러온다. $("#target_table").DataTable({ ajax:..

[읽어볼 거리] jQuery DataTable 서버 사이드

DataTable의 ajax 를 사용하면 서버로 파라미터 값들을 보내주는데 나는 파라미터 그대로 while 반복문을 사용해서 추출했었다..!(1차 내용) 그런데 @RequestBody MultiValueMap를 사용해서 Map으로 받을 수 있는 부분이 신기 방기했고 (2차 내용) MultiValueMap를 사용하지 않고 간편하게 추출할 수 있다.(3차 내용) 내용 수정을 할 수 있도록 곧 하겠씁니다. https://zamezzz.tistory.com/310 [JavaScript #11] dataTables 사용하기 (2) ● dataTables - 2 오늘은 지난 포스팅에 이어 dataTables의 server-side processing에 대해서 정리하겠습니다. 너무 많은 데이터 행을 처리할 때는 너무..

읽은 책 2023.10.23

[DataTable plug-in] 데이터 테이블 컬럼 검색

💡 데이터 테이블 컬럼별 검색 및 검색 초기화 방법 에 대해 작성해 보았습니다. (※ 정답이 아닐 수 있습니다. 저만의 방법으로 구현했습니다.) 빠른 결론: 컬럼마다 값을 초기화하고 테이블을 draw 하는 방법이다. HTML 준비 검색에 필요한 컬럼 개수만큼 th 태그를 직접 생성해야 한다. ... 필요한 개수 만큼 ... DataTable 컬럼 생성 target_table의 Id를 가진 테이블 태그의 thead tr을 복사(clone)하고 추가(appendTo)하게 된다. target_table 테이블의 thead tr 중 첫 번째에서 th를 반복문(each)으로 호출하고 html을 추가한다. $('#target_table thead tr').clone(true).appendTo('#target_tab..

[DataTable plug-in] Datatable 에서 row 개수 보여주기

관련 기능 paging: 페이지 네이션 기능으로 전체 데이터를 나눠서 볼 수 있게 하는 기능이다. lengthChange: 사용자가 화면에서 페이지 당 몇 개의 데이터를 볼 수 있을지 설정할 수 있다. pageLength: 개발자가 코드에서 페이지 당 몇 개의 데이터를 볼 수 있을지 설정할 수 있다. 문제점 서버에서는 DB의 전체 데이터를 불러 왔지만, 화면(프론트)에서 10개밖에 보이지 않는다면? 해결 방법 두 개의 설정을 모두 false로 하면 전체 리스트 개수가 보이게 됩니다. paging과 lengthChange 기능은 default가 true 입니다. paging: false, lengthChange: false paging 이 비활성화이면 lengthChange 도 자동으로 비활성화가 되는 것..