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ử , sau đó sử dụng CSS để hiển thị trực quan bố cục dưới dạng một hàng

Thông thường, thành phần phân trang sẽ được căn giữa theo chiều ngang bên dưới nội dung

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 chỉ định là một hộp chứa linh hoạt để chúng ta có thể căn giữa danh sách bên trong bằng cách sử dụng thuộc tính justify-content

Bản thân danh sách cũng trở thành một thùng chứa linh hoạt để sắp xếp các mục thành một hàng. Để tạo khoảng trống cho các mục, chúng tôi sẽ sử dụng margin trên các mục linh hoạ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
}

Chúng tôi cũng đã thêm một số nội dung bổ sung mà trình đọc màn hình có thể đọc được nhưng bị ẩn trực quan và đặt thuộc tính

//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
}

Khái niệm Phân trang JavaScript được áp dụng để di chuyển giữa các trang bằng các nút hoặc liên kết Đầu tiên, Tiếp theo, Trước và Cuối cùng. Phương châm chính của phân trang là di chuyển giữa các nội dung ngay lập tức bằng cách nhấp vào liên kết hoặc nút. Phân trang có nhiều liên kết hoặc nút được cung cấp để truy cập nội dung Đầu tiên, Tiếp theo, Trước đó và Cuối cùng. Tạo các nút Đầu tiên, Tiếp theo, Trước đó và Cuối cùng trong JavaScript, chúng tôi đã sử dụng các hàm JavaScript khác nhau

Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]

Giá
Xem khóa học

600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 [83.403 xếp hạng]

Máy nhắn tin Bootstrap là gì?

Khái niệm phân trang, được sử dụng để truy cập nội dung bằng cách sử dụng Đầu tiên, Tiếp theo, Trước đó và Cuối cùng hoặc nhiều liên kết hoặc nút dựa trên yêu cầu của khách hàng để truy cập nội dung một cách suôn sẻ

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Tại sao chúng tôi sử dụng phân trang JavaScript?

Kịch bản thời gian thực. Hãy lấy trang web amazon hoặc trang web Flipkart để hiển thị các sản phẩm có sẵn trong cơ sở dữ liệu của họ. Giả sử họ có 1 triệu sản phẩm với họ. Nếu họ đang cố gắng hiển thị tất cả các mặt hàng cùng một lúc, khách hàng phải đợi thêm thời gian như một ngày để xem tất cả các danh sách sản phẩm

Làm thế nào chúng ta nên giải quyết tình huống này?

Thay vì hiển thị tất cả các mục cùng một lúc, chúng tôi có thể hiển thị chúng từ 50 đến 100 mục cùng một lúc bằng cách sử dụng danh sách các nút liên kết. Nếu khách hàng không hài lòng với 50 đến 100 sản phẩm đầu tiên thì sẽ chuyển sang 50 đến 100 sản phẩm tiếp theo, cứ thế tiếp tục. Khái niệm này được gọi là phân trang

Cú pháp phân trang

//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
}

Ví dụ về phân trang trong Javascript

Dưới đây là các ví dụ sau được đề cập dưới đây

Ví dụ #1 – Phân trang bằng số

Mã số

Pagination






body
{
font-size: 30px;
background: brown;
}
h2
{
color: lime;
}
h3
{
color: olive;
}



//creating an array for adding numbers in a page
var countList = new Array[];
//creating an array for adding number of pagess
var addPageList = new Array[];
var presentPage = 1;
var countPerEachPage = 10;
var countOfPages = 0;
//function for adding how many numbers in total
function prepareList[] {
for [count = 0;counti< 100; count++]
countList.push[count];
countOfPages = getCountOfPages[];
}
//function for creating how many how many number per each page
function getCountOfPages[] {
return Math.ceil[countList.length / countPerEachPage];
}
//function for moving to next page
function getNextPage[] {
presentPage += 1;
loadMyPaginationList[];
}
//function for moving previous page
function getPreviousPage[] {
presentPage -= 1;
loadMyPaginationList[];
}
//function for moving to first page
function getFirstPage[] {
presentPage = 1;
loadMyPaginationList[];
}
//function for moving last page
function getLastPage[] {
presentPage = countOfPages;
loadMyPaginationList[];
}
//function for creating how to move between the pages
function loadMyPaginationList[] {
var start = [[presentPage - 1] * countPerEachPage];
var end = start + countPerEachPage;
addPageList = countList.slice[start, end];
createPageList[];
validatePageCount[];
}
//function for adding numbers to each page
function createPageList[] {
document.getElementById["countList"].innerHTML = "";
for [p = 0; p< addPageList.length; p++] {
document.getElementById["countList"].innerHTML = document.getElementById["countList"].innerHTML+ addPageList[p] + "
";
}
}
//function for validating real time condition like if move to last page, last page disabled etc
function validatePageCount[] {
document.getElementById["next"].disabled = presentPage == countOfPages ? true : false;
document.getElementById["previous"].disabled = presentPage == 1 ? true : false;
document.getElementById["first"].disabled = presentPage == 1 ? true : false;
document.getElementById["last"].disabled = presentPage == countOfPages ? true : false;
}
//function for loading pagination functionality
function loadMyPagination[] {
prepareList[];
loadMyPaginationList[];
}
window.onload = loadMyPagination;








Pagination Example
Each Page has 10 numbers

đầu ra

Ví dụ #2 – Phân trang bằng Chuỗi

Mã số

Pagination






body {
font-size: 30px;
background: brown;
}
h2 {
color: lime;
text-align: center;
}
h3 {
color: olive;
text-align: center;
}
.a {
text-align: center;
color: white;
}



var currentPage = 1;
var CountPerEachPage = 2;
//json object mapping for content
var paginationObject = [
{
content : "Hi,"
},
{
content : "Hello...."
},
{
content : "I"
},
{
content : "Amardeep."
},
{
content : "My"
},
{
content : "Best"
},
{
content : "Friend"
},
{
content : "is"
},
{
content : "Paramesh"
},
{
content : "Nathi"
},
{
content : ".........."
},];
//function for go to previous page
function getPereviousPage[] {
if [currentPage > 1] {
currentPage--;
validateEachPage[currentPage];
}
}
//function for go to next page
function getNextPage[] {
if [currentPage  numberOfPages[]]
paginationPage = numberOfPages[];
showMyTable.innerHTML = "";
for [var i = [paginationPage - 1] * CountPerEachPage; i < [paginationPage * CountPerEachPage]; i++] {
showMyTable.innerHTML += paginationObject[i].content + "
";
}
paginationPage_span.innerHTML = paginationPage;
if [paginationPage == 1] {
previousPage.style.visibility = "hidden";
} else {
previousPage.style.visibility = "visible";
}
if [paginationPage == numberOfPages[]] {
nextPage.style.visibility = "hidden";
} else {
nextPage.style.visibility = "visible";
}
}
//function per number of Pages
function numberOfPages[] {
return Math.ceil[paginationObject.length / CountPerEachPage];
}
//loading al JavaScript functions functionality
window.onload = function[] {
validateEachPage[1];
};



Pagination Introduction Content
Content for Pagination in each Page


Previous
Page Next Page
Page Number: 

đầu ra

Sau khi nhấp vào nút Trang tiếp theo

Ví dụ #3 – Phân trang không có thư viện CSS mặc định

Mã số

Pagination

html {
height: 100%;
width: 100%;
background-color: #D7D7D7;
background-image: -webkit-radial-gradient[contain, #F2F2F2, #D1D1D1];
background-image: -moz-radial-gradient[contain, #F2F2F2, #D1D1D1];
background-image: -ms-radial-gradient[contain, #F2F2F2, #D1D1D1];
background-image: -o-radial-gradient[contain, #F2F2F2, #D1D1D1];
background-image: radial-gradient[contain, #F2F2F2, #D1D1D1];
}
body {
margin: 0;
height: 100%;
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
}
body:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
#paginationID {
display: inline-block;
vertical-align: middle;
border-radius: 4px;
padding: 1px 2px 4px 2px;
border-top: 1px solid #AEAEAE;
border-bottom: 1px solid #FFFFFF;
background-color: #DADADA;
background-image: -webkit-linear-gradient[top, #DBDBDB, #E2E2E2];
background-image: -moz-linear-gradient[top, #DBDBDB, #E2E2E2];
background-image: -ms-linear-gradient[top, #DBDBDB, #E2E2E2];
background-image: -o-linear-gradient[top, #DBDBDB, #E2E2E2];
background-image: linear-gradient[top, #DBDBDB, #E2E2E2];
}
#paginationID a, #paginationID i {
display: inline-block;
vertical-align: middle;
width: 22px;
color: #7D7D7D;
text-align: center;
font-size: 10px;
padding: 3px 0 2px 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#paginationID a {
margin: 0 2px 0 2px;
border-radius: 4px;
border: 1px solid #E3E3E3;
cursor: pointer;
box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
text-shadow: 0 1px 1px #FFF;
background-color: #E6E6E6;
background-image: -webkit-linear-gradient[top, #F3F3F3, #D7D7D7];
background-image: -moz-linear-gradient[top, #F3F3F3, #D7D7D7];
background-image: -ms-linear-gradient[top, #F3F3F3, #D7D7D7];
background-image: -o-linear-gradient[top, #F3F3F3, #D7D7D7];
background-image: linear-gradient[top, #F3F3F3, #D7D7D7];
}
#paginationID i {
margin: 0 3px 0 3px;
}
#paginationID a.current {
border: 1px solid #E9E9E9;
box-shadow: 0 1px 1px #999;
background-color: #DFDFDF;
background-image: -webkit-linear-gradient[top, #D0D0D0, #EBEBEB];
background-image: -moz-linear-gradient[top, #D0D0D0, #EBEBEB];
background-image: -ms-linear-gradient[top, #D0D0D0, #EBEBEB];
background-image: -o-linear-gradient[top, #D0D0D0, #EBEBEB];
background-image: linear-gradient[top, #D0D0D0, #EBEBEB];
}


var pagePagination = {
code : '',
Extend : function[data] {
data = data || {};
pagePagination.size = data.size || 300;
pagePagination.page = data.page || 1;
pagePagination.step = data.step || 3;
},
Add : function[p, q] {
for [var l =p;l < q; l++] {
pagePagination.code += '' + l + '';
}
},
Last : function[] {
pagePagination.code += '...' + pagePagination.size + '';
},
First : function[] {
pagePagination.code += '1...';
},
Click : function[] {
pagePagination.page = +this.innerHTML;
pagePagination.Start[];
},
Prev : function[] {
pagePagination.page--;
if [pagePagination.page < 1] {
pagePagination.page = 1;
}
pagePagination.Start[];
},
Next : function[] {
pagePagination.page++;
if [pagePagination.page > pagePagination.size] {
pagePagination.page = pagePagination.size;
}
pagePagination.Start[];
},
Bind : function[] {
var a = pagePagination.e.getElementsByTagName['a'];
for [var num = 0; num  0.