Class Index | File Index

Classes


Class Biojs.Table


Version 1.0.0.

Extends Biojs.

Defined in: Biojs.Table.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Biojs.Table(options)
Table.
Field Summary
Field Attributes Field Name and Description
<inner>  
Array containing the supported event names
<inner>  
opt
Default values for the options
Method Summary
Method Attributes Method Name and Description
 
addDataRow(data)
Add a single new row or multiple rows of data to the table.
 
constructor(options)
 
 
 
Gets the current selected data.
 
Returns the total records in the dataset.
 
hideColumns(columns)
Hides the columns indicated by the indexes array.
 
orderBy(columnIndex, direction)
Sorts by column.
 
Add a single new row or multiple rows of data to the table.
 
setDataSource(dataSet)
Rebuild the table
 
showColumns(columns)
Shows the columns indicated by the indexes array.
 
toggleColumns(columns, flag)
Shows the columns indicated by the indexes array.
Methods borrowed from class Biojs:
addListener, extend, getId, listen, raiseEvent, removeListener, setEventHandlers, setOptions
Event Summary
Event Attributes Event Name and Description
 
onCellClicked(actionPerformed)
 
onDataArrived(actionPerformed)
 
onHeaderClicked(actionPerformed)
 
onRowSelected(actionPerformed)
Class Detail
Biojs.Table(options)
Table.
Author: John Gomez.
   // Adds a flag to the cell value.
   var flagRender = function (col, dataRow, value) {
		  return ' ' + value;
   };

   // Formats a decimal value in a percentage value. 
   var numberToPercentageFormat = function (col, dataRow, value) {
		  return ( new Number(value) * 100 ).toFixed(2) + "%";
   };

   // Example of instantiation of the Table
   var myTable = new Biojs.Table({
      target: "YourOwnDivId",
      hideColumns: [1],
      orderBy:  [ [0,'asc'], [3,'desc'] ],
      columns: [
	     	"Rank",
	     	"Flag",
         { name: "Country", render: flagRender },
         "Population",
         "Date",
	    	{ name:"% World Population", render: numberToPercentageFormat }
      ],
      dataSet: [
      	[ 1, "chi", "China", 1347350000, "December 31, 2011", "0.1925" ],
 		[ 2, "ind", "India", 1210193422, "March 1, 2011", "0.1729" ],
			[ 3, "usa", "United States", 313149000, "March 9, 2012", "0.0447" ],
			[ 4, "ino", "Indonesia", 237641326, "May 1, 2010", "0.034" ],
			[ 5, "bra", "Brazil", 192376496, "July 1, 2011", "0.0275" ],
			[ 6, "pak", "Pakistan", 178945000, "March 9, 2012", "0.0256" ],
			[ 7, "nig", "Nigeria", 162471000, "July 1, 2011", "0.0232" ],
			[ 8, "rus", "Russia", 143030106, "January 1, 2012", "0.0204" ],
			[ 9, "ban", "Bangladesh", 142319000, "March 15, 2011", "0.0203" ],
			[ 10, "jap", "Japan", 127770000, "February 1, 2012", "0.0183" ],
			[ 11, "mex", "Mexico", 112336538, "June 12, 2010", "0.016" ],
			[ 12, "phi", "Philippines", 94013200, "July 1, 2010", "0.0134" ],
			[ 13, "vie", "Vietnam", 87840000, "December 31, 2011", "0.0125" ],
			[ 14, "eth", "Ethiopia", 84320987,	"July 1, 2012", "0.012" ],
			[ 15, "ger", "Germany", 81796000, "August 31, 2011", "0.0117" ]
      ]
      
   });
Parameters:
{Object} options
An object with the options for HelloWorld component.
Options detailed:
{string} target
Identifier of the DIV tag where the component should be displayed.
{string[][]|Object} dataSet
Either 2D string array containing the whole data to be displayed or a plain object defining the data source.
   {
		url: <url>,
		proxyUrl: <proxy>,
		paramsMap: { "iDisplayStart": <newName1>, "iDisplayLength": <newName2>, ... },
		filter: <flag>
   }
   
where:
  • url is string containing the url data source.
  • paramsMap Customize the name of the following params which will be passed to server:
    • iDisplayStart: index of the first expected record for paging.
    • iDisplayLength: size of the fetched data (page size).
    • sSearch: filter string entered by the user in case of filter is enabled.
  • filter is a boolean to show/hide the search box on the table top. The entered string will be passed to the server by means of 'sSearch' parameter. Personalize the parameter name using paramsMap.
  • proxyUrl optional string containing the url of the proxy in case of needing access to server through a proxy.
   {
		url: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query/species:human',
		paramsMap: { "iDisplayStart": "firstResult", "iDisplayLength": "maxResults" },
		filter: false
   }
   
   [
		[ 1, "chi", "China", 1347350000, "December 31, 2011", "0.1925" ],
		[ 2, "ind", "India", 1210193422, "March 1, 2011", "0.1729" ],
		[ 3, "usa", "United States", 313149000, "March 9, 2012", "0.0447" ],
		[ 4, "ino", "Indonesia", 237641326, "May 1, 2010", "0.034" ],
		[ 5, "bra", "Brazil", 192376496, "July 1, 2011", "0.0275" ],
		[ 6, "pak", "Pakistan", 178945000, "March 9, 2012", "0.0256" ],
		[ 7, "nig", "Nigeria", 162471000, "July 1, 2011", "0.0232" ],
		[ 8, "rus", "Russia", 143030106, "January 1, 2012", "0.0204" ],
		[ 9, "ban", "Bangladesh", 142319000, "March 15, 2011", "0.0203" ],
		[ 10, "jap", "Japan", 127770000, "February 1, 2012", "0.0183" ],
		[ 11, "mex", "Mexico", 112336538, "June 12, 2010", "0.016" ],
		[ 12, "phi", "Philippines", 94013200, "July 1, 2010", "0.0134" ],
		[ 13, "vie", "Vietnam", 87840000, "December 31, 2011", "0.0125" ],
		[ 14, "eth", "Ethiopia", 84320987,	"July 1, 2012", "0.012" ],
		[ 15, "ger", "Germany", 81796000, "August 31, 2011", "0.0117" ]
   ]
   
{(string|Object)[]} columns

Array containing the column descriptors. A descriptor can be either a string or an object. Use a string to define column name only. Use an object to define column name, rendering function and fixed width.

   {
		name: <string>,
		render: <function>,
		width: <string>
   }
   
where:
  • name will be used for the column title, and 'render'.
  • render is a function to format each row value in that column.
    Returns a string containing the new formatted value.
    Arguments:
    • col: index of the column.
    • dataRow: 1D array containing whole row.
    • value: current value of the cell.
  •       	// Formats a decimal value in a percentage value. 
       		var numberToPercentageFormat = function (col, dataRow, value) {
    		  		return ( new Number(value) * 100 ).toFixed(2) + "%";
    			};
    		  
  • width of the column using either pixels or percentage.
   // Three columns: Identifier, Name and Location. 
   // Custom rendering function will apply bold to Identifier values.
   columns: [
		"Name",
		"Location",
		{ name: "Population %", render: numberToPercentageFormat }
   ]
   
{int[]} [hideColumns=[]]
Indexes (0-based) of the columns to be hided.
{array[][int|string]} [orderBy=[]]
A 2D array to tell how to order the columns. Each 1D array must contains both column index and ordering direction.
   // order column 0 in ascending direction and column 3 in descending direction
   orderBy: [ [0,'asc'], [3,'desc'] ]
   
{int} [pageLength=10]
Number of rows per page.
{bool} [rowSelection=true]
Show/hide the first check boxes column used for selecting rows.
{bool} [paginate=true]
Enable/disable the pagination, so whole the data will be displayed.
{int} [width=597]
Horizontal size of the general container.
{int} [height=400]
Vertical size of the general container.
Requires:
jQuery Core 1.6.4
DataTables Plugin
jQuery UI 1.8.2+
MultiSelect Plugin
Field Detail
<inner> eventTypes
Array containing the supported event names

<inner> opt
Default values for the options
Method Detail
addDataRow(data)
Add a single new row or multiple rows of data to the table.
myTable.addDataRow([ 1, "col", "Colombia", 46420000, "March 12, 2012", "0.0066" ]);
Parameters:
{array} data
1D array of data - add a single row with the data provided

constructor(options)
Parameters:
options

getProxy()

getProxyDataType()

{string[][]} getSelectedRows()
Gets the current selected data.
myTable.getSelectedRows();
Returns:
{string[][]} data current selection.

getTotalRecords()
Returns the total records in the dataset.
alert("Total records:" + myTable.getTotalRecords());

hideColumns(columns)
Hides the columns indicated by the indexes array.
myTable.hideColumns([0,3]);
Parameters:
{int[]} columns
Column indexes to be hided.

orderBy(columnIndex, direction)
Sorts by column.
myTable.orderBy(1,'desc');
Parameters:
{int} columnIndex
Column indexes to be sorted (0-based index).
{string} direction
Sorting direction; 'asc' for ascending, 'desc' for descending.

removeDataRow(data)
Add a single new row or multiple rows of data to the table.
myTable.removeDataRow(2);
Parameters:
{array} data
1D array of data - add a single row with the data provided

setDataSource(dataSet)
Rebuild the table
myTable.setDataSource({
	url: 'data/tableJSON.js'
});
Parameters:
dataSet

showColumns(columns)
Shows the columns indicated by the indexes array.
myTable.showColumns([0,3]);
Parameters:
{int[]} columns
Column indexes to be showed.

toggleColumns(columns, flag)
Shows the columns indicated by the indexes array.
myTable.toggleColumns([0,3],true);
Parameters:
{int[]} columns
Column indexes to be showed.
{bool} flag
The new value.
Event Detail
onCellClicked(actionPerformed)
myTable.onCellClicked(
   function( e ) {
      alert("Cell selected in row "+ e.rowIndex +", column " + e.colIndex + ". Value: " + e.cell.innerText );
   }
);
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{Object} source
The component which triggered the event.
{int} rowIndex
Row selected (0-based index).
{int} colIndex
Column number (0-based index).
{HTMLTableCellElement} cell
Instance of the DOM HTMLTableCellElement selected.

onDataArrived(actionPerformed)
myTable.onDataArrived(
   function( e ) {
      alert( e.jsonData.aaData.length + " new records has arrived." );
   }
);
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{Object} source
The component which triggered the event.
{Object} jsonData
Data object just arrived.

onHeaderClicked(actionPerformed)
myTable.onHeaderClicked(
   function( e ) {
      alert("Header \""+ e.colName +"\" selected. Column index " + e.colIndex + ". " );
   }
);
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{Object} source
The component which triggered the event.
{string} colName
Column name.
{int} colIndex
Column number (0-based index).

onRowSelected(actionPerformed)
myTable.onRowSelected(
   function( e ) {
      alert("Row selected: "+ e.rowIndex );
   }
);
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{Object} source
The component which triggered the event.
{int} rowIndex
Row selected (0-based index).
{HTMLTableRowElement} row
Instance of the DOM HTMLTableRowElement selected.

Documentation generated by JsDoc Toolkit 2.3.2 on Thu Apr 17 2014 17:42:43 GMT+0100 (BST)