Trong một thế giới hoàn hảo, người dùng sẽ không cần nhìn xa hơn kết quả tìm kiếm đầu tiên để tìm thấy những gì họ đang tìm kiếm. Tuy nhiên, trong thực tế, thường cần phải tạo một số loại giao diện phân trang để duyệt qua danh sách kết quả dài
Trong hướng dẫn này, chúng tôi thảo luận về hai cách tiếp cận khác nhau để phân trang được hỗ trợ bởi Meilisearch. một sử dụng offset
và limit
, và một sử dụng hitsPerPage
và page
Có nhiều mẫu giao diện người dùng giúp người dùng của bạn điều hướng qua các kết quả tìm kiếm. Một giải pháp phổ biến và hiệu quả trong Meilisearch là sử dụng offset
và limit
để tạo các giao diện xoay quanh
Các giải pháp khác, chẳng hạn như cho phép người dùng chuyển đến bất kỳ trang kết quả tìm kiếm nào, sử dụng hitsPerPage
và page
để có được tổng số tài liệu phù hợp
Dù bạn chọn giao diện người dùng nào, thì số lượng kết quả tìm kiếm tối đa có giới hạn mà Meilisearch sẽ trả về cho bất kỳ truy vấn cụ thể nào. Bạn có thể sử dụng để định cấu hình điều này, nhưng lưu ý rằng các giới hạn cao hơn có thể ảnh hưởng tiêu cực đến hiệu suất tìm kiếm
Nút "Trước" và "Tiếp theo"
Sử dụng các nút "Trước" và "Tiếp theo" để phân trang có nghĩa là người dùng có thể dễ dàng điều hướng qua các kết quả nhưng không có khả năng chuyển đến trang kết quả tùy ý
Mặc dù phương pháp này cung cấp độ chính xác thấp hơn so với bộ chọn trang toàn diện, nhưng nó không yêu cầu biết chính xác số lượng kết quả tìm kiếm. Vì việc tính toán toàn bộ số lượng tài liệu phù hợp với một truy vấn là một quá trình sử dụng nhiều tài nguyên nên các giao diện như thế này có thể mang lại hiệu suất tốt hơn
Thực hiện
Để triển khai giao diện này trong một trang web hoặc ứng dụng, chúng tôi thực hiện các truy vấn của mình với các tham số tìm kiếm limit
và offset
. Các cơ quan phản hồi sẽ bao gồm trường limit
1, chứa một phần kết quả tìm kiếm. Đây là hành vi mặc định của Meilisearch
limit
và offset
Các nút "Trước" và "Tiếp theo" có thể được triển khai bằng cách sử dụng các tham số tìm kiếm và
limit
đặt kích thước của một trang. Nếu bạn đặt limit
thành limit
8, phản hồi của Meilisearch sẽ chứa tối đa 10 kết quả tìm kiếm. offset
bỏ qua một số kết quả tìm kiếm. Nếu bạn đặt offset
thành hitsPerPage
1, phản hồi của Meilisearch sẽ bỏ qua 20 kết quả tìm kiếm đầu tiên
Ví dụ: bạn có thể sử dụng SDK JavaScript của Meilisearch để lấy mười phim đầu tiên trong cơ sở dữ liệu phim
Bạn có thể sử dụng cả hai tham số cùng nhau để tạo các trang tìm kiếm
Tìm kiếm các trang và tính toán offset
Nếu bạn đặt limit
thành hitsPerPage
1 và offset
thành hitsPerPage
6, bạn sẽ nhận được 20 kết quả tìm kiếm đầu tiên. Chúng tôi có thể gọi đây là trang đầu tiên của chúng tôi
Tương tự như vậy, nếu bạn đặt limit
thành hitsPerPage
1 và offset
thành page
0, bạn sẽ bỏ qua 40 kết quả tìm kiếm đầu tiên và nhận được các tài liệu được xếp hạng từ 40 đến 59. Chúng ta có thể gọi đây là trang kết quả thứ ba
Bạn có thể sử dụng công thức này để tính giá trị offset của trang. page
1. Trong ví dụ trước, phép tính sẽ như thế này. page
2. Điều này mang lại cho chúng tôi kết quả là page
0. page
4
Khi một truy vấn trả về ít hơn page
5 so với limit
đã định cấu hình của bạn, bạn đã đến trang kết quả cuối cùng
Theo dõi số trang hiện tại
Mặc dù mẫu giao diện người dùng này không cho phép người dùng chuyển đến một trang cụ thể, nhưng vẫn hữu ích để theo dõi số trang hiện tại
Đoạn mã JavaScript sau lưu trữ số trang trong một phần tử HTML, page
7 và cập nhật nó mỗi khi người dùng di chuyển đến một trang kết quả tìm kiếm khác
Vô hiệu hóa các nút điều hướng cho trang đầu tiên và trang cuối cùng
Việc tắt các nút điều hướng thường hữu ích khi người dùng không thể chuyển đến trang "Tiếp theo" hoặc "Trước đó"
Nút "Trước" sẽ bị tắt bất cứ khi nào offset
của bạn là hitsPerPage
6, vì điều này cho thấy người dùng của bạn đang ở trang kết quả đầu tiên
Để biết khi nào nên tắt nút "Tiếp theo", chúng tôi khuyên bạn nên đặt truy vấn của mình limit
thành số lượng kết quả bạn muốn hiển thị trên mỗi trang cộng với một. Không nên hiển thị thêm offset
1 đó cho người dùng. Mục đích của nó là để chỉ ra rằng có ít nhất một tài liệu nữa để hiển thị trên trang tiếp theo
Đoạn mã JavaScript sau chạy kiểm tra xem chúng ta có nên tắt một nút mỗi khi người dùng điều hướng đến một trang kết quả tìm kiếm khác hay không
Bộ chọn trang được đánh số
Kiểu phân trang này bao gồm một danh sách các trang được đánh số kèm theo các nút "Tiếp theo" và "Trước đó". Đây là mẫu giao diện người dùng phổ biến cung cấp cho người dùng độ chính xác đáng kể khi điều hướng kết quả
Tính toán tổng lượng kết quả tìm kiếm cho một truy vấn là một quá trình sử dụng nhiều tài nguyên. Do đó, bộ chọn trang có thể dẫn đến giao diện chậm hơn
Thực hiện
Theo mặc định, truy vấn Meilisearch chỉ trả về limit
1. Giá trị này có thể thay đổi khi người dùng điều hướng kết quả tìm kiếm và không nên được sử dụng để tính toán số lượng trang kết quả tìm kiếm
Khi truy vấn của bạn chứa , hoặc cả hai tham số tìm kiếm này, Meilisearch sẽ trả về offset
5 và offset
6 thay vì limit
1. offset
5 chứa toàn bộ số kết quả cho truy vấn đó và offset
6 chứa toàn bộ số trang kết quả tìm kiếm cho cùng một truy vấn
Tìm kiếm các trang có hitsPerPage
và page
hitsPerPage
xác định số lượng kết quả tìm kiếm tối đa trên một trang
Vì hitsPerPage
xác định số lượng kết quả trên một trang nên nó có ảnh hưởng trực tiếp đến tổng số trang cho một truy vấn. Ví dụ: nếu một truy vấn trả về 100 kết quả, đặt hitsPerPage
thành limit
5 có nghĩa là bạn sẽ có bốn trang kết quả tìm kiếm. Thay vào đó, cài đặt hitsPerPage
đến limit
7 có nghĩa là bạn sẽ chỉ có hai trang kết quả tìm kiếm
Ví dụ sau trả về 25 kết quả tìm kiếm đầu tiên cho một truy vấn
Để điều hướng qua các trang kết quả tìm kiếm, hãy sử dụng tham số tìm kiếm page
. Nếu bạn đặt hitsPerPage
thành limit
5 và offset
6 của bạn là hitsPerPage
2, thì page
hitsPerPage
4 chứa các tài liệu từ 1 đến 25. Thay vào đó, đặt page
thành hitsPerPage
6 sẽ trả về tài liệu từ 26 thành 50
GHI CHÚ
hitsPerPage
và page
được ưu tiên hơn offset
và limit
. Nếu một truy vấn chứa hitsPerPage
hoặc page
, thì bất kỳ giá trị nào được chuyển đến offset
và limit
đều bị bỏ qua
Tạo danh sách trang được đánh số
Trường offset
6 có trong phản hồi chứa tổng số trang kết quả tìm kiếm dựa trên truy vấn của bạn hitsPerPage
. Sử dụng điều này để tạo một danh sách các trang được đánh số
Để dễ sử dụng, các truy vấn với hitsPerPage
và page
luôn trả về số trang hiện tại. Điều này có nghĩa là bạn không cần theo dõi thủ công trang nào bạn đang hiển thị
Trong ví dụ sau, chúng tôi tạo một danh sách các nút trang một cách linh hoạt và đánh dấu trang hiện tại
Người dùng của bạn có thể quan tâm nhiều hơn đến trang ngay sau hoặc trước trang kết quả tìm kiếm hiện tại. Do đó, việc thêm các nút "Tiếp theo" và "Trước đó" vào danh sách trang của bạn thường rất hữu ích
Trong ví dụ này, chúng tôi thêm các nút này làm thành phần đầu tiên và cuối cùng của thành phần điều hướng trang của chúng tôi