The static era is gone now. Today we expect everything to be dynamic. When it is the matter of displaying a statistical data on a webpage, we no more simply adhere to the traditional style of td and tr. To make the data more meaningful we try to make it more interactive. For example, if you have a table with about 200 rows and having some weird data, can you imagine how dumb the data looks when you simply display it in a webpage. Well, then what do you exactly mean by interactive in this context ? Lets discuss.
What do you mean by Interactive
In a layman term interactive means, when you try to deal with somebody or something you will get a response in return. To make a table more interactive you may expect the following:
- Sorting capability: The columns in a table can be sorted in ascending/descending order.
- Filtering out of data: The data can be filtered out and less number of rows will be displayed according to our requirement.
- Summarizing the data: We can summarize a big data with the help of pivot table to make it more meaningful.
- Grouping of data: We can aggregate values across a table with the help of group by clause to return only unique combination of values.
Live Example
You can see this Wikipedia article to visualize how it manages to display country wise population in an interactive table. Imagine how such data would look without being interactive.
Now I am presenting a small example with only 10 lines of data.
How it works
Although there are dozens of JavaScript plugin available for interactive tables, but nothing can be more simpler then this. It is extremely light weight and takes no time to load. It also supports SQL queries so you can fetch a wide variety of data according to your requirement. Moreover the data will come from Google server so you don't have to worry about performance. If you can achieve such a beautiful task with a less effort then why unnecessarily you will import 3rd party plugins to achieve the same.
One more thing I would like to drag to your attention is, unlike others here the data is completely dynamic. The table does not lie in the web page physically. It is fetched from the Google server at run time, so you don't need to manually build the table in HTML. When you need to add some extra rows, simply go to the spreadsheet add them. Keep it simple silly :)
JavaScript code for your reference
Simply copy-paste the following lines of code in a notepad and save it as .html
<!--Written by Hari Shankar Das-->
<!--Published by www.funbutlearn.com-->
<table width="100%" style="margin-left:80px">
<tr>
<td>
<div style="width:465px;border:1px solid #c0c0c0;padding:5px;background-color:#f0f0f0;">
<b>Toolbar</b><br/><br/>
Sort by:
<select id="sortBy" style="margin-right:20px" onChange="sortBy()">
<option value=""></option>
<option value="Roll No.">Roll No.</option>
<option value="Name">Name</option>
<option value="Math">Math</option>
<option value="Phy">Phy</option>
<option value="Chem">Chem</option>
<option value="Bio">Bio</option>
<option value="Elect">Elect</option>
<option value="Total">Total</option>
</select>
1st class in:
<select id="firstDivStd" style="margin-right:20px" onChange="firstDivStd()">
<option value=""></option>
<option value="Math">Math</option>
<option value="Phy">Phy</option>
<option value="Chem">Chem</option>
<option value="Bio">Bio</option>
<option value="Elect">Elect</option>
</select>
Toppers in:
<select id="toppersIn" onChange="toppersIn()">
<option value=""></option>
<option value="Math">Math</option>
<option value="Phy">Phy</option>
<option value="Chem">Chem</option>
<option value="Bio">Bio</option>
<option value="Elect">Elect</option>
</select><br/><br/>
Failed in:
<select id="failedIn" style="margin-right:20px" onChange="failedIn()">
<option value=""></option>
<option value="Math">Math</option>
<option value="Phy">Phy</option>
<option value="Chem">Chem</option>
<option value="Bio">Bio</option>
<option value="Elect">Elect</option>
</select>
<input type="button" value="School Toppers" onClick="schoolToppers()" style="margin-right:10px"/>
<input type="button" value="Show All" onClick="showAll()" style="margin-right:10px"/>
<input type="button" value="Export" onClick="exportToCsv()"/>
</div>
<br/><br/>
<div id="aboutResult" style="margin-left:9px; color:red"></div>
<iframe id="iframeResDis" width="100%" frameborder="0" style="border:none; height:310px;" src="https://docs.google.com/spreadsheet/tq?tqx=out:html&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE">
</iframe>
</td>
</tr>
</table>
<script language="JavaScript">
var data;
var query="";
function sortBy()
{
if(document.getElementById("sortBy").value!=""){
var column = findColumnIdentifier(document.getElementById("sortBy").value);
query = "Select * order by "+column;
var url="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq="+encodeURIComponent(query)+ "&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE";
document.getElementById('iframeResDis').src=url;
document.getElementById('aboutResult').innerHTML="Result sorted by "+document.getElementById("sortBy").value;
}
}
function firstDivStd()
{
if(document.getElementById("firstDivStd").value!=""){
var column = findColumnIdentifier(document.getElementById("firstDivStd").value);
query = "Select A,B,"+column+" where "+column+">60";
var url="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq="+encodeURIComponent(query)+ "&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE";
document.getElementById('iframeResDis').src=url;
document.getElementById('aboutResult').innerHTML="First division students in "+document.getElementById("firstDivStd").value;
}
}
function toppersIn()
{
if(document.getElementById("toppersIn").value!=""){
var column = findColumnIdentifier(document.getElementById("toppersIn").value);
query = "Select A,B,"+column+" order by "+column+" desc limit 3";
var url="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq="+encodeURIComponent(query)+ "&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE";
document.getElementById('iframeResDis').src=url;
document.getElementById('aboutResult').innerHTML="Top 3 students in "+document.getElementById("toppersIn").value;
}
}
function failedIn()
{
if(document.getElementById("failedIn").value!=""){
var column = findColumnIdentifier(document.getElementById("failedIn").value);
query = "Select A,B,"+column+" where "+column+"<=30";
var url="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq="+encodeURIComponent(query)+ "&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE";
document.getElementById('iframeResDis').src=url;
document.getElementById('aboutResult').innerHTML="Failed students in "+document.getElementById("failedIn").value;
}
}
function schoolToppers()
{
query = "Select * order by H desc limit 3";
var url="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq="+encodeURIComponent(query)+ "&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE";
document.getElementById('iframeResDis').src=url;
document.getElementById('aboutResult').innerHTML="School toppers";
}
function showAll()
{
query = "Select *";
var url="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq="+encodeURIComponent(query)+ "&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE";
document.getElementById('iframeResDis').src=url;
document.getElementById('aboutResult').innerHTML="Full List";
}
function exportToCsv()
{ if(query!=""){
var url="https://docs.google.com/spreadsheet/tq?tqx=out:csv&tq="+encodeURIComponent(query)+ "&key=0AgHK_Z79lrOmdEJ0ekd2aDhPbHBRT3BIX3FwRGRsYUE";
location.href = url;
}
}
function findColumnIdentifier(data){
switch(data){
case "Roll No.":
return "A";
break;
case "Name":
return "B";
break;
case "Math":
return "C";
break;
case "Phy":
return "D";
break;
case "Chem":
return "E";
break;
case "Bio":
return "F";
break;
case "Elect":
return "G";
break;
case "Total":
return "H";
}
}
</script>
Read more
)
)
)
