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;}
Tagged with: , , , , , , , , ,
Posted in Practice Makes a beginner to become php programmer expert(practical task to become php programmer)

Drupal 7 :Hello World Module


Tagged with: , , , ,
Posted in Drupal

How to calculate last friday using Javascript


Originally posted on Web Developer Blogs:

todayDate = new Date();
LastFridayDate = new Date();

LastFridayDate.setDate(LastFridayDate.getDate()-1);

while (LastFridayDate.getDay() != 5){
LastFridayDate.setDate(LastFridayDate.getDate()-1);
}
// Friday = 5
if(todayDate.getDay() == 5) {
console.log(todayDate); //if today is Friday, it will display today date
} else {
console.log(LastFridayDate); //if today is not Friday, it will display last friday date
}

getDay – returns the day of the week (from 0 to 6) for the specified date

View original

Tagged with: , , ,
Posted in javascript

Happy new year 2015

india-happy-new-year-2015-HD-wallpaper

india-happy-new-year-2015-HD-wallpaperNights are Dark but Days are Light,
Wish your Life will always be Bright.
So my Dear don’t get Fear
Coz, God Gift us a “BRAND NEW YEAR”
** HAPPY NEW YEAR 2015 **

Tagged with:
Posted in Happy new year 2015

2014 in review


The WordPress.com stats helper monkeys prepared a 2014 annual report for this blog.

Here’s an excerpt:

The concert hall at the Sydney Opera House holds 2,700 people. This blog was viewed about 24,000 times in 2014. If it were a concert at Sydney Opera House, it would take about 9 sold-out performances for that many people to see it.

Click here to see the complete report.

Posted in Practice Makes a beginner to become php programmer expert(practical task to become php programmer)
Follow php tutorial on WordPress.com
categories
Calendar
March 2015
M T W T F S S
« Feb    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
Follow me on Twitter
Blog Stats
  • 57,067 hits
Follow

Get every new post delivered to your Inbox.

Join 30 other followers

%d bloggers like this: