INFO-TECH

Google visualisation table provides us such table in which we can easily sort, format table data and make pages in list view. Table cells can be formatted using its different pattern format. Table header row remain fixed and you can easily sort data by click on specific cell of header row. Visualisation table show boolean value in check or uncheck mark and numeric data in format with right aligned.
To apply google visualisation table, we have to use following steps:
Step 1: Include following jsapi file.

< script type="text/javascript" src="http://www.google.com/jsapi">< /script>

Step 2: After include jsapi, we generate global option and load package for table.

< script type="text/javascript">
            var options = {'showRowNumber': true,
                           'page':'enable',
                           'pageSize':15,
                           'pagingSymbols':{prev: 'prev', next: 'next'},
                           'pagingButtonsConfiguration':'auto',
                           'allowHtml': true};
            var visualization;
            var data;
            var oldtab = null;
            google.load('visualization', '1', {packages: ['table']});
        < /script>
• showRowNumber : This  boolean value used for showing auto generated row number.
• page : This  boolean property used for using  paging or not.
• pageSize : This property declare number of rows display on one page.
• pagingSymbols : This property define symbols for page navigation.
• pagingButtonsConfiguration : This boolean property used for paging button.
• allowHtml : This  property used to allow html content to be display.

Step 3: Now we define function in which we get data to display and apply into visualisation table.

< script type="text/javascript">
function listView(source,th,callfun,search){
                var x_search;
                showLoading("loader");
                if(!Boolean(search) || search=="" || search=="Business Name" || search=="Member Name" || search=="Event Name")
                    x_search="";
                else
                    x_search=search;
                document.getElementById ("detailDiv").style.display="none";
                document.getElementById ("homeTabDiv").style.display="block";
                if(oldtab) oldtab.className ="";
                th.className ="active";
                oldtab = th;
                var url="adminDetails.do?x_ACTION="+source+"&x_SEARCH="+x_search;
                var req;
    if (window.XMLHttpRequest) 
        req = new XMLHttpRequest();
    else if (window.ActiveXObject)
        req = new ActiveXObject("Microsoft.XMLHTTP");
    req.onreadystatechange = function(){
        if (req.readyState==4 && req.status==200){
            alert("Function Called.."+req.responseText);
            drawBusinessList (req.responseText);
        }};
    url+=((url.indexOf("?") == -1)?'?':'&')+'q1112='+Math.random();
    if(sync == undefined) sync = true;
    if(parameters){
        req.open("POST", url, sync);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.send(parameters);
   }else{
        req.open("GET",url,sync);
        req.send(null);
    }
                visualization = new google.visualization.Table(document.getElementById('listDiv'));
}

function drawBusinessList(localReq){
                data = google.visualization.arrayToDataTable(eval(localReq));
                var view = new google.visualization.DataView(data);
                var formatter = new google.visualization.TablePatternFormat('{1}');
                formatter.format(data,[0,1],1);
                view.hideColumns([0]);
  visualization.draw(view, options);
                hideDiv("loader");
            }
< /script>

After complete these steps we will get display like following screen.