Trang chủ

Làm thế nào để phân trang trong jsp

Trang chủCông nghệ | February 14, 2014

Làm thế nào để phân trang trong jsp có kết hợp với JQuery giúp các bạn phân trang trong ứng dụng.

 info24h.vn : Vui học mỗi ngày – học nữa học mãi
Mục tiêu của bài viết: Giúp các bạn phân trong trong ứng dụng web vời jsp. 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
– 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
jsp-phan-trang-1
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
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
jsp-phan-trang-2
o Chỉnh sửa tập tin index.jsp để hỗ trợ đón nhận dữ liệu search như sau
jsp-phan-trang-3
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
jsp-phan-trang-4
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
jsp-phan-trang-5
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
jsp-phan-trang-6
· 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
jsp-phan-trang-7
§ 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
jsp-phan-trang-8
· 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
jsp-phan-trang-9
· Nhập vào chữ a và click nút Search
· Chọn combo box là số 2
jsp-phan-trang-10
· Click nút > để di chuyển đến trang 2
jsp-phan-trang-12
· Click vào tam giác hướng lên của cột No để sort cột No
jsp-phan-trang-13
· Click tương ứng vào cột Username
jsp-phan-trang-15
– 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.

Xem thêm:

Gửi bình luận

Xem thêm

Thời trang

Xem thêm

Công nghệ

Link hữu ích
shop bán váy đầm công chúa đẹp tại TP.HCM

shop bán đầm cho bé gái đẹp tại TP.HCM
shop bán Thời trang trẻ em cao cấp giao hàng toàn quốc
mua mùn cưa giá cao
váy đầm công chúa

váy đầm trẻ em | mua24h.com.vn |

Tuyển chuyên viên thiết kế và may đầm công chúa giỏi :
Cung cấp vải sỉ và lẻ