Biojs.Table showcase
PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.
View in windowOverview
Table.
Version
1.0.0.
To get the above Biojs.Table to work on your page, you need to do the following:
- Include the file Biojs.Table.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.4.2.min.js">
CSS stylesheet(s)
<link href="../biojs/css/biojs.table.css" rel="stylesheet" type="text/css" />
- Create a div tag which holds an unique identifier.
<body> ... <div id="YourOwnDivId" /> ... </body> - Create a code snippet within a <script> tag and instance Biojs.Table into.
window.onload = function() { // 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" ]
]
});
};
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
-
dataSet | {string[][]|Object}
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" ] ]
-
columns | {(string|Object)[]}
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 }
]
Optional Parameters
-
hideColumns | {int[]}
Indexes (0-based) of the columns to be hided.
Default: [] -
orderBy | {array[][int|string]}
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'] ]
Default: [] -
pageLength | {int}
Number of rows per page.
Default: 10 -
rowSelection | {bool}
Show/hide the first check boxes column used for selecting rows.
Default: true -
paginate | {bool}
Enable/disable the pagination, so whole the data will be displayed.
Default: true -
width | {int}
Horizontal size of the general container.
Default: 597 -
height | {int}
Vertical size of the general container.
Default: 400
addDataRow
Add a single new row or multiple rows of data to the table.
Parameters:
-
{array} data
1D array of data - add a single row with the data provided
Example :
myTable.addDataRow([ 1, "col", "Colombia", 46420000, "March 12, 2012", "0.0066" ]);
getProxy
getProxyDataType
getSelectedRows
Gets the current selected data.
Example :
myTable.getSelectedRows();
Returns:
- {string[][]} data current selection.
getTotalRecords
Returns the total records in the dataset.
Example :
alert("Total records:" + myTable.getTotalRecords());
hideColumns
Hides the columns indicated by the indexes array.
Parameters:
-
{int[]} columns
Column indexes to be hided.
Example :
myTable.hideColumns([0,3]);
orderBy
Sorts by column.
Parameters:
-
{int} columnIndex
Column indexes to be sorted (0-based index). -
{string} direction
Sorting direction; 'asc' for ascending, 'desc' for descending.
Example :
myTable.orderBy(1,'desc');
removeDataRow
Add a single new row or multiple rows of data to the table.
Parameters:
-
{array} data
1D array of data - add a single row with the data provided
Example :
myTable.removeDataRow(2);
setDataSource
Rebuild the table
Parameters:
-
dataSet
Example :
myTable.setDataSource({
url: 'data/tableJSON.js'
});
showColumns
Shows the columns indicated by the indexes array.
Parameters:
-
{int[]} columns
Column indexes to be showed.
Example :
myTable.showColumns([0,3]);
toggleColumns
Shows the columns indicated by the indexes array.
Parameters:
-
{int[]} columns
Column indexes to be showed. -
{bool} flag
The new value.
Example :
myTable.toggleColumns([0,3],true);
onCellClicked
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{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.
Example :
myTable.onCellClicked(
function( e ) {
alert("Cell selected in row "+ e.rowIndex +", column " + e.colIndex + ". Value: " + e.cell.innerText );
}
);
onDataArrived
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{Object}
jsonData
Data object just arrived.
Example :
myTable.onDataArrived(
function( e ) {
alert( e.jsonData.aaData.length + " new records has arrived." );
}
);
onHeaderClicked
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{string}
colName
Column name. -
{int}
colIndex
Column number (0-based index).
Example :
myTable.onHeaderClicked(
function( e ) {
alert("Header \""+ e.colName +"\" selected. Column index " + e.colIndex + ". " );
}
);
onRowSelected
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{int}
rowIndex
Row selected (0-based index). -
{HTMLTableRowElement}
row
Instance of the DOM HTMLTableRowElement selected.
Example :
myTable.onRowSelected(
function( e ) {
alert("Row selected: "+ e.rowIndex );
}
);