04-28-2022, 10:51 AM
Bootstrap Pagination Example in PHP
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/04/bootstrap-pagination-example-in-php.jpg" width="250" height="61" title="" alt="" /></div><div><div class="modified-on" readability="7.0909090909091"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on April 27th, 2022.</div>
<p>Bootstrap gives built-in UI components to build websites easier. Here we go with Bootstrap pagination implementation in a project.</p>
<p>Pagination is an essential component of web pages listing voluminous data. It will guide how PHP pagination helps to navigate among <a href="https://phppot.com/php/how-to-batch-import-huge-csv-fast-using-php-million-records-in-seconds/">pages of batched results</a>.</p>
<div class="post-section-highlight" readability="40.584782608696">
<h2>Quick example</h2>
<p>See this example shows a static Bootstrap pagination HTML. By knowing this structure, it is simple then to load and <a href="https://phppot.com/php/loop-control-structure/">loop through the dynamic result</a>.</p>
<pre class="prettyprint"><html>
<head>
<title>Quick example - Bootstrap pagination</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
</nav>
</body>
</html>
</pre>
<p>It renders the pagination links like,</p>
<p><img loading="lazy" class="alignnone size-full wp-image-16494" src="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-links.jpg" alt="bootstrap pagination links" width="250" height="61"></p>
</div>
<h2>Bootstrap pagination in PHP with database</h2>
<p>If you are looking for a Bootstrap pagination script with <a href="https://phppot.com/mysql/access-mysql-from-php/">PHP and MySQL database</a>, then get started. In this article, we are going to implement a Bootstrap-enabled PHP pagination.</p>
<p>It is used to read page results from the database. Then it allows page-to-page navigation using the <a href="https://phppot.com/bootstrap/bootstrap-sticky-navbar/">Bootstrap <em>nav</em> links</a>. This example renders pagination with or without previous and next links.</p>
<p>It uses a <a href="https://getbootstrap.com/docs/5.1/getting-started/introduction/" target="_blank" rel="noopener">recommended CDN URL to load Bootstrap CSS</a> for the pagination components.</p>
<p>Follow the below steps to add pagination for a list in PHP.</p>
<ol>
<li>Create the database structure and load sample data.</li>
<li>Configure and map the database results to the pagination component.</li>
<li>Compute variables like start, limit and current page number to generate pagination links.</li>
<li>Highlight the current page and among the clickable pagination links.</li>
</ol>
<h3>File structure</h3>
<p>The below screenshot shows the file structure of the bootstrap pagination example. It shows a clear way of building the pagination component in PHP. This simple structure makes the learners understand the code flow easily.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-16540" src="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-files.jpg" alt width="223" height="202"></p>
<h2>Database Script</h2>
<p>The below script is used to add data to the database. <a href="https://phppot.com/php/how-to-import-sql-into-a-database-using-php/">Import this SQL</a> to have the table structure and sample data. It will help to see the pagination result on the screen while running this example.</p>
<p class="code-heading">structure.sql</p>
<pre class="prettyprint"><code class="language-sql"> --
-- Database: `bootstrap_pagination`
-- -- -------------------------------------------------------- --
-- Table structure for table `tbl_product`
-- CREATE TABLE `tbl_product` ( `id` int(11) NOT NULL, `product_name` varchar(255) NOT NULL, `price` varchar(255) NOT NULL, `model` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; --
-- Dumping data for table `tbl_product`
-- INSERT INTO `tbl_product` (`id`, `product_name`, `price`, `model`) VALUES
(1, 'GIZMORE Multimedia Speaker with Remote Control, Black', '€15.72', '2020'),
(2, 'Black Google Nest Mini', '€41.11', '2021'),
(3, 'Black Digital Hand Band, Packaging Type: Box', '€21.77', '2019'),
(4, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '€356.59', '2021'),
(5, 'JBL Airpods', '€27.81', '2020'),
(6, 'Black Google Nest Mini', '€41.11', '2021'),
(7, 'Black Digital Hand Band, Packaging Type: Box', '€21.77', '2019'),
(8, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '€356.59', '2021'),
(9, 'Dell New Inspiron 3515 Laptop', '€537.48', '2021'); --
-- Indexes for dumped tables
-- --
-- Indexes for table `tbl_product`
--
ALTER TABLE `tbl_product` ADD PRIMARY KEY (`id`); --
-- AUTO_INCREMENT for dumped tables
-- --
-- AUTO_INCREMENT for table `tbl_product`
--
ALTER TABLE `tbl_product` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
</code></pre>
<h2>Designing HTML page with Bootstrap styles</h2>
<p>This HTML page shows the database results with a bootstrap pagination navbar. It includes no external CSS. This design completely depends on Bootstrap CSS.</p>
<p>It connects PHP model to fetch the database results. This HTML has the embedded PHP loop to iterate the results. It displays the database results in a <a href="https://phppot.com/jquery/responsive-datatables-with-automatic-column-hiding/">tabular view with a limited number of rows</a> as configured.</p>
<p>It shows a dropdown to choose pagination styles. This example provides two types of pagination navbar with or without the <a href="https://phppot.com/php/how-to-add-pagination-in-php-with-mysql/">previous next links</a>.</p>
<p>The page links and style type are passed to the page URL. These params are used to build the Bootstrap pagination navbar using <em>Common</em><em>.php</em> file.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-sql">
<?php
namespace Phppot; use Phppot\DataSource;
require_once __DIR__ . '/lib/Question.php';
$question = new Question();
$result = $question->getAllProducts();
?>
<html>
<head>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="assets/js/product.js"></script>
</head>
<body> <div class="container"> <div class="container pt-5"> <h2 class="text-center heading py-3">Bootstrap Pagination</h2> <table class="table table-bordered" id="table"> <tr> <th>SL.No</th> <th>Product Name</th> <th class="text-end">Price</th> <th>Model</th> </tr> <?php $questions = $result; if (is_array($questions)) { for ($i = 0; $i < count($questions) - 1; $i ++) { ?> <tr> <td><?php echo $questions[$i]["id"];?></td> <td><?php echo $questions[$i]["product_name"];?></td> <td class="text-end"><?php echo $questions[$i]["price"];?></td> <td><?php echo $questions[$i]["model"];?></td> </tr> <?php }}?> </table> </div> </div> <div class="container"> <div class="container py-3"> <div class="row"> <div class="col-md-3 text-left"> <select class="form-select d-inline-block" name="navyOp" id="select" onchange="change_url(this.value);"> <option value="">Bootstrap Pagination Style</option> <option value="prev-next-link" <?php if (! empty($_GET['type']) && $_GET['type'] == "prev-next-link") { echo "selected"; } ?>>With previous next</option> <option value="number-link" <?php if (! empty($_GET['type']) && $_GET['type'] == "number-link") { echo "selected"; } ?>>With numbers</option> </select> </div> <div class="col-md-9 text-right"> <nav aria-label="Page navigation example"> <ul class="pagination float-end " id="previous-next"> <?php echo $result["perpage"];?> </ul> </nav> </div> </div> </div> </div>
</body>
</html></code></pre>
<h3>Pass pagination style via Javascript</h3>
<p>This simple JavaScript function is to pass the chosen pagination style to the URL. On changing the dropdown value, it calls the JavaScript <em>change_url()</em> by passing the chosen style.</p>
<p class="code-heading">assets/js/product.js</p>
<pre class="prettyprint"><code class="language-html"> function change_url(val) { window.location.href = "index.php?type=" + val;
}</code></pre>
<h2>Show pagination results via PHP</h2>
<p>This is the PHP model class that contains functions to get paginated results.</p>
<p>The <em>getAllProducts()</em> function is initially called to prepare the SQL query. It sets the <a href="https://phppot.com/php/php-pagination-search/">pagination start and limit parameters</a> for the query.</p>
<p>It uses the per page limit from the config file. It computes the starting point by using the current page number from the URL query string.</p>
<p>It prepares the parameters used to show Bootstrap pagination to the browser. Those are,</p>
<ol>
<li>Total record count – to calculate the number of pages to create the links.</li>
<li>Per page limit – as configured in the config file to set the pagination loop limit.</li>
<li>Base URL – to set the base URL with a query string to append the pagination parameters.</li>
</ol>
<p>With the above parameters the <em>getAllProducts()</em> functions calls the <em>showperpage()</em> function in <em>Common.php</em>.</p>
<p class="code-heading">Question.php</p>
<pre class="prettyprint"><code class="language-sql"> &lt;?php
namespace Phppot; use Phppot\DataSource;
use Phppot\Common;
use Phppot\Config; class Question
{ private $conn; function __construct() { require_once 'DataSource.php'; require_once 'Common.php'; require_once 'Config.php'; $this-&gt;conn = new DataSource(); $this-&gt;common = new Common(); $this-&gt;config = new Config(); } public function getAllProducts() { $sql = &quot;SELECT * FROM tbl_product&quot;; $perpage = $this-&gt;config::PER_PAGE_LIMIT; $currentPage = 1; if (isset($_GET['pageNumber'])) { $currentPage = $_GET['pageNumber']; } $startPage = ($currentPage - 1) * $perpage; $href = &quot;index.php?&quot;; if (! empty($_GET['type']) &amp;&amp; $_GET['type'] == &quot;prev-next-link&quot;) { $href = $href . &quot;type=prev-next-link&amp;&quot;; } else { $href = $href . &quot;type=number-link&amp;&quot;; } if ($startPage &lt; 0) { $startPage = 0; } $query = $sql . &quot; limit &quot; . $startPage . &quot;,&quot; . $perpage; $result = $this-&gt;conn-&gt;select($query); if (! empty($result)) { $count = $this-&gt;conn-&gt;getRecordCount($sql); $result[&quot;perpage&quot;] = $this-&gt;common-&gt;showperpage($count, $perpage, $href); } return $result; }
}
?&gt;</code></pre>
<h3>Application configuration</h3>
<p>This config file defines the constant to set the per-page limit. This is to have a uniform limit to show the number of records across the application.</p>
<p class="code-heading">Config.php</p>
<pre class="prettyprint"><code class="language-html"> <?php namespace Phppot; class Config { const PER_PAGE_LIMIT = '2'; } ?></code></pre>
<h2>Create Bootstrap pagination links in HTML using PHP</h2>
<p>This <em>Common</em> PHP class includes the Bootstrap pagination-related functions.</p>
<p>It prepares the unordered pagination link list in a Bootstrap nav container.</p>
<p>The <em>pagination()</em> function receives the <em>$count</em>, <em>$perpage</em> and <em>$href</em> parameters. It uses <em>$href</em> as the base URL. It gets the current page from the query string.</p>
<p>It prepares the pagination URL by connecting the base URL and the pagination parameters.</p>
<p>If the pagination loop index points to the current page, then no link will be provided to that particular instance. And also, it highlights that instance to mark as an active page.</p>
<p>It displays the previous and next links on a conditional basis. This condition is based on the selected option of the Bootstrap pagination UI style chosen from the dropdown.</p>
<p>This example contains shortened pagination links. It helps to have a good look even if there are more pages. It avoids <a href="https://phppot.com/jquery/how-to-create-horizontal-scrolling-menu-using-jquery-and-php/">horizontal scrolling</a> or wrapping.</p>
<p class="code-heading">Common.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
namespace Phppot; use Phppot\Config; class Common
{ private $conn; function __construct() { require_once 'DataSource.php'; require_once 'Config.php'; $this->conn = new DataSource(); $this->config = new Config(); } function pagination($count, $perpage, $href) { $output = ''; $perpage = $this->config::PER_PAGE_LIMIT; $srOnly = "visually-hidden"; if (! empty($_GET['type']) && $_GET['type'] == "prev-next-link") { $srOnly = ""; } if (! isset($_REQUEST["pageNumber"])) $_REQUEST["pageNumber"] = 1; if ($perpage != 0) $pages = ceil($count / $perpage); // if pages exists after loop's lower limit if ($pages > 1) { if ($_REQUEST["pageNumber"] > 1) { $previousPage = $_REQUEST["pageNumber"] - 1; $output = $output . '<li class="page-item ' . $srOnly . '"><a href="' . $href . 'pageNumber=' . $previousPage . '"class="page-link text-dark">Previous</a></li>'; } else { $output = $output . '<li class="page-item ' . $srOnly . '" disabled><a href=""class="page-link text-dark">Previous</a></li>'; } if (($_REQUEST["pageNumber"] - 3) > 0) { $output = $output . '<li class="page-item "><a href="' . $href . 'pageNumber=1" class="page-link text-dark">1</a></li>'; } if (($_REQUEST["pageNumber"] - 3) > 1) { $output = $output . '<span class="mx-1">...</span>'; } // Loop for provides links for 2 pages before and after current page for ($i = ($_REQUEST["pageNumber"] - 2); $i <= ($_REQUEST["pageNumber"] + 2); $i ++) { if ($i < 1) continue; if ($i > $pages) break; if ($_REQUEST["pageNumber"] == $i) $output = $output . '<li class="page-item active"><a class="page-link" id=' . $i . '>' . $i . '</a></li>'; else $output = $output . '<li class="page-item"><a href="' . $href . "pageNumber=" . $i . '" class="page-link text-dark">' . $i . '</a></li>'; } // if pages exists after loop's upper limit if (($pages - ($_REQUEST["pageNumber"] + 2)) > 1) { $output = $output . '<span class="mx-1">...</span>'; } if (($pages - ($_REQUEST["pageNumber"] + 2)) > 0) { if ($_REQUEST["pageNumber"] == $pages) $output = $output . '<li class="page-item"><a id=' . ($pages) . ' class="page-link text-dark">' . ($pages) . '</a></li>'; else $output = $output . '<li class="page-item"><a href="' . $href . "pageNumber=" . ($pages) . '" class="page-link text-dark">' . ($pages) . '</a></li>'; } if ($_REQUEST["pageNumber"] < $pages) { $nextPage = $_REQUEST["pageNumber"] + 1; $output = $output . '<li class="page-item ' . $srOnly . '"><a href="' . $href . 'pageNumber=' . $nextPage . '"class="page-link text-dark">Next</a></li>'; } else { $output = $output . '<li class="page-item ' . $srOnly . '" disabled><a href=""class="page-link text-dark">Next</a></li>'; } } return $output; } // function calculate total records count and trigger pagination function function showperpage($count, $per_page = "3", $href) { $perpage = $this->pagination($count, $per_page, $href); return $perpage; }
}
?></code></pre>
<h2>Output: Bootstrap Pagination</h2>
<p>The below screenshot shows the output of this Bootstrap pagination example. It displays with an amazing select option with an HTML dropdown.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-16684" src="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-550x186.jpg" alt="bootstrap pagination" width="550" height="186" srcset="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-550x186.jpg 550w, https://phppot.com/wp-content/uploads/20...00x101.jpg 300w, https://phppot.com/wp-content/uploads/20...68x259.jpg 768w, https://phppot.com/wp-content/uploads/20...nation.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><a class="download" href="https://phppot.com/downloads/bootstrap-pagination.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/bootstrap/bootstrap-pagination/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/04/...le-in-php/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/04/bootstrap-pagination-example-in-php.jpg" width="250" height="61" title="" alt="" /></div><div><div class="modified-on" readability="7.0909090909091"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on April 27th, 2022.</div>
<p>Bootstrap gives built-in UI components to build websites easier. Here we go with Bootstrap pagination implementation in a project.</p>
<p>Pagination is an essential component of web pages listing voluminous data. It will guide how PHP pagination helps to navigate among <a href="https://phppot.com/php/how-to-batch-import-huge-csv-fast-using-php-million-records-in-seconds/">pages of batched results</a>.</p>
<div class="post-section-highlight" readability="40.584782608696">
<h2>Quick example</h2>
<p>See this example shows a static Bootstrap pagination HTML. By knowing this structure, it is simple then to load and <a href="https://phppot.com/php/loop-control-structure/">loop through the dynamic result</a>.</p>
<pre class="prettyprint"><html>
<head>
<title>Quick example - Bootstrap pagination</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
</nav>
</body>
</html>
</pre>
<p>It renders the pagination links like,</p>
<p><img loading="lazy" class="alignnone size-full wp-image-16494" src="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-links.jpg" alt="bootstrap pagination links" width="250" height="61"></p>
</div>
<h2>Bootstrap pagination in PHP with database</h2>
<p>If you are looking for a Bootstrap pagination script with <a href="https://phppot.com/mysql/access-mysql-from-php/">PHP and MySQL database</a>, then get started. In this article, we are going to implement a Bootstrap-enabled PHP pagination.</p>
<p>It is used to read page results from the database. Then it allows page-to-page navigation using the <a href="https://phppot.com/bootstrap/bootstrap-sticky-navbar/">Bootstrap <em>nav</em> links</a>. This example renders pagination with or without previous and next links.</p>
<p>It uses a <a href="https://getbootstrap.com/docs/5.1/getting-started/introduction/" target="_blank" rel="noopener">recommended CDN URL to load Bootstrap CSS</a> for the pagination components.</p>
<p>Follow the below steps to add pagination for a list in PHP.</p>
<ol>
<li>Create the database structure and load sample data.</li>
<li>Configure and map the database results to the pagination component.</li>
<li>Compute variables like start, limit and current page number to generate pagination links.</li>
<li>Highlight the current page and among the clickable pagination links.</li>
</ol>
<h3>File structure</h3>
<p>The below screenshot shows the file structure of the bootstrap pagination example. It shows a clear way of building the pagination component in PHP. This simple structure makes the learners understand the code flow easily.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-16540" src="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-files.jpg" alt width="223" height="202"></p>
<h2>Database Script</h2>
<p>The below script is used to add data to the database. <a href="https://phppot.com/php/how-to-import-sql-into-a-database-using-php/">Import this SQL</a> to have the table structure and sample data. It will help to see the pagination result on the screen while running this example.</p>
<p class="code-heading">structure.sql</p>
<pre class="prettyprint"><code class="language-sql"> --
-- Database: `bootstrap_pagination`
-- -- -------------------------------------------------------- --
-- Table structure for table `tbl_product`
-- CREATE TABLE `tbl_product` ( `id` int(11) NOT NULL, `product_name` varchar(255) NOT NULL, `price` varchar(255) NOT NULL, `model` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; --
-- Dumping data for table `tbl_product`
-- INSERT INTO `tbl_product` (`id`, `product_name`, `price`, `model`) VALUES
(1, 'GIZMORE Multimedia Speaker with Remote Control, Black', '€15.72', '2020'),
(2, 'Black Google Nest Mini', '€41.11', '2021'),
(3, 'Black Digital Hand Band, Packaging Type: Box', '€21.77', '2019'),
(4, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '€356.59', '2021'),
(5, 'JBL Airpods', '€27.81', '2020'),
(6, 'Black Google Nest Mini', '€41.11', '2021'),
(7, 'Black Digital Hand Band, Packaging Type: Box', '€21.77', '2019'),
(8, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '€356.59', '2021'),
(9, 'Dell New Inspiron 3515 Laptop', '€537.48', '2021'); --
-- Indexes for dumped tables
-- --
-- Indexes for table `tbl_product`
--
ALTER TABLE `tbl_product` ADD PRIMARY KEY (`id`); --
-- AUTO_INCREMENT for dumped tables
-- --
-- AUTO_INCREMENT for table `tbl_product`
--
ALTER TABLE `tbl_product` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
</code></pre>
<h2>Designing HTML page with Bootstrap styles</h2>
<p>This HTML page shows the database results with a bootstrap pagination navbar. It includes no external CSS. This design completely depends on Bootstrap CSS.</p>
<p>It connects PHP model to fetch the database results. This HTML has the embedded PHP loop to iterate the results. It displays the database results in a <a href="https://phppot.com/jquery/responsive-datatables-with-automatic-column-hiding/">tabular view with a limited number of rows</a> as configured.</p>
<p>It shows a dropdown to choose pagination styles. This example provides two types of pagination navbar with or without the <a href="https://phppot.com/php/how-to-add-pagination-in-php-with-mysql/">previous next links</a>.</p>
<p>The page links and style type are passed to the page URL. These params are used to build the Bootstrap pagination navbar using <em>Common</em><em>.php</em> file.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-sql">
<?php
namespace Phppot; use Phppot\DataSource;
require_once __DIR__ . '/lib/Question.php';
$question = new Question();
$result = $question->getAllProducts();
?>
<html>
<head>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="assets/js/product.js"></script>
</head>
<body> <div class="container"> <div class="container pt-5"> <h2 class="text-center heading py-3">Bootstrap Pagination</h2> <table class="table table-bordered" id="table"> <tr> <th>SL.No</th> <th>Product Name</th> <th class="text-end">Price</th> <th>Model</th> </tr> <?php $questions = $result; if (is_array($questions)) { for ($i = 0; $i < count($questions) - 1; $i ++) { ?> <tr> <td><?php echo $questions[$i]["id"];?></td> <td><?php echo $questions[$i]["product_name"];?></td> <td class="text-end"><?php echo $questions[$i]["price"];?></td> <td><?php echo $questions[$i]["model"];?></td> </tr> <?php }}?> </table> </div> </div> <div class="container"> <div class="container py-3"> <div class="row"> <div class="col-md-3 text-left"> <select class="form-select d-inline-block" name="navyOp" id="select" onchange="change_url(this.value);"> <option value="">Bootstrap Pagination Style</option> <option value="prev-next-link" <?php if (! empty($_GET['type']) && $_GET['type'] == "prev-next-link") { echo "selected"; } ?>>With previous next</option> <option value="number-link" <?php if (! empty($_GET['type']) && $_GET['type'] == "number-link") { echo "selected"; } ?>>With numbers</option> </select> </div> <div class="col-md-9 text-right"> <nav aria-label="Page navigation example"> <ul class="pagination float-end " id="previous-next"> <?php echo $result["perpage"];?> </ul> </nav> </div> </div> </div> </div>
</body>
</html></code></pre>
<h3>Pass pagination style via Javascript</h3>
<p>This simple JavaScript function is to pass the chosen pagination style to the URL. On changing the dropdown value, it calls the JavaScript <em>change_url()</em> by passing the chosen style.</p>
<p class="code-heading">assets/js/product.js</p>
<pre class="prettyprint"><code class="language-html"> function change_url(val) { window.location.href = "index.php?type=" + val;
}</code></pre>
<h2>Show pagination results via PHP</h2>
<p>This is the PHP model class that contains functions to get paginated results.</p>
<p>The <em>getAllProducts()</em> function is initially called to prepare the SQL query. It sets the <a href="https://phppot.com/php/php-pagination-search/">pagination start and limit parameters</a> for the query.</p>
<p>It uses the per page limit from the config file. It computes the starting point by using the current page number from the URL query string.</p>
<p>It prepares the parameters used to show Bootstrap pagination to the browser. Those are,</p>
<ol>
<li>Total record count – to calculate the number of pages to create the links.</li>
<li>Per page limit – as configured in the config file to set the pagination loop limit.</li>
<li>Base URL – to set the base URL with a query string to append the pagination parameters.</li>
</ol>
<p>With the above parameters the <em>getAllProducts()</em> functions calls the <em>showperpage()</em> function in <em>Common.php</em>.</p>
<p class="code-heading">Question.php</p>
<pre class="prettyprint"><code class="language-sql"> &lt;?php
namespace Phppot; use Phppot\DataSource;
use Phppot\Common;
use Phppot\Config; class Question
{ private $conn; function __construct() { require_once 'DataSource.php'; require_once 'Common.php'; require_once 'Config.php'; $this-&gt;conn = new DataSource(); $this-&gt;common = new Common(); $this-&gt;config = new Config(); } public function getAllProducts() { $sql = &quot;SELECT * FROM tbl_product&quot;; $perpage = $this-&gt;config::PER_PAGE_LIMIT; $currentPage = 1; if (isset($_GET['pageNumber'])) { $currentPage = $_GET['pageNumber']; } $startPage = ($currentPage - 1) * $perpage; $href = &quot;index.php?&quot;; if (! empty($_GET['type']) &amp;&amp; $_GET['type'] == &quot;prev-next-link&quot;) { $href = $href . &quot;type=prev-next-link&amp;&quot;; } else { $href = $href . &quot;type=number-link&amp;&quot;; } if ($startPage &lt; 0) { $startPage = 0; } $query = $sql . &quot; limit &quot; . $startPage . &quot;,&quot; . $perpage; $result = $this-&gt;conn-&gt;select($query); if (! empty($result)) { $count = $this-&gt;conn-&gt;getRecordCount($sql); $result[&quot;perpage&quot;] = $this-&gt;common-&gt;showperpage($count, $perpage, $href); } return $result; }
}
?&gt;</code></pre>
<h3>Application configuration</h3>
<p>This config file defines the constant to set the per-page limit. This is to have a uniform limit to show the number of records across the application.</p>
<p class="code-heading">Config.php</p>
<pre class="prettyprint"><code class="language-html"> <?php namespace Phppot; class Config { const PER_PAGE_LIMIT = '2'; } ?></code></pre>
<h2>Create Bootstrap pagination links in HTML using PHP</h2>
<p>This <em>Common</em> PHP class includes the Bootstrap pagination-related functions.</p>
<p>It prepares the unordered pagination link list in a Bootstrap nav container.</p>
<p>The <em>pagination()</em> function receives the <em>$count</em>, <em>$perpage</em> and <em>$href</em> parameters. It uses <em>$href</em> as the base URL. It gets the current page from the query string.</p>
<p>It prepares the pagination URL by connecting the base URL and the pagination parameters.</p>
<p>If the pagination loop index points to the current page, then no link will be provided to that particular instance. And also, it highlights that instance to mark as an active page.</p>
<p>It displays the previous and next links on a conditional basis. This condition is based on the selected option of the Bootstrap pagination UI style chosen from the dropdown.</p>
<p>This example contains shortened pagination links. It helps to have a good look even if there are more pages. It avoids <a href="https://phppot.com/jquery/how-to-create-horizontal-scrolling-menu-using-jquery-and-php/">horizontal scrolling</a> or wrapping.</p>
<p class="code-heading">Common.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
namespace Phppot; use Phppot\Config; class Common
{ private $conn; function __construct() { require_once 'DataSource.php'; require_once 'Config.php'; $this->conn = new DataSource(); $this->config = new Config(); } function pagination($count, $perpage, $href) { $output = ''; $perpage = $this->config::PER_PAGE_LIMIT; $srOnly = "visually-hidden"; if (! empty($_GET['type']) && $_GET['type'] == "prev-next-link") { $srOnly = ""; } if (! isset($_REQUEST["pageNumber"])) $_REQUEST["pageNumber"] = 1; if ($perpage != 0) $pages = ceil($count / $perpage); // if pages exists after loop's lower limit if ($pages > 1) { if ($_REQUEST["pageNumber"] > 1) { $previousPage = $_REQUEST["pageNumber"] - 1; $output = $output . '<li class="page-item ' . $srOnly . '"><a href="' . $href . 'pageNumber=' . $previousPage . '"class="page-link text-dark">Previous</a></li>'; } else { $output = $output . '<li class="page-item ' . $srOnly . '" disabled><a href=""class="page-link text-dark">Previous</a></li>'; } if (($_REQUEST["pageNumber"] - 3) > 0) { $output = $output . '<li class="page-item "><a href="' . $href . 'pageNumber=1" class="page-link text-dark">1</a></li>'; } if (($_REQUEST["pageNumber"] - 3) > 1) { $output = $output . '<span class="mx-1">...</span>'; } // Loop for provides links for 2 pages before and after current page for ($i = ($_REQUEST["pageNumber"] - 2); $i <= ($_REQUEST["pageNumber"] + 2); $i ++) { if ($i < 1) continue; if ($i > $pages) break; if ($_REQUEST["pageNumber"] == $i) $output = $output . '<li class="page-item active"><a class="page-link" id=' . $i . '>' . $i . '</a></li>'; else $output = $output . '<li class="page-item"><a href="' . $href . "pageNumber=" . $i . '" class="page-link text-dark">' . $i . '</a></li>'; } // if pages exists after loop's upper limit if (($pages - ($_REQUEST["pageNumber"] + 2)) > 1) { $output = $output . '<span class="mx-1">...</span>'; } if (($pages - ($_REQUEST["pageNumber"] + 2)) > 0) { if ($_REQUEST["pageNumber"] == $pages) $output = $output . '<li class="page-item"><a id=' . ($pages) . ' class="page-link text-dark">' . ($pages) . '</a></li>'; else $output = $output . '<li class="page-item"><a href="' . $href . "pageNumber=" . ($pages) . '" class="page-link text-dark">' . ($pages) . '</a></li>'; } if ($_REQUEST["pageNumber"] < $pages) { $nextPage = $_REQUEST["pageNumber"] + 1; $output = $output . '<li class="page-item ' . $srOnly . '"><a href="' . $href . 'pageNumber=' . $nextPage . '"class="page-link text-dark">Next</a></li>'; } else { $output = $output . '<li class="page-item ' . $srOnly . '" disabled><a href=""class="page-link text-dark">Next</a></li>'; } } return $output; } // function calculate total records count and trigger pagination function function showperpage($count, $per_page = "3", $href) { $perpage = $this->pagination($count, $per_page, $href); return $perpage; }
}
?></code></pre>
<h2>Output: Bootstrap Pagination</h2>
<p>The below screenshot shows the output of this Bootstrap pagination example. It displays with an amazing select option with an HTML dropdown.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-16684" src="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-550x186.jpg" alt="bootstrap pagination" width="550" height="186" srcset="https://phppot.com/wp-content/uploads/2022/04/bootstrap-pagination-550x186.jpg 550w, https://phppot.com/wp-content/uploads/20...00x101.jpg 300w, https://phppot.com/wp-content/uploads/20...68x259.jpg 768w, https://phppot.com/wp-content/uploads/20...nation.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><a class="download" href="https://phppot.com/downloads/bootstrap-pagination.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/bootstrap/bootstrap-pagination/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/04/...le-in-php/