Sayfalama, büyük veri kümeleriyle uğraşırken kullanıcı deneyimini geliştiren önemli bir web geliştirme unsurudur. İçeriği yönetilebilir parçalara bölerek kullanıcıların veriye daha kolay erişmesini sağlar. Bu blog yazısında, Bootstrap’i stil vermek ve JavaScript’i işlevsellik için kullanarak bir sayfalama sisteminin nasıl oluşturulacağını örnek bir kod ile açıklayacağız.
HTML Yapısı
Öncelikle HTML yapısıyla başlayalım. Tablo ve sayfalama düğmelerini biçimlendirmek için Bootstrap kullanıyoruz.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body class="bg-dark w-75 mx-auto my-4">
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div class="btn-group" id="bottom-pagelist-tfoot"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
var page = 1;
var pageNationLissHtml = document.querySelector("#bottom-pagelist-tfoot");
paginationFunc();
function paginationFunc() {
var totalPages = 11;
var limitPage = 10;
var addresHtml = "";
totalMemoryWrite();
function totalMemoryWrite() {
addresHtml = "";
var startPage = Math.max(1, page - Math.floor(limitPage / 2)); // Başlangıç sayfasını belirle
var endPage = Math.min(startPage + limitPage - 1, totalPages); // Toplam sayfa sayısını kontrol et
if (startPage != 1 && page != 1) {
addresHtml += `<button class="btn btn-dark kurs-basvuru-page-start"><<</button>`;
addresHtml += `<button class="btn btn-dark kurs-basvuru-page-minus"><</button>`;
}
if (limitPage <= totalPages) {
for (let i = startPage; i <= endPage; i++) {
if (i === page) {
addresHtml += `<button class="btn btn-success kurs-basvuru-page kurs-basvuru-page-${i}">${i}</button>`;
} else {
addresHtml += `<button class="btn btn-dark kurs-basvuru-page kurs-basvuru-page-${i}">${i}</button>`;
}
}
} else {
for (let i = 1; i <= totalPages; i++) {
if (i === page) {
addresHtml += `<button class="btn btn-success kurs-basvuru-page kurs-basvuru-page-${i}">${i}</button>`;
} else {
addresHtml += `<button class="btn btn-dark kurs-basvuru-page kurs-basvuru-page-${i}">${i}</button>`;
}
}
}
if (endPage != totalPages && page != totalPages) {
addresHtml += `<button class="btn btn-dark kurs-basvuru-page-plus">></button>`;
addresHtml += `<button class="btn btn-dark kurs-basvuru-page-last">>></button>`;
}
if (page == 1 && totalPages == 1) {
pageNationLissHtml.innerHTML = "";
} else {
pageNationLissHtml.innerHTML = addresHtml;
}
document.querySelectorAll(".kurs-basvuru-page-minus").forEach((element) => {
element.onclick = function() {
page = page - 1;
totalMemoryWrite();
// dataları listeleyeceğin function
addresHtml = "";
}
});
document.querySelectorAll(".kurs-basvuru-page-plus").forEach((element) => {
element.onclick = function() {
page = page + 1;
addresHtml = "";
totalMemoryWrite();
// dataları listeleyeceğin function
}
});
document.querySelectorAll(".kurs-basvuru-page-last").forEach((element) => {
element.onclick = function() {
page = totalPages;
addresHtml = "";
totalMemoryWrite();
// dataları listeleyeceğin function
}
});
document.querySelectorAll(".kurs-basvuru-page-start").forEach((element) => {
element.onclick = function() {
page = 1;
addresHtml = "";
totalMemoryWrite();
// dataları listeleyeceğin function
}
});
document.querySelectorAll(".kurs-basvuru-page").forEach((element) => {
element.onclick = function() {
document.querySelectorAll(".kurs-basvuru-page").forEach((element2) => {
element2.classList.add("btn-dark");
element2.classList.remove("btn-success");
});
element.classList.remove("btn-dark");
element.classList.add("btn-success");
page = Number(element.textContent);
addresHtml = "";
totalMemoryWrite();
// dataları listeleyeceğin function
}
});
}
}
</script>
</body>
</html>
JavaScript ile Sayfalama İşlevi
Bu örnekle, sayfalama düğmelerinin dinamik olarak oluşturulması ve sayfa numaralarının güncellenmesi sağlanır. Kullanıcı bir sayfa düğmesine tıkladığında, ilgili sayfanın verilerini görüntülemek için bir işlev çağrılabilir.
Ana İşlevler
- Başlangıç Değişkenleri:
page: Mevcut sayfa numarası.pageNationLissHtml: Sayfalama düğmelerinin yer alacağı HTML öğesi.
Sayfalama İşlevi (paginationFunc):
totalPages: Toplam sayfa sayısı.limitPage: Görüntülenecek maksimum sayfa düğmesi sayısı.addresHtml: Sayfa düğmelerini içerecek HTML.
Düğmelerin Yazılması (totalMemoryWrite):
startPage: Başlangıç sayfasını belirler.endPage: Bitiş sayfasını belirler.- Sayfa düğmelerini oluşturur ve ilgili HTML’ye ekler.
Düğme Tıklama Olayları:
page-minus: Önceki sayfaya gider.page-plus: Sonraki sayfaya gider.page-last: Son sayfaya gider.page-start: İlk sayfaya gider.page: Belirli bir sayfaya gider.
Bu yapı ile dinamik ve kullanıcı dostu bir sayfalama sistemi oluşturabilirsiniz. Sayfa düğmelerine tıklandığında, ilgili sayfa verilerini listelemek için kendi işlevinizi tanımlayabilirsiniz.
