jQuery DataTable with searchable sortable and pagination

Today in this blog you’ll learn how to create jQuery DataTable with searchable sortable and pagination. DataTable is very useful jQuery Plug-in for table arrangement. DataTable use to you can show searchable sortable and pagination on table.

jQuery DataTable with searchable sortable and pagination [Source Codes]

This source code can help you to create jQuery DataTable with searchable sortable and pagination
jQuery library source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<table id="myTable" class="table table-striped">
		<thead>
			<tr>
				<th>Data 1</th>
				<th>Data 2</th>
				<th>Data 3</th>
				<th>Data 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Example 1</td>
				<td>Example 1</td>
				<td>Example 1</td>
				<td>Example 1</td>
			</tr>
			<tr>
				<td>Example 2</td>
				<td>Example 2</td>
				<td>Example 2</td>
				<td>Example 2</td>
			</tr>
			<tr>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
			</tr>
			<tr>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
			</tr>
			<tr>
				<td>Example 1</td>
				<td>Example 1</td>
				<td>Example 1</td>
				<td>Example 1</td>
			</tr>
			<tr>
				<td>Example 2</td>
				<td>Example 2</td>
				<td>Example 2</td>
				<td>Example 2</td>
			</tr>
			<tr>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
			</tr>
			<tr>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
			</tr>
			<tr>
				<td>Example 1</td>
				<td>Example 1</td>
				<td>Example 1</td>
				<td>Example 1</td>
			</tr>
			<tr>
				<td>Example 2</td>
				<td>Example 2</td>
				<td>Example 2</td>
				<td>Example 2</td>
			</tr>
			<tr>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
			</tr>
			<tr>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
			</tr>
			<tr>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
			</tr>
			<tr>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
			</tr>
			<tr>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
				<td>Example 3</td>
			</tr>
			<tr>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
				<td>Example 4</td>
			</tr>
			
		</tbody>
	</table>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
.container{
	max-width: 1100px;
	width: 100%;
}
#myTable thead tr th{
	background-color: #000;
	color: #fff;
}
#myTable_filter{
	margin-bottom: 10px;
}

JavaScript Code

Copy

$(document).ready(function() {
    $('#myTable').DataTable({
    	pageLength : 10

    });
});

jQuery DataTable with searchable sortable and pagination

Video tutorial of jQuery DataTable with searchable sortable and pagination

You might like this

jQuery DataTable with searchable sortable and pagination [Source Codes]

How to create a Pie Chart using HTML & CSS

jQuery Multiselect Dropdown with search box | Bootstrap 5 supported Multiselect Dropdown

CSS card glass morphism effect using HTML and CSS

CSS Animation – Best animation effect using CSS clock animation effect using HTML and CSS

Best way to Text Animation Effect Using CSS Text Blinking Effect CSS

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery