Node.js , JQuery | 테이블 만들기 | 데이터 흐름

간단하게 큰 그림을 얘기하자면, 먼저 처음 데이터는 백엔드에서 modelquery를 이용해 해당 리스트에 필요한 모든 정보를 불러온다. 등록 버튼을 만들어서 팝업창을 띄어도 되지만, 만들 때 등록 페이지는 따로 있는게 나을거 같다는 의견을 토대로 만들었기에 등록 페이지는 따로 구현을 했다.

 

테이블에서 중요한것은 등록 > 리스트 > 수정 > 삭제 > 페이지네이션 > 검색 > 정렬 > 페이지갯수 > 엑셀 다운

이 순인거 같다.( 주관적인 의견이며 개인적으로 개발할 때 저 순서대로 하는것이 제일 편했고, 엇갈리는것이 없었다. )

 

1. CRUD 작업은 node.js 백엔드를 타서 실행되도록 하였다.

 

2. 페이지네이션은 Object를 사용하였으며, 클라이언트쪽에서 가능하도록 하였다.

 

3. 검색과 정렬은 먼저 어떻게 검색할 지, 정렬할 지 옵션을 변수로 만들어 백엔드에 넘겨주고 원하는 데이터를 받아와

   Ajax로 부분만 바뀌도록 하였다.

 

4. 페이지 갯수는 클라이언트쪽에서 원하는 갯수만큼 보여줄 수 있도록 설정하였다.

 

5. 엑셀 다운은 클라이언트에서 내가 보고있는 테이블들만 엑셀로 담아주도록 하였다.

 

그림으로 나타내면 다음과 같다.

먼저 전체 리스트를 받아오거나, search또는 sort를 할 경우

HTML script에 object를 선언해준 후

var pagingObject = new Object({name : "Device", url : "/ajax/device_list", CNU : "{{company.CNU}}", array : [], sort : "CA", page : 0, postNum : 10, pageNum : 5, startpage : 0, endpage : 0, search: "", searchtext : "", searchdate : ""});

백엔드에 옵션에 대한 정보를 주고, 백엔드에서 쿼리문을 이용해 조회하며, 클라이언트의 object 내용들을 바꿔준다.

 

 

다음은 클라이언트 쪽에서 페이지네이션을 하거나 페이지의 갯수를 조정해줄 경우

ajax로 가져온 데이터들을 조리있게 바꿔서 리스트의 내용들을 교체해준다.