Display records with Bootstrap pagination

Here's an example of how to display MySQL Database Records with Bootstrap Pagination and CSS Styling:

Men in Black (1997)

Men in Black follows the exploits of agents Kay and Jay, members of a top-secret organization established to monitor and police alien activity on Earth. The two Men in Black find themselves in the middle of the deadly plot by an intergalactic terrorist who has arrived on Earth to assassinate two ambassadors from opposing galaxies. In order to prevent worlds from colliding, the MiB must track down the terrorist and prevent the destruction of Earth. It's just another typical day for the Men in Black.

...

PHP

<div class="demo-container">
<?php
$conn = new mysqli ("server", "user", "password", "database");
mysqli_set_charset ($conn, "utf8");
if ($conn -> connect_error) {die ("Database Connection Error!");}

$adjacents = 2;
$query_c = "SELECT id, title, overview, popularity, date_format(release_date, '%Y') AS release_date FROM top_100_movies ORDER BY popularity DESC LIMIT 0, 140";
$result_c = mysqli_query($conn, $query_c);
$row_count = $result_c->num_rows;
$total_pages = $row_count;
$target_page = "";
$item_display_limit = 1;
$pgNr = $_GET['page']; 

if ($pgNr) 
$page_start = ($pgNr - 1) * $item_display_limit; 
else
$page_start = 0;
$query_r = "SELECT id, title, overview, popularity, date_format(release_date, '%Y') AS release_date FROM top_100_movies LIMIT $page_start, $item_display_limit";
$result_r = $conn->query($query_r); 
if ($pgNr == 0) $pgNr = 1;
$prev_page = $pgNr - 1;
$next_page = $pgNr + 1;
$last_page = ceil($total_pages/$item_display_limit);
$last_page_i = $last_page - 1;

$demoPag = ""; 

if ($last_page > 1) { 
$demoPag .= "<div class='pagination-container'>";
$demoPag .= "<ul class='pagination pagination-sm justify-content-center flex-sm-wrap'>";

if ($pgNr > 1) 
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$prev_page'>«</a></li>";

else
$demoPag.= "<li class='page-item disabled'><a class='page-link' href='#'>«</a></li>"; 

if ($last_page < 7 + ($adjacents * 2)) { 
for ($pgCount = 1; $pgCount <= $last_page; $pgCount++) { 

if ($pgCount == $pgNr)
$demoPag.= "<li class='page-item active'><a class='page-link disabled' href='#'>$pgCount</a></li>"; 

else
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$pgCount'>$pgCount</a></li>"; 
} 
}

elseif($last_page > 5 + ($adjacents * 2)) {

if ($pgNr < 1 + ($adjacents * 2)) {
for ($pgCount = 1; $pgCount < 4 + ($adjacents * 2); $pgCount++){

if ($pgCount == $pgNr)
$demoPag.= "<li class='page-item active'><a class='page-link disabled' href='#'>$pgCount</a></li>"; 

else
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$pgCount'>$pgCount</a></li>"; 
} 
$demoPag.= "<span class='pagination-dots'>...</span>";
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$last_page_i'>$last_page_i</a></li>";
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$last_page'>$last_page</a></li>"; 
} 

elseif ($last_page - ($adjacents * 2) > $pgNr && $pgNr > ($adjacents * 2)) {
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=1'>1</a></li>";
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=2'>2</a></li>";
$demoPag.= "<span class='pagination-dots'>...</span>";
for ($pgCount = $pgNr - $adjacents; $pgCount <= $pgNr + $adjacents; $pgCount++) {

if ($pgCount == $pgNr)
$demoPag.= "<li class='page-item active'><a class='page-link disabled' href='#'>$pgCount</a></li>"; 

else $demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$pgCount'>$pgCount</a></li>"; 
} 
$demoPag.= "<span class='pagination-dots'>...</span>";
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$last_page_i'>$last_page_i</a></li>";
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$last_page'>$last_page</a></li>"; 
} 

else {$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=1'>1</a></li>";
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=2'>2</a></li>";
$demoPag.= "<span class='pagination-dots'>...</span>";
for ($pgCount = $last_page - (2 + ($adjacents * 2)); $pgCount <= $last_page; $pgCount++) {

if ($pgCount == $pgNr)
$demoPag.= "<li class='page-item active'><a class='page-link disabled' href='#'>$pgCount</a></li>"; 

else $demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$pgCount'>$pgCount</a></li>"; 
} 
}
}

if ($pgNr < $pgCount - 1) 
$demoPag.= "<li class='page-item'><a class='page-link' href='$target_page?page=$next_page'>»</a></li>"; 

else $demoPag.= "<li class='page-item disabled'><a class='page-link disabled' href='#'>»</a></li>";
$demoPag.= "</div>\n";
$demoPag.= "</ul>\n"; 
}
?>

<?php
if ($result_r->num_rows > 0) {
while ($row = $result_r->fetch_assoc()) {
echo "<div class='demo-content'>"; 
echo "<div class='demo-content-header'>" . $row["title"] . " (" . $row["release_date"] . ")</div>"; 
echo "<div class='demo-content-body'>" . $row["overview"] . "</div>";
echo "</div>"; 
}
} 

else {
echo 'No Records Available';
echo "</div>"; 
} 
?>
</div>

<div class="pagination-container">
<?=$demoPag?>
</div>

Comma after each value, except the last one Display records Display records in a Bootstrap Table Display records in columns Display records with Bootstrap pagination Display records with CSS styles Escape special characters in a string Highlight the search term in results Replace unicode characters by utf-8 Search autocomplete with Typeahead Search records by an option Select rows for the current day and month Short commands