Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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. Now, think how much scrolling is required to reach the last product in a total of millions of products.
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. Also, it allows adding the functionality of pagination in the table.
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
In the example below, we created the table of card data. Also, we added the ‘id’ with a ‘car’ value.
In jQuery, we accessed the table using its id and executed the DataTable() function. Also, we passed the object as a parameter of the datatable() method. The object contains the ‘paging: true’ to set the pagination and ‘pageLength: 3’, showing 3 items per page.
<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: 500px;
}
</style>
</head>
<body>
<h2>Using the <i> Datatables to show pagination </i> in the table.</h2>
<div class = "car-table">
<table id = "car">
<thead>
<tr>
<th> Model </th>
<th> Year </th>
<th> Country </th>
<th> Brand </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>
<div id="paginationContainer"></div>
<script>
$(document).ready(function () {
var table = $('#car').DataTable({
"paging": true,
"pageLength": 3
});
});
</script>
</body>
</html>
Example 2
In the example below, we created a table to store the food-related data. Here, we created an array of objects containing the food information such as food name, calories, fat, carb, etc.
After that, we iterate through the array, create a table row for each object of the array, and append it to the table body. Also, we executed the dataTables() method without passing any parameter for the food table.
In the output, users can observe that it shows the 10 values on each page by default. However, users can change it to 50 and 100.
<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: 500px;}
</style>
</head>
<body>
<h2>Using the <i> Datatables to show pagination </i> in the table.</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>
<div id="paginationContainer"></div>
<script>
// create array of above table
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 },
{ name: "Pineapple", calories: 1900, fat: 190, carbs: 200 },
{ name: "Mango", calories: 2000, fat: 200, carbs: 210 },
{ name: "Papaya", calories: 2100, fat: 210, carbs: 220 },
{ name: "Kiwi", calories: 2200, fat: 220, carbs: 230 },
{ name: "Grapefruit", calories: 2300, fat: 230, carbs: 240 },
{ name: "Lemon", calories: 2400, fat: 240, carbs: 250 },
{ name: "Lime", calories: 2500, fat: 250, carbs: 260 },
]
// accessing the table and adding data
const table = 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>
`
table.appendChild(row)
})
$(document).ready(function () {
var table = $('#food').DataTable();
});
</script>
</body>
</html>
We learned to use jQuery’s DataTable plugin to add pagination to the table. We also learned to set the custom page length. Also, we can create a custom input field to take page length and set page length according to the user’s preference.
5K+ Views
