Làm cách nào để có được tổng số trang trong phân trang trong JavaScript?

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 offsetlimit, và một sử dụng hitsPerPagepage

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 offsetlimit để 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 hitsPerPagepage để 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 limitoffset. Các cơ quan phản hồi sẽ bao gồm trường limit1, chứa một phần kết quả tìm kiếm. Đây là hành vi mặc định của Meilisearch

limitoffset

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 limit8, 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 hitsPerPage1, 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 hitsPerPage1 và offset thành hitsPerPage6, 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 hitsPerPage1 và offset thành page0, 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. page1. Trong ví dụ trước, phép tính sẽ như thế này. page2. Điều này mang lại cho chúng tôi kết quả là page0. page4

Khi một truy vấn trả về ít hơn page5 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, page7 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à hitsPerPage6, 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 offset1 đó 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ề limit1. 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ề offset5 và offset6 thay vì limit1. offset5 chứa toàn bộ số kết quả cho truy vấn đó và offset6 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ó hitsPerPagepage

hitsPerPage xác định số lượng kết quả tìm kiếm tối đa trên một trang

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 limit5 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 limit7 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 limit5 và offset6 của bạn là hitsPerPage2, thì page hitsPerPage4 chứa các tài liệu từ 1 đến 25. Thay vào đó, đặt page thành hitsPerPage6 sẽ trả về tài liệu từ 26 thành 50

GHI CHÚ

hitsPerPagepage được ưu tiên hơn offsetlimit. 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 offsetlimit đều bị bỏ qua

Tạo danh sách trang được đánh số

Trường offset6 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 hitsPerPagepage 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

Làm cách nào để tính toán số trang trong JavaScript?

Các mục trên mỗi trang có thể là tĩnh, được xác định thủ công. Sau đó, from có ​​thể là ((currentPage - 1) * itemsPerPage) + 1 . Nếu trang hiện tại là 1, ( (1 -1) * 5) + 1 = 1. Trang thứ hai. ( (2 -1) * 5) + 1 = 6, v.v.

Tổng số trong phân trang là gì?

Results $results->total() cung cấp cho tôi tổng số bản ghi , không phải số trang trong trình phân trang . Ví dụ: giả sử tôi có 100 bản ghi và nếu tôi. Phân trang ở 10 hàng; . Đánh số trang ở 5 hàng; .

Nó có nghĩa là gì để phân trang một tài liệu?

Phân trang là quá trình tách nội dung in hoặc nội dung số thành các trang rời rạc . Đối với các tài liệu in và một số nội dung trực tuyến, phân trang cũng đề cập đến quá trình tự động thêm các số liên tiếp để xác định thứ tự tuần tự của các trang.