Creating A Table Pagination Using HTML
Hey coders, in this tutorial we will learn how to create a Table with Pagination using HTML. Before getting started with the code let us get to know what is pagination in a table.
Pagination in HTML Table
Table Pagination is a simple navigation method that lets you split a huge amount of content within your tables into smaller parts. By default, pagination is initialized with the Previous, Page Numbers, and Next buttons. It is a simple code that will give a new effect to the user for creating a long html table in a compact manner.
How is HTML table pagination helpful?
This table helps in selecting a large number of pages in very little time, This will save lots of time and be able to handle a large number of data. HTML line of code gives the user the number of rows and column of the table whereas javascript add functionality to the table.
We will be using JQuery for this code in HTML to create a table with pagination.
| Code by | ITGiggs |
| Project Download | Link Available Below |
| Language used | HTML and jQuery |
| External link / Dependencies | Yes |
| Responsive | YES |
Table Pagination Table
50+ HTML, CSS and JavaScript Projects With Source Code
Live Preview Of Table Pagination:
Table Pagination HTML Code
Here Is The Code For You To Directly Use It. The Code Will Be Explained Below For You To Understand How To Create the table with pagination.
<!DOCTYPE html>
<html>
<head>
<title>Data Tables</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" ></script>
</head>
<body>
<div class="container">
<h2>Simple Pagination Example using Datatables Js Library</h2>
<table class="table table-fluid" id="myTable">
<thead>
<tr><th>Name</th><th>Email</th><th>Password</th></tr>
</thead>
<tbody>
<tr><td>Daniel Danny</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Samuel</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Jack</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Eureka</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Pinky</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Mishti</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Puneet</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Nick</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Danika</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Vishakha</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Nitin</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Latika</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Kaavya</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Ishika</td><td>[email protected]</td><td>Pass1234</td></tr>
<tr><td>Veronika</td><td>[email protected]</td><td>Pass1234</td></tr>
</tbody>
</table>
</div>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
</body>
</html>Let us now understand the Head section of the code:
- We will give the title as Data Tables using the Title tag.
- Now we will directly link the stylesheet from bootstrap using the link –<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css” integrity=”sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS” crossorigin=”anonymous”>
- Loading the necessary jQuery & jQuery UI in the HTML document.
- Link the following scripts in the code inside the head section of the html code to create the data tables and the interface for the tables with pagination.
Restaurant Website Using HTML And CSS With Source Code
Now to understand the Body of the code:
- Starting off by creating a division using the div tag with class=”container”.
- Inside the div, giving a heading using h2 tag.
- We will use the table tag to create the tables with a class and id to it.
- You can add your own data int he tables or just copy the reference data from the code given above. Using the tr-table row and td-table data tags, we will input the data in the table format.
- Inside the body, at the end of it we have written a script to add some logic to the html. We have created a function to target the data tables. –<script>$(document).ready( function (){$(‘#myTable’).DataTable();} );</script>
Output Of Table Pagination Using Html:
I hope that this article was helpful and you understood the whole project. Now let’s take a look at the Live Preview of the Table with Pagination.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
Now we have successfully created our Table with Pagination using HTML. You can use this project directly by copying it into your IDE. We hope you understood the project, If you have any doubts feel free to comment!!
Happy exploring and learning !!
Follow: codeWithRandom
Code by: ITGiggs
Written by: Cheshta Vohra
SOME FAQS RELATED TO HTML TABLE PAGINATION
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
