jQuery DataTable is a free plug-in for JavaScript and jQuery libraries. It is used for displaying information on the HTML tables.
DataTables have inbuilt many customizable features like data search, pagination, and showing a particular number of rows.
DataTables provide inbuilt search and pagination functionality to a normal HTML table.
Here we learn about how DataTable works with a normal HTML able and how we integrate DataTable to our HTML table.
3 Steps to Integrate jQuery DataTable on HTML Table
Step-1
Include DataTable CND files.
|
1 2 3 4 5 6 7 8 |
<!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- DataTable CSS CDN --> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> <!-- DataTable JS CDN --> <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> |
Step-2
Call that function given below using your HTML Table ID. Table ID is an important part of calling DataTable to your normal table.
|
1 2 3 4 5 |
<scrtipt> $(document).ready( function () { $('#myTable').DataTable(); } ); </script> |
Step-3
Complete jQuery DataTable Example
Now you get the fully interactive table below.
See the Pen How jQuery DataTable Works by Bikash Panda (@phpcodertech) on CodePen.
Above is complete steps to How DataTable Works.
After completing above steps, here are some important DataTable customizations list.
Change DataTables Default Number of Rows
|
1 2 3 4 5 |
$(document).ready( function () { $('#table_ID').dataTable( { "pageLength": 50 } ); } ); |
Disable Pagination in DataTable
|
1 2 3 4 5 |
$(document).ready( function () { $('#table_ID').dataTable( { "paging": false } ); } ); |
Facing any issue let me know.
Alos Check:
Happy Coding..!
Display Data From Database in jQuery DataTable
3 Replies to “How jQuery DataTable Works”