When we see about recent Web Developments and role of HTML 5, AJAX, jQuery UI and other plugins into the world of Web made more and more changes which brings rich UI and sophisticated enhancements for the end users. At the same time we need to know that all end user machines should be with updates and latest software versions.
We all may know that few months back Google has enhanced all its web products and asked all users to use browsers with latest version. And also by using AJAX we can get just piece of update information from server to client instead of requesting for complete web page. So it makes response as faster and less load to the web server.
In recent web development world we can see lot and lot of plugins and tools to develop web application. As a plugin which I have came across is DataTable plugin which gives more functionality and rich UI for the developers with just few line of code. Lets assume few years back if we need to display a table in web page with 5 to 6 columns and with 1000 rows. So developer need to keep in mind like Pagination, each column sorting, search, records editing and finally giving rich UI and they need to write code for each functionality and need to integrate with those tables.
But DataTable is one of the plugin which makes complete work into few integration steps. Now lets see simple example code as how to use DataTable.
In below example if we see table we have created with id "javadiscover_table" and same id has been associated with dataTable in jQuery ready function. Thats it, remaining things are related to our custom requirement and we can add multiple properties like search feature enable/ disable, page counts, custom column sorting etc., Also here we have used jQuery UI for our rich table look.
You can download complete code and supporting js and css files in below link.
DataTable Example Code
OUTPUT:
We all may know that few months back Google has enhanced all its web products and asked all users to use browsers with latest version. And also by using AJAX we can get just piece of update information from server to client instead of requesting for complete web page. So it makes response as faster and less load to the web server.
In recent web development world we can see lot and lot of plugins and tools to develop web application. As a plugin which I have came across is DataTable plugin which gives more functionality and rich UI for the developers with just few line of code. Lets assume few years back if we need to display a table in web page with 5 to 6 columns and with 1000 rows. So developer need to keep in mind like Pagination, each column sorting, search, records editing and finally giving rich UI and they need to write code for each functionality and need to integrate with those tables.
But DataTable is one of the plugin which makes complete work into few integration steps. Now lets see simple example code as how to use DataTable.
In below example if we see table we have created with id "javadiscover_table" and same id has been associated with dataTable in jQuery ready function. Thats it, remaining things are related to our custom requirement and we can add multiple properties like search feature enable/ disable, page counts, custom column sorting etc., Also here we have used jQuery UI for our rich table look.
You can download complete code and supporting js and css files in below link.
DataTable Example Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="dtable.css"/>
<link rel="stylesheet" href="jquery-ui-1.8.4.custom.css"/>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery( document ).ready(function( jQuery ) {
$('#javadiscover_table').dataTable( {
"sDom": '<"top"iflp<"clear">>',
"aaSorting": [[ 4, "desc" ]], // Column sorting
"bJQueryUI": true
} );
});
</script>
</head>
<body>
<table cellpadding='0' cellspacing='0' border='0' class='display' id='javadiscover_table'>
<thead>
<tr>
<th>Source</th>
<th>Destination</th>
<th>Type</th>
<th>IP Address</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Source</th>
<th>Destination</th>
<th>Type</th>
<th>IP Address</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Raj</td>
<td>Sundar</td>
<td>Audio Call</td>
<td>10.70.54.81</td>
<td>2013-10-29 09:10:57</td>
<td>2013-10-29 09:11:14</td>
</tr>
<tr>
<td>David</td>
<td>Anand</td>
<td>Audio Call</td>
<td>10.70.54.83</td>
<td>2013-10-29 09:46:34</td>
<td>2013-10-29 09:46:59</td>
</tr>
<tr>
<td>Rex</td>
<td>Bill</td>
<td>Video Call</td>
<td>10.70.54.40</td>
<td>2013-10-29 10:09:18</td>
<td>2013-10-29 10:09:30</td>
</tr>
<tr>
<td>Alex</td>
<td>Gates</td>
<td>Video Call</td>
<td>10.70.53.123</td>
<td>2013-10-29 10:38:14</td>
<td>2013-10-29 10:38:17</td>
</tr>
<tr>
<td>Steve</td>
<td>Ronald</td>
<td>Audio Call</td>
<td>10.70.53.221</td>
<td>2013-10-29 10:38:30</td>
<td>2013-10-29 10:39:13</td>
</tr>
<tr>
<td>Jobs</td>
<td>Zen</td>
<td>Video Call</td>
<td>10.70.54.190</td>
<td>2013-10-29 10:50:52</td>
<td>2013-10-29 10:51:22</td>
</tr>
<tr>
<td>Tim</td>
<td>Tony</td>
<td>Audio Call</td>
<td>10.70.54.194</td>
<td>2013-10-29 10:52:04</td>
<td>2013-10-29 10:53:12</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:
No comments:
Write comments