I am using jQuery DataTables plugin on my table. I am getting pagination with "Previous", "Next" and all page numbers. But my requirement is I need to have a textbox in which I can enter the number, which will take to the entered page number.
Here is my jsFiddle: https://jsfiddle.net/8zp7vfme/2/
$(document).ready(function() {
$('#example').dataTable({
"pagingType": "full_numbers"
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
</tbody>
</table>
</html>
I need a textbox after page numbers to enter digits which will navigate me to the page I specified.
There is Navigation with text input pagination plug-in, see the example below:
Also there is Select list pagination plug-in, see the example below: