Display records with Bootstrap pagination

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

The Bourne Identity (2002)

Wounded to the brink of death and suffering from amnesia, Jason Bourne is rescued at sea by a fisherman. With nothing to go on but a Swiss bank account number, he starts to reconstruct his life, but finds that many people he encounters want him dead. However, Bourne realizes that he has the combat and mental skills of a world-class spy – but who does he work for?

...

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