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]

jQuery DataTable with AJAX JSON data API

Cool animation effects using CSS balance animation effects CSS

jQuery multiselect dropdown with bootstrap selectpicker

Learn form validation using HTML CSS and JavaScript

CSS Preloader – Animated Preloader using HTML and CSS

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Liquid Distortion Image Hover Effect using Three.js gsap.js