diff --git a/jquery.dataTables/jquery.dataTables.d.ts b/jquery.dataTables/jquery.dataTables.d.ts new file mode 100755 index 000000000..ac2415e99 --- /dev/null +++ b/jquery.dataTables/jquery.dataTables.d.ts @@ -0,0 +1,479 @@ +// Type definitions for JQuery DataTables 1.9.4 +// Project: http://www.datatables.net +// Definitions by: Armin Sander +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +// missing: +// - Static methods that are defined in JQueryStatic.fn are not typed. +// - Plugin and extension definitions are not typed. + +interface JQuery +{ + dataTable(param? :DataTables.Options) : DataTables.DataTable; +} + +declare module DataTables +{ + export interface DataTable + { + /// Perform a jQuery selector action on the table's TR elements (from the tbody) and return the resulting jQuery object. + $(selector:string, opts?:RowParams): JQuery; + $(selector:Node[], opts?:RowParams): JQuery; + $(selector:JQuery, opts?:RowParams): JQuery; + + /// Almost identical to $ in operation, but in this case returns the data for the matched rows. + _(selector:string, opts?:RowParams): any[]; + _(selector:Node[], opts?:RowParams): any[]; + _(selector:JQuery, opts?:RowParams): any[]; + + /// Add a single new row or multiple rows of data to the table. + fnAddData(data:any, redraw?:bool) : number[]; + + /// This function will make DataTables recalculate the column sizes. + fnAdjustColumnSizing(redraw? : bool) : void; + + /// Quickly and simply clear a table + fnClearTable(redraw? : bool) : void; + + /// The exact opposite of 'opening' a row, this function will close any rows which are currently 'open'. + fnClose(node: Node) : number; + + /// Remove a row for the table + fnDeleteRow(index: number, callback?: () => void, redraw?: bool) : any[]; + fnDeleteRow(tr: Node, callback?: () => void, redraw?: bool) : any[]; + + /// Restore the table to it's original state in the DOM by removing all of DataTables enhancements, + /// alterations to the DOM structure of the table and event listeners. + fnDestroy(remove?: bool) : void; + + /// Redraw the table + fnDraw(complete? : bool) : void; + + /// Filter the input based on data + fnFilter(input: string, column? : number, regex?: bool, smart? : bool, showGlobal?: bool, caseInsensitive? : bool) : void; + + /// Get the data for the whole table, an individual row or an individual cell based on the provided parameters. + fnGetData(row?: Node, col? : number) : any; + fnGetData(row?: number, col? : number) : any; + + /// Get an array of the TR nodes that are used in the table's body. + fnGetNodes(row? : number) : any; // Node[] | Node + + /// Get the array indexes of a particular cell from it's DOM element and column index including hidden columns + fnGetPosition(node: Node) : any; // number | number[] + + /// Check to see if a row is 'open' or not. + fnIsOpen(tr: Node) : bool; + + /// This function will place a new row directly after a row which is currently on display on the page, + /// with the HTML contents that is passed into the function. + fnOpen(node: Node, html: string, clazz: string) : Node; + fnOpen(node: Node, html: Node, clazz: string) : Node; + fnOpen(node: Node, html: JQuery, clazz: string) : Node; + + /// Change the pagination - provides the internal logic for pagination in a simple API function. + fnPageChange(action: string, redraw?: bool) : void; + fnPageChange(page: number, redraw?: bool) : void; + + /// Show a particular column + fnSetColumnVis(column: number, show: bool, redraw?: bool) : void; + + /// Get the settings for a particular table for external manipulation + fnSettings() : Settings; + + /// Sort the table by a particular column + fnSort(col: number) : void; + fnSort(col: any[][]) : void; + + /// Attach a sort listener to an element for a given column + fnSortListener(node: Node, column: number, callback? : () => void): void; + + /// Update a table cell or row - this method will accept either a single value to update the cell with, + /// an array of values with one element for each column or an object in the same format as the original data source. + fnUpdate(data: any, row: Node, column?:number, redraw?: bool, action? : bool) : number; + fnUpdate(data: any, dataIndex: number, column?:number, redraw?: bool, action? : bool) : number; + + /// Provide a common method for plug-ins to check the version of DataTables being used, + /// in order to ensure compatibility. + fnVersionCheck(version: string) : bool; + } + + export interface Static + { + /// Provide a common method for plug-ins to check the version of DataTables being used, + /// in order to ensure compatibility. + fnVersionCheck(version: string) : bool; + + /// Check if a TABLE node is a DataTable table already or not. + fnIsDataTable(table: Node) : bool; + + /// Get all DataTable tables that have been initialised. + fnTables(visible? : bool) : Node[]; + } + + export interface RowParams + { + /// Select TR elements that meet the current filter criterion ("applied") or all TR elements (i.e. no filter). + filter?: string; + + /// Order of the TR elements in the processed array. + /// Can be either 'current', whereby the current sorting of the table is used, or + /// 'original' whereby the original order the data was read into the table is used. + order?: string; + + /// Limit the selection to the currently displayed page + /// ("current") or not ("all"). If 'current' is given, then order is assumed to be + /// 'current' and filter is 'applied', regardless of what they might be given as. + page?: string; + } + + export interface Options + { + aaData?: any[]; + aaSorting?: any[]; + aaSortingFixed?: any[]; + ajax?: any; + aLengthMenu?: any[]; + aoColumns?: ColumnOptions[]; + aoColumnDefs?: ColumnDef[]; + aoSearchCols?: any[]; + asStripClasses?: string[]; + bAutoWidth?: bool; + bDeferRender?: bool; + bDestroy?: bool; + bFilter?: bool; + bInfo?: bool; + bJQueryUI?: bool; + bLengthChange?: bool; + bPaginate?: bool; + bProcessing?: bool; + bRetrieve?: bool; + bScrollAutoCss?: bool; + bScrollCollapse?: bool; + bScrollInfinite?: bool; + bServerSide?: bool; + bSort?: bool; + bSortCellsTop?: bool; + bSortClasses?: bool; + bStateSave?: bool; + fnCookieCallback?: CookieCallback; + fnCreatedRow?: RowCreatedCallback; + fnDrawCallback?: DrawCallback; + fnFooterCallback?: FooterCallback; + fnFormatNumber?: FormatNumber; + fnHeaderCallback?: HeaderCallback; + fnInfoCallback?: InfoCallback; + fnInitComplete?: InitComplete; + fnPreDrawCallback?: PreDrawCallback; + fnRowCallback?: RowCallback; + + fnStateLoadCallback?: StateLoadCallback; + fnStateLoadParams?: StateLoadParams; + fnStateLoaded?: StateLoaded; + fnStateSaveCallback?: StateSaveCallback; + fnStateSaveParams?: StateSaveParams; + iCookieDuration?: number; + iDeferLoading?: any; + iDisplayLength?: number; + iDisplayStart?: number; + iScrollLoadGap?: number; + iTabIndex?: number; + oLanguage?: LanguageOptions; + oSearch?: any; + sAjaxDataProp?: string; + sAjaxSource?: string; + sCookiePrefix?: string; + sDom?: string; + sPaginationType?: string; + sScrollX?: string; + sScrollXInner?: string; + sScrollY?: string; + sServerMethod? : string; + } + + export interface LanguageOptions + { + oAria? : AriaOptions; + oPaginate? : PaginateOptions; + sEmptyTable?: string; + sInfo?: string; + sInfoEmpty?: string; + sInfoFiltered?: string; + sInfoPostFix?: string; + sInfoThousands?: string; + sLengthMenu?: string; + sLoadingRecords?: string; + sProcessing?: string; + sSearch?: string; + sUrl?: string; + sZeroRecords?: string; + } + + export interface AriaOptions + { + sSortAscending?: string; + sSortDescending?: string; + } + + export interface PaginateOptions + { + sFirst?: string; + sLast?: string; + sNext?: string; + sPrevious?: string; + } + + export interface ColumnOptions + { + aDataSort?: number[]; + asSorting?: string[]; + bSearchable? : bool; + bSortable? : bool; + bVisible? : bool; + _bAutoType? : bool; + fnCreatedCell?: CreatedCell; + iDataSort?: number; + mData?: any; + mRender?: any; + sCellType?: string; + sClass?: string; + sContentPadding?: string; + sDefaultContent?: string; + sName?: string; + sSortDataType?: string; + sSortingClass?: string; + sTitle?: string; + sType?: string; + sWidth?: string; + } + + export interface ColumnDef extends ColumnOptions + { + aTargets: any[]; + } + + export interface Settings + { + oFeatures : Features; + oScroll: ScrollingSettings; + oLanguage : { fnInfoCallback : InfoCallback; }; + oBrowser : { bScrollOversize : bool; }; + aanFeatures: Node[][]; + aoData: Row[]; + aiDisplay: number[]; + aiDisplayMaster: number[]; + aoColumns: Column[]; + aoHeader: any[]; + aoFooter: any[]; + asDataSearch: string[]; + oPreviousSearch: any; + aoPreSearchCols: any[]; + aaSorting: any[][]; + aaSortingFixed: any[][]; + asStripeClasses: string[]; + asDestroyStripes: string[]; + sDestroyWidth: number; + aoRowCallback: RowCallback[]; + aoHeaderCallback: HeaderCallback[]; + aoFooterCallback: FooterCallback[]; + aoDrawCallback: DrawCallback[]; + aoRowCreatedCallback: RowCreatedCallback[]; + aoPreDrawCallback: PreDrawCallback[]; + aoInitComplete: InitComplete[]; + aoStateSaveParams: StateSaveParams[]; + aoStateLoadParams: StateLoadParams[]; + aoStateLoaded: StateLoaded[]; + sTableId: string; + nTable: Node; + nTHead: Node; + nTFoot: Node; + nTBody: Node; + nTableWrapper: Node; + bDeferLoading: bool; + bInitialized: bool; + aoOpenRows: any[]; + sDom: string; + sPaginationType: string; + iCookieDuration: number; + sCookiePrefix: string; + fnCookieCallback: CookieCallback; + aoStateSave: StateSaveCallback[]; + aoStateLoad: StateLoadCallback[]; + oLoadedState: any; + sAjaxSource: string; + sAjaxDataProp: string; + bAjaxDataGet: bool; + jqXHR: any; + fnServerData: any; + aoServerParams: any[]; + sServerMethod: string; + fnFormatNumber: FormatNumber; + aLengthMenu: any[]; + iDraw: number; + bDrawing: bool; + iDrawError: number; + _iDisplayLength: number; + _iDisplayStart: number; + _iDisplayEnd: number; + _iRecordsTotal: number; + _iRecordsDisplay: number; + bJUI: bool; + oClasses: any; + bFiltered: bool; + bSorted: bool; + bSortCellsTop: bool; + oInit: any; + aoDestroyCallback: any[]; + fnRecordsTotal: () => number; + fnRecordsDisplay: () => number; + fnDisplayEnd: () => number; + oInstance : any; + sInstance: string; + iTabIndex: number; + nScrollHead: Node; + nScrollFoot: Node; + } + + export interface Features + { + bAutoWidth: bool; + bDeferRender: bool; + bFilter: bool; + bInfo: bool; + bLengthChange: bool; + bPaginate: bool; + bProcessing: bool; + bServerSize: bool; + bSort: bool; + bSortClasses: bool; + bStateSave: bool; + } + + export interface ScrollingSettings + { + bAutoCss : bool; + bCollapse: bool; + bInfinite: bool; + iBarWidth: number; + iLoadGap: number; + sX: string; + sY: string; + } + + export interface Row + { + nTr: Node; + _aData: any; + _aSortData: any[]; + _anHidden: Node[]; + _sRowStripe: string; + } + + export interface Column + { + aDataSort: any; + asSorting: string[]; + bSearchable : bool; + bSortable : bool; + bVisible : bool; + _bAutoType : bool; + fnCreatedCell: CreatedCell; + fnGetData: (data: any, specific: string) => any; + fnSetData: (data: any, value: any) => void; + mData: any; + mRender: any; + nTh: Node; + nIf: Node; + sClass: string; + sContentPadding: string; + sDefaultContent: string; + sName: string; + sSortDataType: string; + sSortingClass: string; + sSortingClassJUI: string; + sTitle: string; + sType: string; + sWidth: string; + sWidthOrig: string; + } + + export interface CookieCallback + { + (name: string, data: any, expires: string, path: string, cookie: string) : void; + } + + export interface RowCreatedCallback + { + (row: Node, data: any[], dataIndex: number) : void; + } + + export interface DrawCallback + { + (settings: Settings) : void; + } + + export interface FooterCallback + { + (foot: Element, data: any[], start:number, end:number, display: number[]) : void; + } + + export interface FormatNumber + { + (toFormat: number) : string; + } + + export interface HeaderCallback + { + (head: Element, data: any[], start:number, end:number, display: number[]) : void; + } + + export interface InfoCallback + { + (settings: Settings, start: number, end: number, max:number, total: number, pre: string) : string; + } + + export interface InitComplete + { + (settings: Settings, json: any) : void; + } + + export interface PreDrawCallback + { + (settings: Settings) : bool; + } + + export interface RowCallback + { + (row : Settings, data: any[], displayIndex: number, displayIndexFull: number) : void; + } + + export interface StateLoadCallback + { + (settings: Settings) : any; + } + + export interface StateLoadParams + { + (settings: Settings, data: any) : void; + } + + export interface StateLoaded + { + (settings: Settings, data: any) : void; + } + + export interface StateSaveCallback + { + (settings: any, data:any) : void; + } + + export interface StateSaveParams + { + (settings: any, data:any) : void; + } + + export interface CreatedCell + { + (nTd: Node, cellData: any, rowData: any, row: number, col: number) : void; + } +} diff --git a/jquery.dataTables/jquery.dataTables.tests.ts b/jquery.dataTables/jquery.dataTables.tests.ts new file mode 100755 index 000000000..8b74936ce --- /dev/null +++ b/jquery.dataTables/jquery.dataTables.tests.ts @@ -0,0 +1,1514 @@ +/// +/// + +// http://www.datatables.net/api + +// $ + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Highlight every second row + oTable.$('tr:odd').css('backgroundColor', 'blue'); +} ); + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Filter to rows with 'Webkit' in them, add a background colour and then + // remove the filter, thus highlighting the 'Webkit' rows only. + oTable.fnFilter('Webkit'); + oTable.$('tr', {"filter": "applied"}).css('backgroundColor', 'blue'); + oTable.fnFilter(''); +} ); + +// _ + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Get the data from the first row in the table + var data = oTable._('tr:first'); + + // Do something useful with the data + alert( "First cell is: "+data[0] ); +} ); + + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Filter to 'Webkit' and get all data for + oTable.fnFilter('Webkit'); + var data = oTable._('tr', {"filter": "applied"}); + + // Do something with the data + alert( data.length+" rows matched the filter" ); +} ); + +// fnAddData + +var giCount = 2; + +$(document).ready(function() { + $('#example').dataTable(); +} ); + +function fnClickAddRow() { + $('#example').dataTable().fnAddData( [ + giCount+".1", + giCount+".2", + giCount+".3", + giCount+".4" ] + ); + + giCount++; +} + +// fnAdjustColumnSizing + +$(document).ready(function() { + var oTable = $('#example').dataTable( { + "sScrollY": "200px", + "bPaginate": false + } ); + + $(window).bind('resize', function () { + oTable.fnAdjustColumnSizing(); + } ); +} ); + +// fnClearTable + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Immediately 'nuke' the current rows (perhaps waiting for an Ajax callback...) + oTable.fnClearTable(); +} ); + +// fnClose + +$(document).ready(function() { + var oTable; + + // 'open' an information row when a row is clicked on + $('#example tbody tr').click( function () { + if ( oTable.fnIsOpen(this) ) { + oTable.fnClose( this ); + } else { + oTable.fnOpen( this, "Temporary row opened", "info_row" ); + } + } ); + + oTable = $('#example').dataTable(); +} ); + +// fnDeleteRow + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Immediately remove the first row + oTable.fnDeleteRow( 0 ); +} ); + +// fnDestroy + +$(document).ready(function() { + // This example is fairly pointless in reality, but shows how fnDestroy can be used + var oTable = $('#example').dataTable(); + oTable.fnDestroy(); +} ); + +// fnDraw + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Re-draw the table - you wouldn't want to do it here, but it's an example :-) + oTable.fnDraw(); +} ); + +// fnFilter + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Sometime later - filter... + oTable.fnFilter( 'test string' ); +} ); + +// fnGetData + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + oTable.$('tr').click( function () { + var data = oTable.fnGetData( this ); + // ... do something with the array / object of data for the row + } ); +} ); + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + oTable.$('td').click( function () { + var sData = oTable.fnGetData( this ); + alert( 'The cell clicked on had the value of '+sData ); + } ); +} ); + +// fnGetNodes + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Get the nodes from the table + var nNodes = oTable.fnGetNodes( ); +} ); + +// fnGetPosition + +$(document).ready(function() { + $('#example tbody td').click( function () { + // Get the position of the current data from the node + var aPos = oTable.fnGetPosition( this ); + + // Get the data array for this row + var aData = oTable.fnGetData( aPos[0] ); + + // Update the data array and return the value + aData[ aPos[1] ] = 'clicked'; + this.innerHTML = 'clicked'; + } ); + + // Init DataTables + var oTable = $('#example').dataTable(); +} ); + +// fnIsOpen + +$(document).ready(function() { + var oTable; + + // 'open' an information row when a row is clicked on + $('#example tbody tr').click( function () { + if ( oTable.fnIsOpen(this) ) { + oTable.fnClose( this ); + } else { + oTable.fnOpen( this, "Temporary row opened", "info_row" ); + } + } ); + + oTable = $('#example').dataTable(); +} ); + +// fnOpen + +$(document).ready(function() { + var oTable; + + // 'open' an information row when a row is clicked on + $('#example tbody tr').click( function () { + if ( oTable.fnIsOpen(this) ) { + oTable.fnClose( this ); + } else { + oTable.fnOpen( this, "Temporary row opened", "info_row" ); + } + } ); + + oTable = $('#example').dataTable(); +} ); + +// fnPageChange + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + oTable.fnPageChange( 'next' ); +} ); + +// fnSetColumnVis + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Hide the second column after initialisation + oTable.fnSetColumnVis( 1, false ); +} ); + +// fnSettings + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + var oSettings = oTable.fnSettings(); + + // Show an example parameter from the settings + alert("" + oSettings._iDisplayStart); +} ); + +// fnSort + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Sort immediately with columns 0 and 1 + oTable.fnSort( [ [0,'asc'], [1,'asc'] ] ); +} ); + +// fnSortListener + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + + // Sort on column 1, when 'sorter' is clicked on + oTable.fnSortListener( document.getElementById('sorter'), 1 ); +} ); + +// fnUpdate + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell + oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1 ); // Row +} ); + +// fnVersionCheck + +$(document).ready(function() { + var oTable = $('#example').dataTable(); + oTable.fnVersionCheck( '1.9.0'); +} ); + +// http://datatables.net/usage/features + +$(document).ready( function () { + $('#example').dataTable( { + "bAutoWidth": false + } ); +} ); + +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/arrays.txt", + "bDeferRender": true + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bFilter": false + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bInfo": false + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bJQueryUI": true + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bLengthChange": false + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bPaginate": false + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bProcessing": true + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bScrollInfinite": true, + "bScrollCollapse": true, + "sScrollY": "200px" + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bServerSide": true, + "sAjaxSource": "xhr.php" + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bSort": false + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bSortClasses": false + } ); +} ); + +$(document).ready( function () { + $('#example').dataTable( { + "bStateSave": true + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "sScrollX": "100%", + "bScrollCollapse": true + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "sScrollY": "200px", + "bPaginate": false + } ); +} ); + +// http://datatables.net/usage/options + +$(document).ready( function() { + $('#example').dataTable( { + "sScrollY": "200px", + "bPaginate": false + } ); + + // Some time later.... + $('#example').dataTable( { + "bFilter": false, + "bDestroy": true + } ); +} ); + +$(document).ready( function() { + initTable(); + tableActions(); +} ); + +function initTable () +{ + return $('#example').dataTable( { + "sScrollY": "200px", + "bPaginate": false, + "bRetrieve": true + } ); +} + +function tableActions () +{ + var oTable = initTable(); + // perform API operations with oTable +} + +$(document).ready( function() { + $('#example').dataTable( { + "bScrollAutoCss": false, + "sScrollY": "200px" + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "sScrollY": "200", + "bScrollCollapse": true + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bSortCellsTop": true + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "iCookieDuration": 60*60*24 // 1 day + } ); +} ); + +// 57 records available in the table, no filtering applied +$(document).ready( function() { + $('#example').dataTable( { + "bServerSide": true, + "sAjaxSource": "scripts/server_processing.php", + "iDeferLoading": 57 + } ); +} ); + + +// 57 records after filtering, 100 without filtering (an initial filter applied) +$(document).ready( function() { + $('#example').dataTable( { + "bServerSide": true, + "sAjaxSource": "scripts/server_processing.php", + "iDeferLoading": [ 57, 100 ], + "oSearch": { + "sSearch": "my_filter" + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "iDisplayLength": 50 + } ); +} ) + +$(document).ready( function() { + $('#example').dataTable( { + "iDisplayStart": 20 + } ); +} ) + +$(document).ready( function() { + $('#example').dataTable( { + "bScrollInfinite": true, + "bScrollCollapse": true, + "sScrollY": "200px", + "iScrollLoadGap": 50 + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "iTabIndex": 1 + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oSearch": {"sSearch": "Initial search"} + } ); +} ) + +// Get data from { "data": [...] } +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/data.txt", + "sAjaxDataProp": "data" + } ); +} ); + + +// Get data from { "data": { "inner": [...] } } +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/data.txt", + "sAjaxDataProp": "data.inner" + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php" + } ); +} ) + +$(document).ready( function() { + $('#example').dataTable( { + "sCookiePrefix": "my_datatable_" + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "sDom": '<"top"i>rt<"bottom"flp><"clear">' + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "sPaginationType": "full_numbers" + } ); +} ) + +$(document).ready( function() { + $('#example').dataTable( { + "sScrollX": "100%", + "sScrollXInner": "110%" + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bServerSide": true, + "sAjaxSource": "scripts/post.php", + "sServerMethod": "POST" + } ); +} ); + +// http://datatables.net/usage/callbacks + +$(document).ready( function () { + $('#example').dataTable( { + "fnCookieCallback": function (sName, oData, sExpires, sPath) { + // Customise oData or sName or whatever else here + return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath; + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "fnCreatedRow": function( nRow, aData, iDataIndex ) { + // Bold the grade for all 'A' grade browsers + if ( aData[4] == "A" ) + { + $('td:eq(4)', nRow).html( 'A' ); + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "fnDrawCallback": function( oSettings ) { + alert( 'DataTables has redrawn the table' ); + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) { + ( (nFoot.getElementsByTagName('th')[0])).innerHTML = "Starting index is "+iStart; + } + } ); +} ) + +$(document).ready( function() { + $('#example').dataTable( { + "fnFormatNumber": function ( iIn ) { + if ( iIn < 1000 ) { + return iIn.toString(); + } else { + var + s=(iIn+""), + a=s.split(""), out="", + iLen=s.length; + + for ( var i=0 ; i nHead.getElementsByTagName('th')[0]).innerHTML = "Displaying "+(iEnd-iStart)+" records"; + } + } ); +} ) + +$('#example').dataTable( { + "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) { + return iStart +" to "+ iEnd; + } +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "fnInitComplete": function(oSettings, json) { + alert( 'DataTables has finished its initialisation.' ); + } + } ); +} ) + +$(document).ready( function() { + $('#example').dataTable( { + "fnPreDrawCallback": function( oSettings ) { + if ( $('#test').val() == 1 ) { + return false; + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { + // Bold the grade for all 'A' grade browsers + if ( aData[4] == "A" ) + { + $('td:eq(4)', nRow).html( 'A' ); + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bProcessing": true, + "bServerSide": true, + "sAjaxSource": "xhr.php", + "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) { + oSettings.jqXHR = $.ajax( { + "dataType": 'json', + "type": "POST", + "url": sSource, + "data": aoData, + "success": fnCallback + } ); + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bProcessing": true, + "bServerSide": true, + "sAjaxSource": "scripts/server_processing.php", + "fnServerParams": function ( aoData ) { + aoData.push( { "name": "more_data", "value": "my_value" } ); + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bStateSave": true, + "fnStateLoad": function (oSettings) { + var o; + + // Send an Ajax request to the server to get the data. Note that + // this is a synchronous request. + $.ajax( { + "url": "/state_load", + "async": false, + "dataType": "json", + "success": function (json) { + o = json; + } + } ); + + return o; + } + } ); +} ); + +// Remove a saved filter, so filtering is never loaded +$(document).ready( function() { + $('#example').dataTable( { + "bStateSave": true, + "fnStateLoadParams": function (oSettings, oData) { + oData.oSearch.sSearch = ""; + } + } ); +} ); + + +// Disallow state loading by returning false +$(document).ready( function() { + $('#example').dataTable( { + "bStateSave": true, + "fnStateLoadParams": function (oSettings, oData) { + return false; + } + } ); +} ); + +// Show an alert with the filtering value that was saved +$(document).ready( function() { + $('#example').dataTable( { + "bStateSave": true, + "fnStateLoaded": function (oSettings, oData) { + alert( 'Saved filter was: '+oData.oSearch.sSearch ); + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bStateSave": true, + "fnStateSave": function (oSettings, oData) { + // Send an Ajax request to the server with the state object + $.ajax( { + "url": "/state_save", + "data": oData, + "dataType": "json", + "method": "POST", + "success": function () {} + } ); + } + } ); +} ); + +// Remove a saved filter, so filtering is never saved +$(document).ready( function() { + $('#example').dataTable( { + "bStateSave": true, + "fnStateSaveParams": function (oSettings, oData) { + oData.oSearch.sSearch = ""; + } + } ); +} ); + +// http://datatables.net/usage/columns + +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] }, + { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] }, + { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] } + ] + } ); +} ); + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "aDataSort": [ 0, 1 ] }, + { "aDataSort": [ 1, 0 ] }, + { "aDataSort": [ 2, 3, 4 ] }, + null, + null + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "asSorting": [ "asc" ], "aTargets": [ 1 ] }, + { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] }, + { "asSorting": [ "desc" ], "aTargets": [ 3 ] } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + { "asSorting": [ "asc" ] }, + { "asSorting": [ "desc", "asc", "asc" ] }, + { "asSorting": [ "desc" ] }, + null + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "bSearchable": false, "aTargets": [ 0 ] } + ] } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "bSearchable": false }, + null, + null, + null, + null + ] } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "bSortable": false, "aTargets": [ 0 ] } + ] } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "bSortable": false }, + null, + null, + null, + null + ] } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "bVisible": false, "aTargets": [ 0 ] } + ] } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "bVisible": false }, + null, + null, + null, + null + ] } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ { + "aTargets": [3], + "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { + if ( sData == "1.7" ) { + $(nTd).css('color', 'blue') + } + } + } ] + }); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "iDataSort": 1, "aTargets": [ 0 ] } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "iDataSort": 1 }, + null, + null, + null, + null + ] + } ); +} ); + +// Read table data from objects +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/deep.txt", + "aoColumns": [ + { "mData": "engine" }, + { "mData": "browser" }, + { "mData": "platform.inner" }, + { "mData": "platform.details.0" }, + { "mData": "platform.details.1" } + ] + } ); +} ); + + +// Using mData as a function to provide different information for +// sorting, filtering and display. In this case, currency (price) +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "aoColumnDefs": [ { + "aTargets": [ 0 ], + "mData": function ( source, type, val ) { + if (type === 'set') { + source.price = val; + // Store the computed dislay and filter values for efficiency + source.price_display = val=="" ? "" : "$"+val; + source.price_filter = val=="" ? "" : "$"+val+" "+val; + return; + } + else if (type === 'display') { + return source.price_display; + } + else if (type === 'filter') { + return source.price_filter; + } + // 'sort', 'type' and undefined all just use the integer + return source.price; + } + } ] + } ); +} ); + +// Create a comma separated list from an array of objects +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/deep.txt", + "aoColumns": [ + { "mData": "engine" }, + { "mData": "browser" }, + { + "mData": "platform", + "mRender": "[, ].name" + } + ] + } ); +} ); + + +// Use as a function to create a link from the data source +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "aoColumnDefs": [ { + "aTargets": [ 0 ], + "mData": "download_link", + "mRender": function ( data, type, full ) { + return 'Download'; + } + } ] + } ); +} ); + +// Make the first column use TH cells +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "aoColumnDefs": [ { + "aTargets": [ 0 ], + "sCellType": "th" + } ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sClass": "my_class", "aTargets": [ 0 ] } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sClass": "my_class" }, + null, + null, + null, + null + ] + } ); +} ); + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + null, + null, + { + "sContentPadding": "mmm" + } + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { + "mData": null, + "sDefaultContent": "Edit", + "aTargets": [ -1 ] + } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + null, + null, + { + "mData": null, + "sDefaultContent": "Edit" + } + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sName": "engine", "aTargets": [ 0 ] }, + { "sName": "browser", "aTargets": [ 1 ] }, + { "sName": "platform", "aTargets": [ 2 ] }, + { "sName": "version", "aTargets": [ 3 ] }, + { "sName": "grade", "aTargets": [ 4 ] } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sName": "engine" }, + { "sName": "browser" }, + { "sName": "platform" }, + { "sName": "version" }, + { "sName": "grade" } + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] }, + { "sType": "numeric", "aTargets": [ 3 ] }, + { "sSortDataType": "dom-select", "aTargets": [ 4 ] }, + { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] } + ] + } ); +} ); + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + null, + { "sSortDataType": "dom-text" }, + { "sSortDataType": "dom-text", "sType": "numeric" }, + { "sSortDataType": "dom-select" }, + { "sSortDataType": "dom-checkbox" } + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sTitle": "My column title", "aTargets": [ 0 ] } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sTitle": "My column title" }, + null, + null, + null, + null + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sType": "html", "aTargets": [ 0 ] } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sType": "html" }, + null, + null, + null, + null + ] + } ); +} ); + +// Using aoColumnDefs +$(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sWidth": "20%", "aTargets": [ 0 ] } + ] + } ); +} ); + + +// Using aoColumns +$(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sWidth": "20%" }, + null, + null, + null, + null + ] + } ); +} ); + +// http://www.datatables.net/usage/i18n + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "oAria": { + "sSortAscending": " - click/return to sort ascending" + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "oAria": { + "sSortDescending": " - click/return to sort descending" + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "oPaginate": { + "sFirst": "First page" + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "oPaginate": { + "sLast": "Last page" + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "oPaginate": { + "sNext": "Next page" + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "oPaginate": { + "sPrevious": "Previous page" + } + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sEmptyTable": "No data available in table" + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)" + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sInfoEmpty": "No entries to show" + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sInfoFiltered": " - filtering from _MAX_ records" + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sInfoPostFix": "All records shown are derived from real information." + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sInfoThousands": "'" + } + } ); +} ); + +// Language change only +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sLengthMenu": "Display _MENU_ records" + } + } ); +} ); + + +// Language and options change +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sLengthMenu": 'Display records' + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sLoadingRecords": "Please wait - loading..." + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sProcessing": "DataTables is currently busy" + } + } ); +} ); + +// Input text box will be appended at the end automatically +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sSearch": "Filter records:" + } + } ); +} ); + + +// Specify where the filter should appear +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sSearch": "Apply filter _INPUT_ to table" + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt" + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "oLanguage": { + "sZeroRecords": "No records to display" + } + } ); +} ); + +// http://www.datatables.net/usage/server-side + +$(document).ready( function () { + $('#example').dataTable( { + "bServerSide": true, + "sAjaxSource": "xhr.php" + } ); +} ); + +// POST data to server +$(document).ready( function() { + $('#example').dataTable( { + "bProcessing": true, + "bServerSide": true, + "sAjaxSource": "xhr.php", + "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) { + oSettings.jqXHR = $.ajax( { + "dataType": 'json', + "type": "POST", + "url": sSource, + "data": aoData, + "success": fnCallback + } ); + } + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "bProcessing": true, + "bServerSide": true, + "sAjaxSource": "scripts/server_processing.php", + "fnServerParams": function ( aoData ) { + aoData.push( { "name": "more_data", "value": "my_value" } ); + } + } ); +} ); + +// Get data from { "data": [...] } +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/data.txt", + "sAjaxDataProp": "data" + } ); +} ); + + +// Get data from { "data": { "inner": [...] } } +$(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/data.txt", + "sAjaxDataProp": "data.inner" + } ); +} ); + +$(document).ready( function() { + $('#example').dataTable( { + "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php" + } ); +} ) + +$(document).ready( function() { + $('#example').dataTable( { + "bServerSide": true, + "sAjaxSource": "scripts/post.php", + "sServerMethod": "POST" + } ); +} ); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +