datatable jquery : how to create table and display link on hover table row?


The datatable is jquery  plugin to create table and consist many functionality to do any thing with the table.Recently i was assiggned to drupal in which we used DataTables module to create table and call rest service populate data in table.I have created table and populated the array to table and appended link on hover of table row.


 

example.html

<div id = "demo" class="pane-inner-content team-logos-pane" >
<table id="example" class="hover">
 <thead>
 <tr><th> Name</th><th>Url </th><th>Type</th><th>Last modified</th><th>sxdsdadw</th></tr>
 </thead>
 <tbody>
 </tbody>
</table>
</div>


example.js

var table = $("#example").dataTable({
 "bPaginate": false,
 "bLengthChange": false,
 "bFilter": false,
 "bInfo": false,
 "bAutoWidth": false,
 "sDom": 'T<"clear">lfrtip',
 "aaData":[
 ["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00","http://sitepoint.com"],
 ["Flippa","http://flippa.com","Marketplace","null","http://sitepoint.com"],
 ["99designs","http://99designs.com","Marketplace","null","http://sitepoint.com"],
 ["Learnable","http://learnable.com","Online courses","null","http://sitepoint.com"],
 ["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00","http://sitepoint.com"]
 ],
 "aoColumnDefs": [
 { "aTargets": [0]},
 {
 "aTargets": [ 1 ],
 "bSortable": false,
 "mRender": function ( url, type, full ) {
 
 return '<a href="'+url+'">' + url + '</a>';
 }
 },
 { "aTargets": [2]},
 { "aTargets": [3]},
 {
 "aTargets": [ 4 ],
 "bSortable": false,
 
 "mRender": function ( url ) {
 return '<a class="button">Hello yes this is dog</a>';
  }
 },
 
 ],
 
 });

example.css

 table#example tr td a.button { display:none;}
 table#example tr:hover td a.button { display:inline-block;}
Advertisements
About

myself pramodh kumar yet another php developer from India and have worked on oops,procedural,yii framework,codeigniter,wordpress,joomla,api and more.

Tagged with: , , , , , , , , ,
Posted in Practice Makes a beginner to become php programmer expert(practical task to become php programmer)

Leave a Reply

Please log in using one of these methods to post your comment:

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

Follow php tutorial on WordPress.com
categories
Calendar
March 2015
M T W T F S S
« Feb   Apr »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
Follow me on Twitter
Blog Stats
  • 72,886 hits
%d bloggers like this: