Web and Dev.... webzil.tistory.com

- Vue.js 로 데이터 랜더링

- DataTables 에 데이터 바인딩

- Vue.js 와 DataTables 의 버튼 클릭 이벤트 차이

- i18n 다국어 처리

- BootStrap 4로 페이지 구성

https://jsfiddle.net/mijisoo/q56pb0t9/62/

https://datatables.net/extensions/select/examples/initialisation/reload.html

Bootstrap + jQuery 기반 프로젝트 에서 Vue.js 를 일부 페이지만 섞어서 사용하는데

Vue.js 로 만든 페이지에서도 DataTables 를 사용하고 싶을 때가 있습니다.

DataTables 은 jQuery 를 통해 주로 쓰이는데 Vue.js 와 함께 쓰일 때는 역할을 명확하게 구분해야

그나마 쓸 수 있을 정도인듯 합니다.

일단 Vue.js 로는 DataTables 테이블 바인딩, 값에 따른 화면 제어 위주로만 활용하고

DataTables 의 정렬, 페이징, 내용 검색 등등의 역할을 jQuery 로 분리해서 사용하고자 합니다.

물론 vue.js 로 최적화된 DataTables 라이브러리를 활용하면 되겠지만, 별도의 학습이 필요하고

구현부도 순수 DataTables 의 처리와 달라 지므로 각각의 이점만 활용해 보려는 시도라 보면 됩니다.

- 구현 아이디어

1) Vue.js 로 DataTables 의 데이터를 랜더링 하도록 구성

==> 화면에 데이터가 바인딩되고 vue.js 를 통해 화면 제어는 가능하나 DataTables 의 정렬, 페이징등의 기능은 동작 하지 않음.

2) DataTables 의 기능 중 Static Table 을 DataTables 로 변환 하는 속성을 활용하여

Vue.js 로 랜더링이 끝난 Table 을 DataTables 로 변환

==> DataTables 테이블로 인식이 되면 서 정렬, 페이징, 검색 기능등의 이벤트 활용 가능.

===> Vue.js 에서 데이터 새로고침이 이뤄진 이후 DataTables 재 생성 이벤트 호출

Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.

https://datatables.net/examples/basic_init/zero_configuration.html

vue.js 의 updated 이벤트에서 DataTables 초기화 (재 생성)

https://datatables.net/manual/server-side

p.s. Python flask 와 DataTables 함께 사용

https://github.com/SergioLlana/datatables-flask-serverside