Hi dharmendr,
Apply the jQuery DataTable plugin to the HTML Table and set the bPaginate to true.
Refer below code.
HTML
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table id="tblCustomers" class="table table-striped table-bordered table-hover ">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
<script type="text/javascript">
$(function () {
$("[id*=tblCustomers]").DataTable({
bLengthChange: true,
lengthMenu: [[2, 5, 10, -1], [2, 5, 10, "All"]],
bFilter: false,
bSort: true,
bPaginate: true
});
});
</script>
</body>
</html>
Demo
