HTML & CSS & JavaScript 2

[JavaScript] 데이터 테이블 서버 사이드 페이징 + 데이터 테이블 검색 예제 datatables serverSide paging + datatables input keyup searching (Spring, mybatis)

DataTable 이란?- 자바스크립트에서 테이블을 쉽게 그리게 하며 제어할 수 있는 다양한 기능을 제공하는 자바스크립트 라이브러리. 초기 설정1. js 라이브러리 추가 라이브러리 추가 시 cdn 방법 또는 파일을 직접 다운받아 추가하는 방법이 있음. cdn 방법 파일 추가 방법 (경로 주의!) 1. 테이블 작성datatables 사용을 위해 html에 테이블 헤더만 작성해준다.이때 테그에 id 를 꼭 넣어주기. 나는 첫번째 열을 체크박스로 하기 위해 th안 checkbox 테그를 넣어줌. 2. 데이터 테이블 사용해보기해당 html에 매핑할 js파일을 생성. 아래와 같이 작성. $(document).ready(function () { var airp..

[JavaScript] DOM 요소 선택 , 생성 , 삽입 , 교체 , 제거

자주 사용하고 기억해야하는 메서드들 입니다.. 계속계속 수정하고 추가할 예정이에요! 요소 선택 .querySelectorAll('li') li 요소를 모두 선택 - NodeList() 반환 - 요소 추가 등 업데이트시 반영되지않음. - 보다 다양한 쿼리를 지원 .getElementsByTagName('li') li 요소를 모두 선택 - HTMLCollection() 반환 - 요소 추가 시 자동 업데이트됨. 삽입 , 제거 , 교체 old 메서드 new 메서드 (브라우저 지원 안될 수 있음) appendChild() append() prepend() DOM 객체 삽입 (첫번째 또는 마지막 삽입) insertAdjacentElement() before() after() DOM 객체 삽입 (특정 요소 뒤 또는 ..