The ALL IN ONE DATATABLES – JQuery

The site says “DataTables is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.”

More than anything , one plugin which had drastically reduced our project effort has been this! “Listing with search , sort and pagination ‘ is inevitable ‘ in a Business Application. Be it any thing to be listed, from an XML, or Database or on the run …

This plugin would allow you all what you need, with possibility to customise the way you want it, to turn On and OFF the features you would want etc. Easy to Ajax enable it , with a few lines of fetch , sort and search and ajax functions.

When applied with smarty template and PHP, its easiness is overwhelming …
A simple example which list down ‘objects’ in this case ‘Hotels List”, which in turn is assigned to a template variable is shown below:

The header part includes the script section:

{literal}

           @import "../jscript/jquery/media/css/demo_page.css";
           @import "../jscript/jquery/media/css/demo_table.css";
       </style>
<script type="text/<span class=">// <![CDATA[
javascript</span>" language="javascript" src="../jscript/jquery/media/js/jquery.dataTables.js">
// ]]></script>
       <script type="text/javascript" charset="utf-8">
           $(document).ready(function() {
               $('#hotelslist').dataTable( {
                   'bStateSave':true,
                   "sPaginationType": "full_numbers",
                   "aaSorting": [[ 4, "desc" ]],
                   "aoColumns" : [
                                        null,
                                        null,
                                        null,
                                        { "asSorting" : [null] },
                                        {"bVisible":    false}
                                 ]
               } );
           } );

       </script>
{/literal}

Then later,the smarty ‘for-each’ is applied for the table which is linked to the datatable script.

<div id="demo">
   <table cellpadding="0" cellspacing="0" border="0" class="display" id="hotelslist">
	   <thead>
			   <tr>
				   <th>HotelName</th>
				   <th>Contact</th>
				   <th>Telephone</th>
				   <th style="cursor: text;">Action</th>
				   <th>Create Date</th>
			   </tr>
	   </thead>

   {foreach from=$hotels item="hotel"}
   <tr>
	   <td width="30%">{$hotel->getHotel_name()}</td>
	   {$hotel->getLastname()} {$hotel->getFirstname()}
	   {$hotel->getTelephone()}
	   <td width="20%">
		   <a href="viewhotel.php?id=%7B$hotel-%3E%3Cspan%20class=">getUniqueid()}" class="info" title="View Hotel Details" ></a>
	   </td>
	   {$hotel->getCreatedate()|date_format:"%Y-%m-%d"}
   </tr>
   {/foreach}
</table>
</div>

Here the main components are the ‘aoColumns’ and the ‘aaSorting’, which we specify in the header script. The id of the table which we specify is also very important. This needs to match the one inside the html table.

The section ‘aoColumns’ should have the same number of entries as there are columns in the table to display. Each column, you can specify whether to give sorting feature or not, whether it is visible or not etc.

Try out the package here where you would get all the necessary files for further development and testing.

Advertisements

About mytechlifedays

Its been a wonderful learning period over the last 6 years in the IT industry , getting exposed to whole lot of technologies and ideas. The hurdles and the crisis that came along have been wonderful experience ... And now its time to pen them down so that let some others execute faster and easily with these information .....
This entry was posted in Javascript, JQuery, PHP, Smarty and tagged , , . Bookmark the permalink.

Leave a Reply ! It would be always appreciated ! :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s