Phân trang js css

Yêu cầu

Mẫu phân trang thường hiển thị các mục trong một hàng. Để đảm bảo rằng việc phân trang có thể hiểu được đối với những người sử dụng trình đọc màn hình, chúng tôi đánh dấu các mục dưới dạng danh sách bên trong phần tử

Công thức

Tải xuống ví dụ này

Lựa chọn thực hiện

Mẫu này được bố trí bằng cách sử dụng flexbox - một hộp chứa flex được lồng vào bên trong một hộp chứa khác. Phần tử

Các phương thức thay thế

Sau khi thuộc tính column-gap được triển khai trong trình duyệt, thuộc tính này có thể được sử dụng thay cho lề để loại bỏ các mục

.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  column-gap: 2px;
}

Mối quan tâm về khả năng tiếp cận

Chúng tôi muốn đảm bảo rằng một người sử dụng trình đọc màn hình hiểu điều hướng này làm gì và họ sẽ đi đâu khi nhấp vào liên kết. Để giải quyết vấn đề này, chúng tôi đã thêm

//function for creating page list
function prepareList() {
for (count = 0; count < 100; count++)
//add iteration elements to an array
createPages= getPageNumber();//user defined function
}
//function per creating pages
function preparePages() {
var start= ((presentPage - 1) * countPerEachPage);
var end = start+ countPerEachPage;
listPage= list.slice(start, end);
//call some user defined methods to pagination functionality
}