Create Easy and Responsive HTML Table

Table data is one of most important user interface to display data records in our system. As a programmer, we have to create the easiest and the fastest way in order to make an friendly user interface. If you use JQuery on your code, you can use DataTables Plugin as the easiest way to display your table. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

DataTables is as simple as including two files in your web-site, the CSS styling and the DataTables script itself. Just copy this below CDN link between your <head></head> tag :
 
 <link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">  
 <link rel="stylesheed" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css">  
 <script type="text/javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>  
 <script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js"></script>  

But, you have to make sure that your HTML code also use JQuery main plugin :
 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>  

As a fastest explanation, you can download my example from below link :

Download Here

This is my example screenshot :
Data Table Screenshot

Comments