نحوه پیاده سازی صفحه بندی با جاوا اسکریپت Vanilla

صفحه بندی برای تجزیه یک بلوک محتوا به صفحات قابل پیمایش در یک صفحه وب استفاده می شود.

علاوه بر آسان‌تر دیدن اطلاعات، هنگام بارگیری داده‌ها از سرور نیز کمک می‌کند. با استفاده از صفحه بندی، می توانید تصمیم بگیرید که هر بار که کاربر تصمیم به دیدن آنها دارد، فقط تعداد ثابتی از موارد را بارگیری کنید. این به صرفه جویی در زمان و جلوگیری از اضافه بار اطلاعات در صفحه کمک می کند.

در اینجا یک اوج پنهان در محصول نهایی آمده است:

عنصر صفحه بندی ما از هر دو شماره صفحه و صفحه بعد & صفحه قبلی دکمه های جهت یابی

بیا شروع کنیم!

1. محتوا را با HTML قرار دهید

در این نسخه ی نمایشی، محتوایی را قرار می دهیم تا با استفاده از HTML صفحه بندی شود. در یک مثال واقعی، ممکن است محتوای خود را به‌عنوان JSON از یک سرور دریافت کنیم، بنابراین در هنگام نوشتن کد جاوا اسکریپت، نحوه اعمال منطق صفحه‌بندی را نیز بررسی خواهیم کرد.

ابتدا محتوای صفحه بندی شده خود را به عنوان یک لیست تعریف می کنیم:

<ul id="paginated-list" aria-live="polite">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>

در ادامه الف را تعریف می کنیم nav عنصری که شامل بعد و قبلی دکمه ها و محفظه شماره صفحه بندی:

<nav class="pagination-container">
  <button class="pagination-button" id="prev-button" title="Previous page" aria-label="Previous page">
    &lt;
  </button>
  
  <div id="pagination-numbers">

  </div>
  
  <button class="pagination-button" id="next-button" title="Next page" aria-label="Next page">
    &gt;
  </button>
</nav>

صفحه بندی-اعداد div در حال حاضر خالی است زیرا شماره صفحات با استفاده از جاوا اسکریپت تعیین می شود.

2. استایل دهی با CSS

ما یک رویکرد نسبتا مینیمالیستی را برای این نسخه نمایشی در نظر می گیریم، بنابراین فقط به اعداد صفحه بندی و ظرف استایل می دهیم.

ظرف صفحه بندی را در پایین صفحه قرار دهید، استایل دکمه پیش فرض را برای شماره صفحه بندی لغو کنید و یک عدد تنظیم کنید active کلاس برای نشان دادن شماره صفحه که در حال حاضر انتخاب شده است:

.pagination-container {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  justify-content: center;
}

.pagination-number,
.pagination-button{
  font-size: 1.1rem;
  background-color: transparent;
  border: none;
  margin: 0.25rem 0.25rem;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: .2rem;
}

.pagination-number:hover,
.pagination-button:not(.disabled):hover {
  background: #fff;
}

.pagination-number.active {
  color: #fff;
  background: #0085b6;
}

ما همچنین تعدادی ساده اضافه کرده ایم :hover یک ظاهر طراحی کنید، اما از آن استفاده کنید :not() انتخابگر به مطمئن شوید که برای دکمه های غیرفعال اعمال نمی شود.

3. منطق صفحه بندی با جاوا اسکریپت

حالا برای اینکه کار کند. بیایید تعریف کنیم که می خواهیم با صفحه بندی به چه چیزی برسیم:

1. فقط تعداد مشخصی از موارد را در هر صفحه نمایش دهید
2. نمایش شماره صفحات بر اساس تعداد دفعات شکسته شدن کل موارد
3. هنگامی که روی شماره صفحه کلیک می شود، صفحه نمایش را به آن صفحه تغییر دهید
4. اجازه پیمایش به صفحات قبلی و بعدی را بدهید

ابتدا تمام عناصر مورد نیاز خود را دریافت کنید:

const paginationNumbers = document.getElementById("pagination-numbers");
const paginatedList = document.getElementById("paginated-list");
const listItems = paginatedList.querySelectorAll("li");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");

در مرحله بعد، متغیرهای جهانی خود را تعریف می کنیم:

• paginationLimit: چند مورد می خواهیم در هر صفحه نمایش داده شود. و
• pageCount: تعداد صفحاتی که بر اساس paginationLimit وجود خواهد داشت.
• currentPage: مقدار فعلی صفحه را ذخیره کنید

را محاسبه کنید pageCount با تقسیم تعداد کل اقلام (listItems.length) توسط paginationLimit و گرد کردن به بالاترین عدد کامل با استفاده از Math.ceil عملکرد.

“ Math.ceil() تابع همیشه یک عدد را تا بزرگترین عدد صحیح بعدی گرد می کند.” – MDN

بنابراین اگر 50 مورد داشته باشیم و بخواهیم فقط 10 مورد در هر صفحه نمایش دهیم، تعداد صفحات ما 50/10 = 5 صفحه خواهد بود. به همین ترتیب، اگر 55 مورد داشته باشیم و بخواهیم در هر صفحه 10 مورد نمایش دهیم، تعداد صفحات ما 55/10 = 5.5 خواهد بود که تا 6 صفحه گرد می شود.

const paginationLimit = 10;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage;

اضافه کردن شماره صفحه

اکنون که می دانیم به چند صفحه نیاز داریم، می توانیم یک تابع برای ایجاد یک دکمه جدید برای شماره صفحه تعریف کنیم و سپس دکمه ها را به صفحه اضافه کنیم. paginationNumbers ظرف

const appendPageNumber = (index) => {
  const pageNumber = document.createElement("button");
  pageNumber.className = "pagination-number";
  pageNumber.innerHTML = index;
  pageNumber.setAttribute("page-index", index);
  pageNumber.setAttribute("aria-label", "Page " + index);

  paginationNumbers.appendChild(pageNumber);
};

const getPaginationNumbers = () => {
  for (let i = 1; i <= pageCount; i++) {
    appendPageNumber(i);
  }
};

و سپس ما با آن تماس می گیریم getPaginationNumbers عملکرد زمانی که صفحه وب با استفاده از بارگیری می شود window.load() رویداد:

window.addEventListener("load", () => {
  getPaginationNumbers();
});

نمایش صفحه فعال

ما می خواهیم تابعی را تعریف کنیم که فقط مواردی را که در آن مجاز هستند نمایش دهد paginationLimit در هر صفحه در اینجا نحوه اجرای آن آمده است:

مقدار را تنظیم کنید currentPage متغیر به pageNum ارزش:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
};

محدوده نمایش موارد را دریافت کنید. اگر در صفحه 1 هستیم، می خواهیم موارد 1 تا 10 را نشان دهیم (مطابق با paginationLimit). اگر در صفحه 2 هستیم، می خواهیم موارد 11 تا 20 و غیره را نشان دهیم.

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
  
  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;
};

فهرست مواردی که قرار است نمایش داده شوند را حلقه بزنید و همه موارد را پنهان کنید. سپس تمام مواردی را که در محدوده قرار می‌گیرند، آشکار کنید.

توجه داشته باشید: از آنجایی که ما با آرایه ها کار می کنیم، آیتم 1 در 0 و مورد 10 در موقعیت 9 قرار می گیرند، بنابراین منطق ما به این صورت است:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
  
  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;

  listItems.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

ما از این روش استفاده می کنیم زیرا پیاده سازی ما فقط محتوای HTML را پنهان می کند. اگر می‌خواهیم محتوا را از یک شی JSON به DOM اضافه کنیم، می‌توانیم منطق را به‌گونه‌ای به‌روزرسانی کنیم که چیزی شبیه به:

  jsonData.forEach((item, index) => {
    elementContainer.innerHTML = ''
    if (index >= prevRange && index < currRange) {
      elementContainer.appendChild(item)
    }
  });

را به روز کنید window.load() رویداد برای تنظیم صفحه فعلی به عنوان صفحه 1 پس از بارگیری صفحه وب:

window.addEventListener("load", () => {
  getPaginationNumbers();
  setCurrentPage(1);
});

دکمه های شماره صفحه شنونده رویداد اضافه کنید

از شنونده رویداد کلیک برای راه اندازی استفاده کنید setCurrentPage هر زمان که روی دکمه شماره صفحه کلیک می شود، عمل کنید. این تابع را در داخل قرار دهید window.load() رویداد بنابراین اکنون تابع به شکل زیر است:

window.addEventListener("load", () => {
  getPaginationNumbers();
  setCurrentPage(1);

  document.querySelectorAll(".pagination-number").forEach((button) => {
    const pageIndex = Number(button.getAttribute("page-index"));

    if (pageIndex) {
      button.addEventListener("click", () => {
        setCurrentPage(pageIndex);
      });
    }
  });
});

شماره صفحه فعال را تنظیم کنید

همچنین می‌خواهیم تابعی را تعریف کنیم تا کلاس فعال را به شماره صفحه‌ای که کلیک کردیم اضافه کنیم. با حذف کلاس فعال، تمام دکمه های صفحه را بازنشانی می کنیم. سپس، اگر صفحه فهرست دکمه مطابقت دارد currentPage متغیر global، کلاس فعال را به آن دکمه اضافه می کنیم.

const handleActivePageNumber = () => {
  document.querySelectorAll(".pagination-number").forEach((button) => {
    button.classList.remove("active");
    
    const pageIndex = Number(button.getAttribute("page-index"));
    if (pageIndex == currentPage) {
      button.classList.add("active");
    }
  });
};

این تابع را در setCurrentPage بنابراین هر بار که صفحه جدیدی تنظیم می شود، شماره صفحه فعال به روز می شود:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
  
  handleActivePageNumber();

  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;

  listItems.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

در این مرحله، ما باید یک سیستم ناوبری صفحه کاربردی داشته باشیم که به شکل زیر است:

دکمه های بعدی و قبلی

بیایید این قابلیت را گسترش دهیم تا شامل بعد و قبلی دکمه ها. ما می توانیم از همان پیاده سازی در setCurrentPage() عملکرد، و به روز رسانی منطق:

• برای قبلی با استفاده از دکمه، صفحه را تغییر می دهیم setCurrentPage(currentPage - 1)
• برای بعد با استفاده از دکمه، صفحه را تغییر می دهیم setCurrentPage(currentPage + 1)

شامل شنوندگان رویداد برای بعد و قبلی دکمه ها در window.load():

window.addEventListener("load", () => {
  getPaginationNumbers();
  setCurrentPage(1);

  prevButton.addEventListener("click", () => {
    setCurrentPage(currentPage - 1);
  });

  nextButton.addEventListener("click", () => {
    setCurrentPage(currentPage + 1);
  });

  document.querySelectorAll(".pagination-number").forEach((button) => {
    const pageIndex = Number(button.getAttribute("page-index"));

    if (pageIndex) {
      button.addEventListener("click", () => {
        setCurrentPage(pageIndex);
      });
    }
  });
});

دکمه های پیمایش صفحه را غیرفعال کنید

ما همچنین می خواهیم یک ویژگی غیرفعال کردن را نیز در آن قرار دهیم بعد و قبلی دکمه ها.

• غیر فعال کردن قبلی اگر در صفحه اول هستیم را فشار دهید (اگر صفحه فعلی 1 باشد)
• غیر فعال کردن بعد اگر در آخرین صفحه هستیم را فشار دهید (اگر صفحه فعلی تعداد کل صفحات باشد)

const disableButton = (button) => {
  button.classList.add("disabled");
  button.setAttribute("disabled", true);
};

const enableButton = (button) => {
  button.classList.remove("disabled");
  button.removeAttribute("disabled");
};

const handlePageButtonsStatus = () => {
  if (currentPage === 1) {
    disableButton(prevButton);
  } else {
    enableButton(prevButton);
  }

  if (pageCount === currentPage) {
    disableButton(nextButton);
  } else {
    enableButton(nextButton);
  }
};

در نهایت، عبور کنید handlePageButtonsStatus() عملکرد در setCurrentPage() بنابراین هر بار که یک صفحه جدید کلیک می شود، ناوبری را بررسی می کنیم:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;

  handleActivePageNumber();
  handlePageButtonsStatus();
  
  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;

  listItems.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

نتیجه

و این همه مردمی است! ما اکنون یک اجرای کاملا کاربردی و در دسترس از یک بخش صفحه بندی شده داریم.

مهارت های JavaScript Front End خود را ارتقا دهید!

ما تعداد زیادی آموزش اساسی و کاربردی جاوا اسکریپت در Tuts+ داریم، بنابراین می توانید در حین ایجاد یاد بگیرید: