눈으로 개발하는 블로그

페이지네이션에서 전체 페이지 앞 번호 버튼, 이전 페이지 사이즈 번호 버튼, 다음 페이지 사이즈 번호 버튼, 전체 페이지 마지막 번호 버튼을 활성화 또는 비활성화로 제어하면 클릭에 대한 오류를 방지할 수 있습니다. (이미 내부 소스에서 예외처리가 되어 있어 오류는 발생하지 않습니다.) 페이지네이션에서 버튼은 태그가 아닌 태그와 태그를 사용하고 있습니다. 태그는 비활성화하기 위해서 disable 속성을 추가하면 되지만 태그와 태그는 disable 속성이 지원되지 않습니다. 참고로 태그를 비활성화하기 위해서는 일반적으로 href 속성을 제거합니다. First First 그러나 태그를 화성화/비활성화하기 위해서는 Script에서 동적으로 href 속성을 제거했다가 추가해야 하는 문제점이 있습니다. 현재 페이지..

검색된 게시물이 많아지면 페이지네이션에서 노출되는 페이지 번호가 많아집니다. 그래서 노출되는 페이지 번호의 수를 조절하지 않으면 페이지네이션 UI에 문제점가 발생합니다. 예를 들어, 검색된 결과가 350건이고 페이지 크기가 5이면 페이지네이션에 노출되는 페이지 번호가 70개가 됩니다. 이렇게 사용하는 게 문제가 없으면 상관은 없습니다. 그러나 페이지네이션에서 노출되는 페이지 번호 수가 많으면 복잡해 보일 수 도 있습니다. 그래서 페이지네이션에서 노출되는 페이지 번호 수를 조절하여 처리되도록 페이지네이션 클래스를 생성하도록 하겠습니다. 페이지네이션에서 노출될 페이지 번호 개수를 페이지 사이즈(pageSize)라고 하고 노출될 페이지 사이즈의 시작 번호를 페이지 시작 번호(pageStartNo), 노출될 페..

이전 Paging(페이징) 처리로 Page(페이지) 단위로 게시판에서 게시물 리스트를 가져올 수 있게 되었습니다. 이번에는 나누어진 Page(페이지)를 번호로 표시하여 노출시키고 페이지 번호를 클릭하면 해당 페이지에 해당하는 게시물 리스트를 가져오게 처리하겠습니다. Maven Spring Project의 main.jsp에 Pagination UI 추가하기 1. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈합니다. 2. form에 현재 페이지 번호를 전달하기 위해 현재 페이지 번호(pageNo)를 hidden 태그로 추가합니다. 태그 안에 태그를 생성하고 path 속성에 boardSearch 객체에서 paging 객체의 pageNo 변수를 지정합니다. 3. 태..

메인 페이지의 본문 영역을 Bootstrap의 List Group(리스트 그룹)을 사용하여 콘텐츠(게시물)가 나타나게 구성하겠습니다. 이전 Card(카드) UI에서 사용하던 메서드들은 그대로 사용하고 Card(카드) UI 대신 List Group(리스트 그룹) UI로 변경하겠습니다. Bootstrap - List Group Bootstrap의 List Group(리스트 그룹)은 리스트 그룹(.list-group)과 리스트 항목(.list-group-item)으로 구성되어 있습니다. 그래서 태그와 태그 또는 태그와 태그 또는 태그와 태그에 class를 적용하여 많이 사용합니다. frist item second item third item 리스트 그룹(.list-group)이 있는 태그에 .list-grou..

Bootstrap의 Card(카드)에 페이지네이션 처리를 하도록 하겠습니다. 현재 Card(카드)는 Node.js 레스트 API 서버로부터 게시판 리스트를 가져옵니다. 이전 Node.js 레스트 API 데이터 업데이트를 통해 게시판 전체 리스트가 아닌 1 페이지(게시물에서 맨 앞부터 10개 - 조회, 정렬 조건이 없어 등록 순서로 가져옵니다.)의 게시물 리스트만 가져오게 변경되었습니다. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈하여 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 더 보기 버튼 UI 적용 1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오..

레스트 API 페이징(Paging) 처리 후 Vue나 JSP, ASP, PHP, Javascript에서 게시판의 페이지네이션(Pagination)을 구현하기 위해서는 전체 크기, 전체 페이지 크기, 페이지 사이즈 등 추가 정보들이 필요합니다. 그럼 페이지네이션(Pagination) 구현에 필요한 정보들을 계산하여 라우터(router)에서 데이터와 함께 리턴하도록 처리하겠습니다. ​ ​ 페이지네이션(Pagination) 정보 객체 추가 ​ 1. C:\workspaces\nodeserver\testrestapi\boardapi.js 파일을 오픈하여 게시판 배열 전체를 리턴하는 라우터(router)에 추가합니다. ​ 전체 페이지 크기(마지막 페이지 번호) 전체 페이지 크기는 전체 크기를 페이지 크기로 나누고 ..

Pagination(페이지네이션), Paging(페이징), Page(페이지) ​ Database(데이터베이스)에서 페이징(Paging) 없이 데이터를 가져오면 수십 건부터 수백만 건까지 데이터를 반환하여 문제(DB 부하, 서버 부하, 네트워크 트래픽 부하 등)가 발생합니다. 그래서 데이터를 가져오기 전에 한 번에 가져올 데이터의 크기를 정해서 나누어서 가져오게 해야 합니다. ​ 이렇게 일정한 크기로 데이터를 나누는 것을 페이징(Paging)이라고 하고 일정한 크기를 가진 데이터를 페이지(Page)라고 합니다. 그리고 나누어진 페이지를 이전 페이지나 다음 페이지 또는 특정 페이지로 이동할 수 있게 처리하는 것을 페이지네이션(Pagination)이라고 합니다. ​ 일반적인 게시판에서 페이지네이션(Pagina..