내 웹 페이지에 드롭 다운과 테이블이 있습니다. 사용자가 드롭 다운에서 선택하면 테이블에 데이터가 동적으로 채워집니다. 이 테이블을 채우는 가장 좋은 방법은 무엇입니까? 저는 서버 측 기술에 Spring MVC와 JSP를 사용하고 있습니다. 사용자가 드롭 다운 선택을 한 후에는 처음부터 모두 검색하는 것이 아니라 데이터를 검색하라는 별도의 요청을 할 가능성이 높습니다. JSP동적으로 html 테이블 업데이트
이 방법이 좋은 해결책입니까? 아니면 더 좋은 방법이 있을까요?
데이터가 극도로 부피가 크거나 급격하게 변화하는 "라이브"정보가 아닌 경우 표의 드롭 다운 옵션 당 하나씩 <tbody id="xxx">...</tbody> 요소의 페이지로 제공하십시오. 드롭 다운 메뉴에서 현재 선택되어있는 옵션에 해당하는 tbody를 보여주고 다른 모든 것을 숨기는 'onchange'핸들러를 첨부하십시오.
필요한 경우 AJAX를 사용하여 비슷한 방식으로 데이터를 가져올 수 있습니다. 빈 <tbody id="xxx">...</tbody> 요소가있는 페이지를 옵션별로 제공하십시오. 그런 다음 tbodys를 드롭 다운의 onchange 핸들러에서 "주문형"으로 채우고 위와 같이 표시/숨기기를 수행합니다. 적절한 경우, inchange 핸들러에 테스트를 포함하여 각 데이터 세트가 한 번만 페치되도록 할 수 있습니다. 데이터가 이미 수신 된 경우 tbody에 캐시됩니다. 결국 모든 tbodys가 채워지면이 솔루션은 위와 동일하게됩니다.
더 나은 방법은 handlebars.js 또는 mustache.js 템플릿 (또는 다른 프런트 엔드 템플릿 엔진)을 사용하는 것일 수 있습니다. 둘 다 JSON 개체를 가져 와서 추가 할 수있는 템플릿에 삽입하기 때문입니다. html. 이 기능은 AJAX를 통해 데이터를 가져 오는 경우 매우 효과적이며, AJAX가 JSON을 반환하는 경우에도 효과적입니다.
프로젝트에서 타사 JQuery 플러그인을 사용할 수있는 경우 DataTables을 사용하는 것이 좋습니다. 상자 밖에서 필요한 모든 작업을 수행해야합니다. 필자는 몇 년 동안 다양한 프로젝트에서 DT를 사용했으며 강력하고 안정적인 플러그인이라고 생각합니다.
이러한 접근 방식은 완벽하게 훌륭하며 필요할 때만 데이터를 요청할 때 일부는 효율적일 수 있습니다. –