Display records with Bootstrap pagination

Bootstrap CSS and JS Files

<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

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;
$page_number = $_GET['page']; 
if ($page_number) 
$page_start = ($page_number - 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 ($page_number == 0) $page_number = 1;
$prev_page = $page_number - 1;
$next_page = $page_number + 1;
$last_page = ceil($total_pages/$item_display_limit);
$last_page_i = $last_page - 1;
$pagination_display = ""; 
if ($last_page > 1) { 
$pagination_display .= "<div class='pagination-container'>";
$pagination_display .= "<ul class='pagination pagination-sm justify-content-center flex-sm-wrap'>";
if ($page_number > 1) 
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$prev_page'>«</a></li>";
else
$pagination_display.= "<li class='pagination-item disabled'><a class='pagination-link' href='#'>«</a></li>"; 
if ($last_page < 7 + ($adjacents * 2)) { 
for ($page_counter = 1; $page_counter <= $last_page; $page_counter++) { 
if ($page_counter == $page_number)
$pagination_display.= "<li class='pagination-item active'><a class='pagination-link disabled' href='#'>$page_counter</a></li>"; 
else
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$page_counter'>$page_counter</a></li>"; 
} 
}
elseif($last_page > 5 + ($adjacents * 2)) {
if ($page_number < 1 + ($adjacents * 2)) {
for ($page_counter = 1; $page_counter < 4 + ($adjacents * 2); $page_counter++){
if ($page_counter == $page_number)
$pagination_display.= "<li class='pagination-item active'><a class='pagination-link disabled' href='#'>$page_counter</a></li>"; 
else
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$page_counter'>$page_counter</a></li>"; 
} 
$pagination_display.= "<span class='pagination-dots'>...</span>";
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$last_page_i'>$last_page_i</a></li>";
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$last_page'>$last_page</a></li>"; 
} 
elseif ($last_page - ($adjacents * 2) > $page_number && $page_number > ($adjacents * 2)) {
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=1'>1</a></li>";
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=2'>2</a></li>";
$pagination_display.= "<span class='pagination-dots'>...</span>";
for ($page_counter = $page_number - $adjacents; $page_counter <= $page_number + $adjacents; $page_counter++) {
if ($page_counter == $page_number)
$pagination_display.= "<li class='pagination-item active'><a class='pagination-link disabled' href='#'>$page_counter</a></li>"; 
else
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$page_counter'>$page_counter</a></li>"; 
} 
$pagination_display.= "<span class='pagination-dots'>...</span>";
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$last_page_i'>$last_page_i</a></li>";
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$last_page'>$last_page</a></li>"; 
} 
else {
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=1'>1</a></li>";
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=2'>2</a></li>";
$pagination_display.= "<span class='pagination-dots'>...</span>";
for ($page_counter = $last_page - (2 + ($adjacents * 2)); $page_counter <= $last_page; $page_counter++) {
if ($page_counter == $page_number)
$pagination_display.= "<li class='pagination-item active'><a class='pagination-link disabled' href='#'>$page_counter</a></li>"; 
else
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$page_counter'>$page_counter</a></li>"; 
} 
}
}
if ($page_number < $page_counter - 1) 
$pagination_display.= "<li class='pagination-item'><a class='pagination-link' href='$target_page?page=$next_page'>»</a></li>"; 
else
$pagination_display.= "<li class='pagination-item disabled'><a class='pagination-link disabled' href='#'>»</a></li>";
$pagination_display.= "</div>\n";
$pagination_display.= "</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="demo-pagination">
<?=$pagination_display?>
</div>

CSS

.demo-container {
margin: 0 auto;
padding: 2em;
max-width: 900px;
}

.demo-content {
padding: 1em 0;
}

.demo-content-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.69);
padding-bottom: 2px;
margin-bottom: 20px;
font-weight: 700;
}

.demo-content-body {
margin-bottom: 1em;
}

/* pagination ↓ */
.demo-pagination {
margin-top: 2em;
text-align: center;
}

.demo-pagination .pagination {
display: inline-flex;
}

.demo-pagination .pagination li {
list-style: none;
}

.demo-pagination .pagination li.pagination-item {
margin-bottom: 10px;
}

.demo-pagination .pagination li a.pagination-link {
text-decoration: none;
color: rgba(0, 0, 0, 0.60);
font-size: 22px;
font-weight: 500;
line-height: 40px;
height: 40px;
width: 40px;
padding: 4px 8px;
margin: 0 7px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.20);
}

.demo-pagination .pagination li a.pagination-link:hover,
.demo-pagination .pagination li a.pagination-link:focus {
color: rgba(0, 0, 0, 0.60);
background-color: transparent;
border-color: rgba(0, 0, 0, 0.20);
}

.demo-pagination .pagination li.active a.pagination-link:hover,
.demo-pagination .pagination li.active a.pagination-link {
color: rgba(0, 0, 0, 0.20);
background-color: rgba(229, 212, 193, 0.40);
border-color: rgba(0, 0, 0, 0.20);
}

.demo-pagination .pagination li.disabled a.pagination-link {
color: rgba(0, 0, 0, 0.20);
background-color: rgba(229, 212, 193, 0.10);
border-color: rgba(0, 0, 0, 0.10);
cursor: none;
}

.demo-pagination .pagination-dots {
color: #222222;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
padding: 6px 12px 0 6px;
}

@media only screen and (max-width: 480px) {
.demo-pagination .pagination {
font-size: 0;
display: inline-block;
}

.demo-pagination .pagination li {
display: inline-block;
vertical-align: top;
margin: 10px 0;
}
}

<script>
$(document).ready(function() {
$("#table-demo").DataTable({
paging: true,
pageLength: 4,
ordering: true,
info: false,
lengthChange: false,
language: {
search: "_INPUT_",
searchPlaceholder: "Search"
},
search: {
addClass: 'form-control input-lg col-xs-12',
},
});
});
</script>