datatable

1<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
2<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
3
4<table id="Table_ID">
5  <thead>
6    <tr>
7        <th>Table_Head_1</th>
8        <th>Table_Head_2</th>
9        <th>Table_Head_3</th>
10    </tr>
11  </thead>
12  <tbody>
13    <tr>
14    	<td>Table_Data_1</td>
15      	<td>Table_Data_2</td>
16      	<td>Table_Data_3</td>
17    </tr>
18  </tbody>
19</table>
20
21<script>
22$(document).ready( function () {
23    $('#Table_ID').DataTable();
24} );
25</script>

1//datatable customization
2//#datatable will be replace with your table id or class following jqurey code formet
3
4
5
6$('#datatable').dataTable({
7       "lengthChange": true,
8       "dom": '<"top"i>rt<"bottom"flp><"clear">',
9       "lengthMenu": [[10,25, 50, 100, 500, 1000],[10,25, 50, 100, 500, "Max"]],
10       "pageLength": 10,
11   });
12   
13   
14   
15
16//dom is for changing position of the selecting lentgh menu field
17//lengthmenu is for defining ranges 
18//pagelenth is the values or entity that will be shown at the time of load #firstview

1<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/>
2 
3<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
4