DataTables logo DataTables

via Ad Packs

Options

Although the majority of the interaction with KeyTable is through the API, for dealing with events etc, KeyTable provides a variety of options to help customise the display to your needs. The options are listed below.

Initialisation

Initialisation of KeyTable is done by creating a new instance of the KeyTable class. The constructor for this class takes a single with the options listed below. For example:

$(document).ready( function () {
	var oTable = $('#example').dataTable();
	
	var keys = new KeyTable( {
		"table": document.getElementById('example'),
		"datatable": oTable
	} );
} );

KeyTable options

dataTable
Show details 		$().datatable() object, for use with DataTables. Please note that this will not work with server-side processing in DataTables).
Default: null
Type: Object - DataTables instance
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	
	var keys = new KeyTable( {
		"table": document.getElementById('example'),
		"datatable": oTable
	} );
} );
focus
Show details 		Which element in the table is to be focused on initially. This can either be a TD node element, or a set of coordinates (for example [0, 5])
Default: null
Type: Node or Array
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	
	var keys = new KeyTable( {
		"table": document.getElementById('example'),
		"datatable": oTable,
		"focus": [ 1, 0 ] )
	} );
} );
focusClass
Show details 		The class to be used for the focused cell
Default: focus
Type: String
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	
	var keys = new KeyTable( {
		"table": document.getElementById('example'),
		"datatable": oTable,
		"focusClass": "myClass" )
	} );
} );
form
Show details 		Indicate if the table part of a form or not. If so then it will handle tabbing for you.
Default: false
Type: Boolean
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	
	var keys = new KeyTable( {
		"table": document.getElementById('example'),
		"datatable": oTable,
		"form": true
	} );
} );
initScroll
Show details 		Scroll the viewport automatically to the first cell
Default: true
Type: Boolean
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	
	var keys = new KeyTable( {
		"table": document.getElementById('example'),
		"datatable": oTable,
		"initScroll": false )
	} );
} );
tabIndex
Show details 		Tab index to give to the hidden input field if using KeyTable as a form element.
Default: null
Type: Integer
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	
	var keys = new KeyTable( {
		"table": document.getElementById('example'),
		"datatable": oTable,
		"form": true,
		"tabIndex": 5
	} );
} );
table
Show details 		TABLE node which KeyTable should attach to.
Default: null
Type: Node
Code example: 
$(document).ready( function () {
	var keys = new KeyTable( {
		"table": document.getElementById('example')
	} );
} );