Searching Sorting and Pagination of Table in HTML or JSP page using jQuery datatables
In this post, we are going to see how to use jQuery DataTables javascript library for searching ,sorting and pagination of the table in a web page.
DataTables is a javascript library which is used for simplifying the search ,sort, and pagination functionality in plain JSP or HTML page.It reduces a lot of effort of handling these functionalities on the server side.
However, we should avoid using this javascript library when table data is huge because it loads complete table data every time.It is recommended to perform pagination on the server side if the data size is huge to reduce the data loading time.
In the below example we are using this library in HTML file and in the same way you can use it for JSP file if you are developing java web application.
For using the DataTables we need to use jQuery and datables library both.Bootstrap is used to make it responsive.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</head>
<body>
<div class="container">
<h2>Employee Data</h2>
<div class="table-responsive">
<table id="myTable" class="display table">
<thead>
<tr>
<th>Employee Name</th>
<th>Age</th>
<th>Gender</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>34</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Asin</td>
<td>36</td>
<td>Female</td>
<td>ER</td>
</tr>
<tr>
<td>Amar</td>
<td>40</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Prakash</td>
<td>40</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>John</td>
<td>40</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Parnay</td>
<td>18</td>
<td>Female</td>
<td>HR</td>
</tr>
<tr>
<td>Alok</td>
<td>42</td>
<td>Male</td>
<td>ER</td>
</tr>
<tr>
<td>Pawan</td>
<td>38</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Huma</td>
<td>28</td>
<td>Female</td>
<td>HR</td>
</tr>
<tr>
<td>Abhay</td>
<td>34</td>
<td>Male</td>
<td>ER</td>
</tr>
<tr>
<td>KUNAL</td>
<td>32</td>
<td>Male</td>
<td>HR</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Reference:http://www.datatables.net/
Give you suggestion in comments.If you like the post Share with your friends on social network.
What is datatable in jQuery ?
DataTables is a javascript library which is used for simplifying the search ,sort, and pagination functionality in plain JSP or HTML page.It reduces a lot of effort of handling these functionalities on the server side.However, we should avoid using this javascript library when table data is huge because it loads complete table data every time.It is recommended to perform pagination on the server side if the data size is huge to reduce the data loading time.
In the below example we are using this library in HTML file and in the same way you can use it for JSP file if you are developing java web application.
For using the DataTables we need to use jQuery and datables library both.Bootstrap is used to make it responsive.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</head>
<body>
<div class="container">
<h2>Employee Data</h2>
<div class="table-responsive">
<table id="myTable" class="display table">
<thead>
<tr>
<th>Employee Name</th>
<th>Age</th>
<th>Gender</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>34</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Asin</td>
<td>36</td>
<td>Female</td>
<td>ER</td>
</tr>
<tr>
<td>Amar</td>
<td>40</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Prakash</td>
<td>40</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>John</td>
<td>40</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Parnay</td>
<td>18</td>
<td>Female</td>
<td>HR</td>
</tr>
<tr>
<td>Alok</td>
<td>42</td>
<td>Male</td>
<td>ER</td>
</tr>
<tr>
<td>Pawan</td>
<td>38</td>
<td>Male</td>
<td>HR</td>
</tr>
<tr>
<td>Huma</td>
<td>28</td>
<td>Female</td>
<td>HR</td>
</tr>
<tr>
<td>Abhay</td>
<td>34</td>
<td>Male</td>
<td>ER</td>
</tr>
<tr>
<td>KUNAL</td>
<td>32</td>
<td>Male</td>
<td>HR</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Reference:http://www.datatables.net/
Give you suggestion in comments.If you like the post Share with your friends on social network.
Searching Sorting and Pagination of Table in HTML or JSP page using jQuery datatables
Reviewed by JavaInstance
on
8:34:00 AM
Rating:
Reviewed by JavaInstance
on
8:34:00 AM
Rating:
need bottstrapjs files
ReplyDelete