Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Pagination using Datatables
We can use the pagination technique to show large amounts of data in smaller chunks. For example, online stores like Amazon and Flipkart list millions of products. So, if they don't use the pagination technique to show data, users need to scroll through the end of the web page to check the last product.
In the Pagination technique, we show a particular amount of data on a single page. For example, if we set the 100 as a page length, users can see the first 100 products on the first page, another 100 on the second page, and so on. In jQuery, the Datatables plugin is used to format the HTML table data and allows adding the functionality of pagination.
Syntax
Users can follow the syntax below to add pagination to the table using the Datatables API
$('selector').DataTable({
"paging": boolean,
"pageLength": number
});
In the above syntax, users can use the 'true' or 'false' boolean value to show or hide the pagination. The pageLength property specifies the total number of entries to show on a single page.
Example 1: Basic Pagination with Custom Page Length
In the example below, we created a table of car data with pagination enabled. We set the page length to 3 items per page
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<style>
.car-table {
width: 100%;
margin: 20px 0;
}
</style>
</head>
<body>
<h2>Using Datatables to show pagination in the table</h2>
<div class="car-table">
<table id="car">
<thead>
<tr>
<th>Brand</th>
<th>Model</th>
<th>Year</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota</td>
<td>Auris</td>
<td>2017</td>
<td>Japan</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2016</td>
<td>Japan</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2018</td>
<td>Japan</td>
</tr>
<tr>
<td>Tata</td>
<td>Nexon</td>
<td>2022</td>
<td>India</td>
</tr>
<tr>
<td>Maruti</td>
<td>Baleno</td>
<td>2019</td>
<td>India</td>
</tr>
<tr>
<td>Maruti</td>
<td>Swift</td>
<td>2017</td>
<td>India</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Verna</td>
<td>2018</td>
<td>South Korea</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$('#car').DataTable({
"paging": true,
"pageLength": 3
});
});
</script>
</body>
</html>
A table with car data is displayed with pagination controls at the bottom. Only 3 rows are shown at a time, with navigation buttons for Previous, Next, and page numbers.
Example 2: Default Pagination with Dynamic Data
In the example below, we create a table dynamically using JavaScript and apply default DataTable pagination settings
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<style>
.food-table {
width: 100%;
margin: 20px 0;
}
</style>
</head>
<body>
<h2>Using Datatables with default pagination settings</h2>
<div class="food-table">
<table id="food">
<thead>
<tr>
<th>Food</th>
<th>Calories</th>
<th>Fat</th>
<th>Carbs</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
const foods = [
{ name: "Bread", calories: 100, fat: 10, carbs: 20 },
{ name: "Butter", calories: 50, fat: 5, carbs: 10 },
{ name: "Avocado", calories: 500, fat: 50, carbs: 60 },
{ name: "Apple", calories: 600, fat: 60, carbs: 70 },
{ name: "Orange", calories: 700, fat: 70, carbs: 80 },
{ name: "Watermelon", calories: 800, fat: 80, carbs: 90 },
{ name: "Strawberry", calories: 900, fat: 90, carbs: 100 },
{ name: "Blueberry", calories: 1000, fat: 100, carbs: 110 },
{ name: "Raspberry", calories: 1200, fat: 120, carbs: 130 },
{ name: "Cherry", calories: 1300, fat: 130, carbs: 140 },
{ name: "Plum", calories: 1400, fat: 140, carbs: 150 },
{ name: "Peach", calories: 1500, fat: 150, carbs: 160 },
{ name: "Pear", calories: 1600, fat: 160, carbs: 170 },
{ name: "Grapes", calories: 1700, fat: 170, carbs: 180 },
{ name: "Banana", calories: 1800, fat: 180, carbs: 190 }
];
const tableBody = document.querySelector('#food tbody');
foods.forEach(food => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${food.name}</td>
<td>${food.calories}</td>
<td>${food.fat}</td>
<td>${food.carbs}</td>
`;
tableBody.appendChild(row);
});
$(document).ready(function () {
$('#food').DataTable();
});
</script>
</body>
</html>
A table with food data is displayed showing 10 rows by default per page (DataTables default). Pagination controls appear at the bottom with options to change page length to 25, 50, or 100 entries.
Conclusion
jQuery's DataTables plugin provides an easy way to implement pagination in HTML tables. You can customize the page length using the pageLength property or use the default settings for flexible pagination controls.
9K+ Views
