{"id":154,"date":"2025-05-04T08:14:34","date_gmt":"2025-05-04T08:14:34","guid":{"rendered":"https:\/\/www.webmobkey.com\/blog\/?p=154"},"modified":"2025-11-16T10:27:28","modified_gmt":"2025-11-16T10:27:28","slug":"bootstrap-ve-javascript-ile-sayfalama-olusturma-adim-adim-kilavuz","status":"publish","type":"post","link":"https:\/\/www.webmobdesign.com\/blog\/tr\/bootstrap-ve-javascript-ile-sayfalama-olusturma-adim-adim-kilavuz\/","title":{"rendered":"Bootstrap ve JavaScript ile Sayfalama Olu\u015fturma: Ad\u0131m Ad\u0131m K\u0131lavuz"},"content":{"rendered":"\n<p id=\"85d7\">Sayfalama, b\u00fcy\u00fck veri k\u00fcmeleriyle u\u011fra\u015f\u0131rken kullan\u0131c\u0131 deneyimini geli\u015ftiren \u00f6nemli bir web geli\u015ftirme unsurudur. \u0130\u00e7eri\u011fi y\u00f6netilebilir par\u00e7alara b\u00f6lerek kullan\u0131c\u0131lar\u0131n veriye daha kolay eri\u015fmesini sa\u011flar. Bu blog yaz\u0131s\u0131nda, Bootstrap\u2019i stil vermek ve JavaScript\u2019i i\u015flevsellik i\u00e7in kullanarak bir sayfalama sisteminin nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 \u00f6rnek bir kod ile a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"dba8\">HTML Yap\u0131s\u0131<\/h4>\n\n\n\n<p id=\"be05\">\u00d6ncelikle HTML yap\u0131s\u0131yla ba\u015flayal\u0131m. Tablo ve sayfalama d\u00fc\u011fmelerini bi\u00e7imlendirmek i\u00e7in Bootstrap kullan\u0131yoruz.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!doctype html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n    &lt;title&gt;Bootstrap demo&lt;\/title&gt;\n    &lt;link href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH&quot; crossorigin=&quot;anonymous&quot;&gt;\n  &lt;\/head&gt;\n  &lt;body class=&quot;bg-dark w-75 mx-auto my-4&quot;&gt;\n    &lt;div class=&quot;card&quot;&gt;\n        &lt;div class=&quot;card-body&quot;&gt;\n            &lt;table class=&quot;table&quot;&gt;\n                &lt;thead&gt;\n                &lt;tr&gt;\n                    &lt;th scope=&quot;col&quot;&gt;#&lt;\/th&gt;\n                    &lt;th scope=&quot;col&quot;&gt;First&lt;\/th&gt;\n                    &lt;th scope=&quot;col&quot;&gt;Last&lt;\/th&gt;\n                    &lt;th scope=&quot;col&quot;&gt;Handle&lt;\/th&gt;\n                &lt;\/tr&gt;\n                &lt;\/thead&gt;\n                &lt;tbody&gt;\n                &lt;tr&gt;\n                    &lt;th scope=&quot;row&quot;&gt;1&lt;\/th&gt;\n                    &lt;td&gt;Mark&lt;\/td&gt;\n                    &lt;td&gt;Otto&lt;\/td&gt;\n                    &lt;td&gt;@mdo&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;th scope=&quot;row&quot;&gt;2&lt;\/th&gt;\n                    &lt;td&gt;Jacob&lt;\/td&gt;\n                    &lt;td&gt;Thornton&lt;\/td&gt;\n                    &lt;td&gt;@fat&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;th scope=&quot;row&quot;&gt;3&lt;\/th&gt;\n                    &lt;td colspan=&quot;2&quot;&gt;Larry the Bird&lt;\/td&gt;\n                    &lt;td&gt;@twitter&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;\/tbody&gt;\n                &lt;tfoot&gt;\n                    &lt;tr&gt;\n                        &lt;td colspan=&quot;3&quot;&gt;\n                            &lt;div class=&quot;btn-group&quot; id=&quot;bottom-pagelist-tfoot&quot;&gt;&lt;\/div&gt;\n                        &lt;\/td&gt;\n                    &lt;\/tr&gt;\n                &lt;\/tfoot&gt;\n            &lt;\/table&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;script&gt;\nvar page = 1;\nvar pageNationLissHtml = document.querySelector(&quot;#bottom-pagelist-tfoot&quot;);\npaginationFunc();\nfunction paginationFunc() {\n    var totalPages = 11;\n    var limitPage = 10;\n    var addresHtml = &quot;&quot;;\n    totalMemoryWrite();\n\n    function totalMemoryWrite() {\n        addresHtml = &quot;&quot;;\n        var startPage = Math.max(1, page - Math.floor(limitPage \/ 2)); \/\/ Ba\u015flang\u0131\u00e7 sayfas\u0131n\u0131 belirle\n        var endPage = Math.min(startPage + limitPage - 1, totalPages); \/\/ Toplam sayfa say\u0131s\u0131n\u0131 kontrol et\n\n        if (startPage != 1 &amp;&amp; page != 1) {\n            addresHtml += `&lt;button class=&quot;btn btn-dark kurs-basvuru-page-start&quot;&gt;&lt;&lt;&lt;\/button&gt;`;\n            addresHtml += `&lt;button class=&quot;btn btn-dark kurs-basvuru-page-minus&quot;&gt;&lt;&lt;\/button&gt;`;\n        }\n        if (limitPage &lt;= totalPages) {\n            for (let i = startPage; i &lt;= endPage; i++) {\n                if (i === page) {\n                    addresHtml += `&lt;button class=&quot;btn btn-success kurs-basvuru-page kurs-basvuru-page-${i}&quot;&gt;${i}&lt;\/button&gt;`;\n                } else {\n                    addresHtml += `&lt;button class=&quot;btn btn-dark kurs-basvuru-page kurs-basvuru-page-${i}&quot;&gt;${i}&lt;\/button&gt;`;\n                }\n            }\n        } else {\n            for (let i = 1; i &lt;= totalPages; i++) {\n                if (i === page) {\n                    addresHtml += `&lt;button class=&quot;btn btn-success kurs-basvuru-page kurs-basvuru-page-${i}&quot;&gt;${i}&lt;\/button&gt;`;\n                } else {\n                    addresHtml += `&lt;button class=&quot;btn btn-dark kurs-basvuru-page kurs-basvuru-page-${i}&quot;&gt;${i}&lt;\/button&gt;`;\n                }\n            }\n        }\n        if (endPage != totalPages &amp;&amp; page != totalPages) {\n            addresHtml += `&lt;button class=&quot;btn btn-dark kurs-basvuru-page-plus&quot;&gt;&gt;&lt;\/button&gt;`;\n            addresHtml += `&lt;button class=&quot;btn btn-dark kurs-basvuru-page-last&quot;&gt;&gt;&gt;&lt;\/button&gt;`;\n        }\n        if (page == 1 &amp;&amp; totalPages == 1) {\n            pageNationLissHtml.innerHTML = &quot;&quot;;\n        } else {\n            pageNationLissHtml.innerHTML = addresHtml;\n        }\n\n        document.querySelectorAll(&quot;.kurs-basvuru-page-minus&quot;).forEach((element) =&gt; {\n            element.onclick = function() {\n                page = page - 1;\n                totalMemoryWrite();\n                \/\/ datalar\u0131 listeleyece\u011fin function\n                addresHtml = &quot;&quot;;\n            }\n        });\n\n        document.querySelectorAll(&quot;.kurs-basvuru-page-plus&quot;).forEach((element) =&gt; {\n            element.onclick = function() {\n                page = page + 1;\n                addresHtml = &quot;&quot;;\n                totalMemoryWrite();\n                \/\/ datalar\u0131 listeleyece\u011fin function\n            }\n        });\n\n        document.querySelectorAll(&quot;.kurs-basvuru-page-last&quot;).forEach((element) =&gt; {\n            element.onclick = function() {\n                page = totalPages;\n                addresHtml = &quot;&quot;;\n                totalMemoryWrite();\n                \/\/ datalar\u0131 listeleyece\u011fin function\n            }\n        });\n        document.querySelectorAll(&quot;.kurs-basvuru-page-start&quot;).forEach((element) =&gt; {\n            element.onclick = function() {\n                page = 1;\n                addresHtml = &quot;&quot;;\n                totalMemoryWrite();\n                \/\/ datalar\u0131 listeleyece\u011fin function\n            }\n        });\n\n        document.querySelectorAll(&quot;.kurs-basvuru-page&quot;).forEach((element) =&gt; {\n            element.onclick = function() {\n                document.querySelectorAll(&quot;.kurs-basvuru-page&quot;).forEach((element2) =&gt; {\n                    element2.classList.add(&quot;btn-dark&quot;);\n                    element2.classList.remove(&quot;btn-success&quot;);\n                });\n                element.classList.remove(&quot;btn-dark&quot;);\n                element.classList.add(&quot;btn-success&quot;);\n                page = Number(element.textContent);\n                addresHtml = &quot;&quot;;\n                totalMemoryWrite();\n                \/\/ datalar\u0131 listeleyece\u011fin function\n            }\n        });\n    }\n}\n&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"5936\">JavaScript ile Sayfalama \u0130\u015flevi<\/h4>\n\n\n\n<p id=\"05dd\">Bu \u00f6rnekle, sayfalama d\u00fc\u011fmelerinin dinamik olarak olu\u015fturulmas\u0131 ve sayfa numaralar\u0131n\u0131n g\u00fcncellenmesi sa\u011flan\u0131r. Kullan\u0131c\u0131 bir sayfa d\u00fc\u011fmesine t\u0131klad\u0131\u011f\u0131nda, ilgili sayfan\u0131n verilerini g\u00f6r\u00fcnt\u00fclemek i\u00e7in bir i\u015flev \u00e7a\u011fr\u0131labilir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"579e\">Ana \u0130\u015flevler<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Ba\u015flang\u0131\u00e7 De\u011fi\u015fkenleri:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>page<\/code>: Mevcut sayfa numaras\u0131.<\/li>\n\n\n\n<li><code>pageNationLissHtml<\/code>: Sayfalama d\u00fc\u011fmelerinin yer alaca\u011f\u0131 HTML \u00f6\u011fesi.<\/li>\n<\/ul>\n\n\n\n<p id=\"3d21\"><strong>Sayfalama \u0130\u015flevi (<code>paginationFunc<\/code>):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>totalPages<\/code>: Toplam sayfa say\u0131s\u0131.<\/li>\n\n\n\n<li><code>limitPage<\/code>: G\u00f6r\u00fcnt\u00fclenecek maksimum sayfa d\u00fc\u011fmesi say\u0131s\u0131.<\/li>\n\n\n\n<li><code>addresHtml<\/code>: Sayfa d\u00fc\u011fmelerini i\u00e7erecek HTML.<\/li>\n<\/ul>\n\n\n\n<p id=\"7051\"><strong>D\u00fc\u011fmelerin Yaz\u0131lmas\u0131 (<\/strong><code><strong>totalMemoryWrite<\/strong><\/code><strong>):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>startPage<\/code>: Ba\u015flang\u0131\u00e7 sayfas\u0131n\u0131 belirler.<\/li>\n\n\n\n<li><code>endPage<\/code>: Biti\u015f sayfas\u0131n\u0131 belirler.<\/li>\n\n\n\n<li>Sayfa d\u00fc\u011fmelerini olu\u015fturur ve ilgili HTML\u2019ye ekler.<\/li>\n<\/ul>\n\n\n\n<p id=\"00af\"><strong>D\u00fc\u011fme T\u0131klama Olaylar\u0131:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>page-minus<\/code>: \u00d6nceki sayfaya gider.<\/li>\n\n\n\n<li><code>page-plus<\/code>: Sonraki sayfaya gider.<\/li>\n\n\n\n<li><code>page-last<\/code>: Son sayfaya gider.<\/li>\n\n\n\n<li><code>page-start<\/code>: \u0130lk sayfaya gider.<\/li>\n\n\n\n<li><code>page<\/code>: Belirli bir sayfaya gider.<\/li>\n<\/ul>\n\n\n\n<p id=\"87d5\">Bu yap\u0131 ile dinamik ve kullan\u0131c\u0131 dostu bir sayfalama sistemi olu\u015fturabilirsiniz. Sayfa d\u00fc\u011fmelerine t\u0131kland\u0131\u011f\u0131nda, ilgili sayfa verilerini listelemek i\u00e7in kendi i\u015flevinizi tan\u0131mlayabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sayfalama, b\u00fcy\u00fck veri k\u00fcmeleriyle u\u011fra\u015f\u0131rken kullan\u0131c\u0131 deneyimini geli\u015ftiren \u00f6nemli bir web geli\u015ftirme unsurudur. \u0130\u00e7eri\u011fi y\u00f6netilebilir par\u00e7alara &hellip; <a title=\"Bootstrap ve JavaScript ile Sayfalama Olu\u015fturma: Ad\u0131m Ad\u0131m K\u0131lavuz\" class=\"hm-read-more\" href=\"https:\/\/www.webmobdesign.com\/blog\/tr\/bootstrap-ve-javascript-ile-sayfalama-olusturma-adim-adim-kilavuz\/\"><span class=\"screen-reader-text\">Bootstrap ve JavaScript ile Sayfalama Olu\u015fturma: Ad\u0131m Ad\u0131m K\u0131lavuz<\/span>Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","hentry","category-web-tr"],"_links":{"self":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":1,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}