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>	eventTypes 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)
	getProxy()
	getProxyDataType()
	getSelectedRows() Gets the current selected data.
	getTotalRecords() Returns the total records in the dataset.
	hideColumns(columns) Hides the columns indicated by the indexes array.
	orderBy(columnIndex, direction) Sorts by column.
	removeDataRow(data) 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, 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.

Classes

Class Biojs.Table