Xây dựng ứng dụng sử dụng JSP, Servlet kết hợp JQuery để phân trang (paging) trên table

Xây dựng ứng dụng sử dụng JSP, Servlet kết hợp JQuery để phân trang (paging) trên table

 

Mục đích: chủ đề này chúng tôi đưa cách thử sử dụng JQuery trên JSP để hỗ trợ phân trang một cách dễ dàng và nhanh chóng cho table khi kết xuất dữ liệu. Ở đây chúng tôi sẽ triển khai ứng dụng web trên JBoss Server để cho thấy sự tương tự khi triển khai trên Tomcat Server

 

Xây dựng ứng dụng sử dụng JSP, Servlet kết hợp JQuery để phân trang (paging) trên table

 

Mục đích: chủ đề này chúng tôi đưa cách thử sử dụng JQuery trên JSP để hỗ trợ phân trang một cách dễ dàng và nhanh chóng cho table khi kết xuất dữ liệu. Ở đây chúng tôi sẽ triển khai ứng dụng web trên JBoss Server để cho thấy sự tương tự khi triển khai trên Tomcat Server

 

Trong chủ đề này, chúng tôi thực hiện một ứng dụng đơn giản gồm một form search như sau

-          Khi người dùng nhập ký tự bất kỳ vào trong ô search và nhấn nút search

-          Tất cả record có liên quan đến nội dung search hiện thị ra dưới dạng lưới

-          Trong lưới này chúng tôi hỗ trợ phân trang và sắp xếp trên lưới

Yêu cầu

-          Nắm vững các khái niệm về MVC trên web, JSP, Servlet

-          Tools yêu cầu

o   JDK 6 update 22

o   NetBeans 6.9.1

o   Web Server: JBoss 5.1.0 GA, Tomcat

-          Các thư viện hỗ trợ

o   JQuery: download toàn bộ thư viện liên quan đến ứng dụng tại đây.

Trong phần nội dung này chúng tôi sẽ làm ví dụ mô tả dữ liệu liên quan đến một account. Dữ liệu mô tả như sau

Chúng ta bắt đầu thực hiện ứng dụng đã nêu ra ở trên

-          Tạo Web Application tương tư như kết hợp JavaFX với JSP và JDBC

o   Tên project: JQueryTableSortJ

o   Server: JBoss 5.1.0 GA, Tomcat

o   J2EE version: JavaEE 5

o   Tạo thư mục JavaScript trong Web Page và copy toàn 4 tập tin jquery1-3-2.js, jquery.tablesorter.pager.js, tablesoter.js, tablesorter_filter vào thư mục JavaScript  trong Web Page

o   Tạo thự mục css trong Web Page và copy các nội dung có liên quan đến css vào đây để trình bày dữ liệu lúc hiện thị (các tập tin bao gồm style.css, asc.gif, bg.gif, desc.gif)

o   Tạo thêm tập tin show.jsp để chuẩn bị cho việc trình bày dữ liệu trong trang này đặt tại thư mục Web Page

o   Cấu trúc project trên Netbeans như sau

o   Chỉnh sửa tập tin index.jsp để hỗ trợ đón nhận dữ liệu search như sau

 

o   Chúng ta cần tạo một Java Object Registration để đón giá trị trở về vì chúng ta search gần đúng, áp dụng luật của JavaBean tạo các thuộc tính tương ứng với các cột trong DB và tạo các phương thức get/set cho chúng

o   Tạo Controller để đón nhận và xử lý chức năng search và chuyển kết quả trình bày cho trang show.jsp

o   Chúng ta thực hiện chỉnh sửa các thành phần liên quan trong trang show.jsp để trình bày dữ liệu

§  Bổ sung JSTL 1.1 vào trong thư viện để hỗ trợ trình bày dữ liệu trong table

§  Sử dụng EL kết hợp JSTL để trình bày dữ liệu

§  Import JQuery vào trong trang để kích hoạt JQuery khi trình bày thông qua tag script (lưu ý tag bắt buộc phải có tag đóng, không được sử dụng tag không có thân)

§  Reference đến css để hỗ trợ lúc trình bày sử dụng tag link

·         Lưu ý: giá trị id của table mà chúng ta tạo ra (có tên myTable) là tên để chúng ta tham chiếu đưa vào cho JQuery xử lý, class dùng để xác định css tương ứng để định nghĩa cho table phía sau

§  Chúng ta trình bày dữ liệu sử dụng JSTL và EL như bình thường nhưng dưới lưới chúng ta cần tạo control di chuyển qua các nút lệnh và combo để chọn lựa số lựa phần tử cho mỗi trang sử dụng thẻ div

§  Cuối cùng kích hoạt hay yêu cầu chức năng trong thư viện của JQuery hỗ trợ trình bày xử lý dữ liệu trên table thông qua id của table đã đặt ở trên như sau

·         Lưu ý: giá trị pager là tên id mà chúng ta đặt cho thẻ div bao nhóm chức năng điều khiển lưới

o   Các giá trị về widgets để hỗ trợ trình bày lưới với từng dòng dữ liệu khác nhau

o   Các thành phần khác để trang trí cho lưới và hỗ trợ trình bày các thành phần liên quan đến các chức năng sort và filter trên lưới

§  Chúng ta đã hoàn tất việc xây dựng ứng trên jsp, chúng ta start server JBoss 5.1.0GA, build, deploy, run để test thử.

·         Chép tập tin JQueryTableSortJ.war từ dist của ứng dụng chúng ta vào trong thư mục JBOSS_HOME\server\default\deploy

·         Xem server đến khi deploy xong, chọn Services, chọn Server, chọn JBoss 5.1.0 GA, mở rộng server, mở rộng Web Application, chọn tên ứng dụng của chúng ta (ở đây là JQueryTableSortJ) bằng cách click phải chuột, chọn Open in Browser

·         Nhập vào chữ a và click nút Search

·         Chọn combo box là số 2

 

·         Click nút > để di chuyển đến trang 2

·         Click vào tam giác hướng lên của cột No để sort cột No

 

·         Click tương ứng vào cột Username

 

-          Chúc mừng các bạn, chúng ta đã hoàn tất xong việc sử dụng JQuery để phân trang và sắp xếp dữ liệu trên table.

Rất mong sự góp ý của quí vị về chủ đề này. Hẹn gặp lại trong chủ đề khác