Logo Luan Morina
   Display records with Bootstrap pagination
Gladiator (2000)
In the year 180, the death of emperor Marcus Aurelius throws the Roman Empire into chaos. Maximus is one of the Roman army's most capable and trusted generals and a key advisor to the emperor. As Marcus' devious son Commodus ascends to the throne, Maximus is set to be executed. He escapes, but is captured by slave traders. Renamed Spaniard and forced to become a gladiator, Maximus must battle to the death with other men for the amusement of paying audiences. His battle skills serve him well, and he becomes one of the most famous and admired men to fight in the Colosseum. Determined to avenge himself against the man who took away his freedom and laid waste to his family, Maximus believes that he can use his fame and skill in the ring to avenge the loss of his family and former glory. As the gladiator begins to challenge his rule, Commodus decides to put his own fighting mettle to the test by squaring off with Maximus in a battle to the death.
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;
}
}
JS
<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>
   Display records with Bootstrap pagination
Change column position Convert values of a column to lowercase Count the number of rows in a table Display records Display records as columns Display records in a Bootstrap Table
Display records with Bootstrap pagination Display records with CSS styles Escape all special characters in a string Highlight the search term in the search results Comma after each record, except after the last one Replace unicode characters by utf-8 characters
Search autocomplete with Bootstrap Typeahead Search records by an option Select table rows with the current day and month Strip HTML tags