dataTables.bootstrap.min.js000064400000004021147211617400011744 0ustar00/*! DataTables Bootstrap 3 integration ©2011-2014 SpryMedia Ltd - datatables.net/license */ (function(l,q){var e=function(b,c){b.extend(!0,c.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",renderer:"bootstrap"});b.extend(c.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm"});c.ext.renderer.pageButton.bootstrap=function(g,e,r,s,i,m){var t=new c.Api(g),u=g.oClasses,j=g.oLanguage.oPaginate,d,f,n=0,p=function(c,e){var k,h,o,a,l=function(a){a.preventDefault(); b(a.currentTarget).hasClass("disabled")||t.page(a.data.action).draw(!1)};k=0;for(h=e.length;k",{"class":u.sPageButton+" "+ f,id:0===r&&"string"===typeof a?g.sTableId+"_"+a:null}).append(b("",{href:"#","aria-controls":g.sTableId,"data-dt-idx":n,tabindex:g.iTabIndex}).html(d)).appendTo(c),g.oApi._fnBindAction(o,{action:a},l),n++)}},h;try{h=b(q.activeElement).data("dt-idx")}catch(l){}p(b(e).empty().html(' * * @class * @constructor * @global * @param {object} oDT DataTables settings object * @param {object} [oOpts={}] Configuration object for FixedColumns. Options * are defined by {@link Scroller.defaults} * * @requires jQuery 1.7+ * @requires DataTables 1.9.0+ * * @example * $(document).ready(function() { * $('#example').dataTable( { * "sScrollY": "200px", * "sAjaxSource": "media/dataset/large.txt", * "sDom": "frtiS", * "bDeferRender": true * } ); * } ); */ var Scroller = function ( oDTSettings, oOpts ) { /* Sanity check - you just know it will happen */ if ( ! this instanceof Scroller ) { alert( "Scroller warning: Scroller must be initialised with the 'new' keyword." ); return; } if ( typeof oOpts == 'undefined' ) { oOpts = {}; } /** * Settings object which contains customisable information for the Scroller instance * @namespace * @private * @extends Scroller.defaults */ this.s = { /** * DataTables settings object * @type object * @default Passed in as first parameter to constructor */ "dt": oDTSettings, /** * Pixel location of the top of the drawn table in the viewport * @type int * @default 0 */ "tableTop": 0, /** * Pixel location of the bottom of the drawn table in the viewport * @type int * @default 0 */ "tableBottom": 0, /** * Pixel location of the boundary for when the next data set should be loaded and drawn * when scrolling up the way. * @type int * @default 0 * @private */ "redrawTop": 0, /** * Pixel location of the boundary for when the next data set should be loaded and drawn * when scrolling down the way. Note that this is actually calculated as the offset from * the top. * @type int * @default 0 * @private */ "redrawBottom": 0, /** * Auto row height or not indicator * @type bool * @default 0 */ "autoHeight": true, /** * Number of rows calculated as visible in the visible viewport * @type int * @default 0 */ "viewportRows": 0, /** * setTimeout reference for state saving, used when state saving is enabled in the DataTable * and when the user scrolls the viewport in order to stop the cookie set taking too much * CPU! * @type int * @default 0 */ "stateTO": null, /** * setTimeout reference for the redraw, used when server-side processing is enabled in the * DataTables in order to prevent DoSing the server * @type int * @default null */ "drawTO": null, heights: { jump: null, page: null, virtual: null, scroll: null, /** * Height of rows in the table * @type int * @default 0 */ row: null, /** * Pixel height of the viewport * @type int * @default 0 */ viewport: null }, topRowFloat: 0, scrollDrawDiff: null, loaderVisible: false }; // @todo The defaults should extend a `c` property and the internal settings // only held in the `s` property. At the moment they are mixed this.s = $.extend( this.s, Scroller.oDefaults, oOpts ); // Workaround for row height being read from height object (see above comment) this.s.heights.row = this.s.rowHeight; /** * DOM elements used by the class instance * @private * @namespace * */ this.dom = { "force": document.createElement('div'), "scroller": null, "table": null, "loader": null }; /* Attach the instance to the DataTables instance so it can be accessed */ this.s.dt.oScroller = this; /* Let's do it */ this._fnConstruct(); }; Scroller.prototype = /** @lends Scroller.prototype */{ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Public methods * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /** * Calculate the pixel position from the top of the scrolling container for * a given row * @param {int} iRow Row number to calculate the position of * @returns {int} Pixels * @example * $(document).ready(function() { * $('#example').dataTable( { * "sScrollY": "200px", * "sAjaxSource": "media/dataset/large.txt", * "sDom": "frtiS", * "bDeferRender": true, * "fnInitComplete": function (o) { * // Find where row 25 is * alert( o.oScroller.fnRowToPixels( 25 ) ); * } * } ); * } ); */ "fnRowToPixels": function ( rowIdx, intParse, virtual ) { var pixels; if ( virtual ) { pixels = this._domain( 'virtualToPhysical', rowIdx * this.s.heights.row ); } else { var diff = rowIdx - this.s.baseRowTop; pixels = this.s.baseScrollTop + (diff * this.s.heights.row); } return intParse || intParse === undefined ? parseInt( pixels, 10 ) : pixels; }, /** * Calculate the row number that will be found at the given pixel position * (y-scroll). * * Please note that when the height of the full table exceeds 1 million * pixels, Scroller switches into a non-linear mode for the scrollbar to fit * all of the records into a finite area, but this function returns a linear * value (relative to the last non-linear positioning). * @param {int} iPixels Offset from top to calculate the row number of * @param {int} [intParse=true] If an integer value should be returned * @param {int} [virtual=false] Perform the calculations in the virtual domain * @returns {int} Row index * @example * $(document).ready(function() { * $('#example').dataTable( { * "sScrollY": "200px", * "sAjaxSource": "media/dataset/large.txt", * "sDom": "frtiS", * "bDeferRender": true, * "fnInitComplete": function (o) { * // Find what row number is at 500px * alert( o.oScroller.fnPixelsToRow( 500 ) ); * } * } ); * } ); */ "fnPixelsToRow": function ( pixels, intParse, virtual ) { var diff = pixels - this.s.baseScrollTop; var row = virtual ? this._domain( 'physicalToVirtual', pixels ) / this.s.heights.row : ( diff / this.s.heights.row ) + this.s.baseRowTop; return intParse || intParse === undefined ? parseInt( row, 10 ) : row; }, /** * Calculate the row number that will be found at the given pixel position (y-scroll) * @param {int} iRow Row index to scroll to * @param {bool} [bAnimate=true] Animate the transition or not * @returns {void} * @example * $(document).ready(function() { * $('#example').dataTable( { * "sScrollY": "200px", * "sAjaxSource": "media/dataset/large.txt", * "sDom": "frtiS", * "bDeferRender": true, * "fnInitComplete": function (o) { * // Immediately scroll to row 1000 * o.oScroller.fnScrollToRow( 1000 ); * } * } ); * * // Sometime later on use the following to scroll to row 500... * var oSettings = $('#example').dataTable().fnSettings(); * oSettings.oScroller.fnScrollToRow( 500 ); * } ); */ "fnScrollToRow": function ( iRow, bAnimate ) { var that = this; var ani = false; var px = this.fnRowToPixels( iRow ); // We need to know if the table will redraw or not before doing the // scroll. If it will not redraw, then we need to use the currently // displayed table, and scroll with the physical pixels. Otherwise, we // need to calculate the table's new position from the virtual // transform. var preRows = ((this.s.displayBuffer-1)/2) * this.s.viewportRows; var drawRow = iRow - preRows; if ( drawRow < 0 ) { drawRow = 0; } if ( (px > this.s.redrawBottom || px < this.s.redrawTop) && this.s.dt._iDisplayStart !== drawRow ) { ani = true; px = this.fnRowToPixels( iRow, false, true ); } if ( typeof bAnimate == 'undefined' || bAnimate ) { this.s.ani = ani; $(this.dom.scroller).animate( { "scrollTop": px }, function () { // This needs to happen after the animation has completed and // the final scroll event fired setTimeout( function () { that.s.ani = false; }, 25 ); } ); } else { $(this.dom.scroller).scrollTop( px ); } }, /** * Calculate and store information about how many rows are to be displayed * in the scrolling viewport, based on current dimensions in the browser's * rendering. This can be particularly useful if the table is initially * drawn in a hidden element - for example in a tab. * @param {bool} [bRedraw=true] Redraw the table automatically after the recalculation, with * the new dimensions forming the basis for the draw. * @returns {void} * @example * $(document).ready(function() { * // Make the example container hidden to throw off the browser's sizing * document.getElementById('container').style.display = "none"; * var oTable = $('#example').dataTable( { * "sScrollY": "200px", * "sAjaxSource": "media/dataset/large.txt", * "sDom": "frtiS", * "bDeferRender": true, * "fnInitComplete": function (o) { * // Immediately scroll to row 1000 * o.oScroller.fnScrollToRow( 1000 ); * } * } ); * * setTimeout( function () { * // Make the example container visible and recalculate the scroller sizes * document.getElementById('container').style.display = "block"; * oTable.fnSettings().oScroller.fnMeasure(); * }, 3000 ); */ "fnMeasure": function ( bRedraw ) { if ( this.s.autoHeight ) { this._fnCalcRowHeight(); } var heights = this.s.heights; heights.viewport = $(this.dom.scroller).height(); this.s.viewportRows = parseInt( heights.viewport / heights.row, 10 )+1; this.s.dt._iDisplayLength = this.s.viewportRows * this.s.displayBuffer; if ( bRedraw === undefined || bRedraw ) { this.s.dt.oInstance.fnDraw(); } }, /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Private methods (they are of course public in JS, but recommended as private) * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /** * Initialisation for Scroller * @returns {void} * @private */ "_fnConstruct": function () { var that = this; /* Sanity check */ if ( !this.s.dt.oFeatures.bPaginate ) { this.s.dt.oApi._fnLog( this.s.dt, 0, 'Pagination must be enabled for Scroller' ); return; } /* Insert a div element that we can use to force the DT scrolling container to * the height that would be required if the whole table was being displayed */ this.dom.force.style.position = "absolute"; this.dom.force.style.top = "0px"; this.dom.force.style.left = "0px"; this.dom.force.style.width = "1px"; this.dom.scroller = $('div.'+this.s.dt.oClasses.sScrollBody, this.s.dt.nTableWrapper)[0]; this.dom.scroller.appendChild( this.dom.force ); this.dom.scroller.style.position = "relative"; this.dom.table = $('>table', this.dom.scroller)[0]; this.dom.table.style.position = "absolute"; this.dom.table.style.top = "0px"; this.dom.table.style.left = "0px"; // Add class to 'announce' that we are a Scroller table $(this.s.dt.nTableWrapper).addClass('DTS'); // Add a 'loading' indicator if ( this.s.loadingIndicator ) { this.dom.loader = $('
'+this.s.dt.oLanguage.sLoadingRecords+'
') .css('display', 'none'); $(this.dom.scroller.parentNode) .css('position', 'relative') .append( this.dom.loader ); } /* Initial size calculations */ if ( this.s.heights.row && this.s.heights.row != 'auto' ) { this.s.autoHeight = false; } this.fnMeasure( false ); /* Scrolling callback to see if a page change is needed - use a throttled * function for the save save callback so we aren't hitting it on every * scroll */ this.s.ingnoreScroll = true; this.s.stateSaveThrottle = this.s.dt.oApi._fnThrottle( function () { that.s.dt.oApi._fnSaveState( that.s.dt ); }, 500 ); $(this.dom.scroller).on( 'scroll.DTS', function (e) { that._fnScroll.call( that ); } ); /* In iOS we catch the touchstart event in case the user tries to scroll * while the display is already scrolling */ $(this.dom.scroller).on('touchstart.DTS', function () { that._fnScroll.call( that ); } ); /* Update the scroller when the DataTable is redrawn */ this.s.dt.aoDrawCallback.push( { "fn": function () { if ( that.s.dt.bInitialised ) { that._fnDrawCallback.call( that ); } }, "sName": "Scroller" } ); /* On resize, update the information element, since the number of rows shown might change */ $(window).on( 'resize.DTS', function () { that.fnMeasure( false ); that._fnInfo(); } ); /* Add a state saving parameter to the DT state saving so we can restore the exact * position of the scrolling */ var initialStateSave = true; this.s.dt.oApi._fnCallbackReg( this.s.dt, 'aoStateSaveParams', function (oS, oData) { /* Set iScroller to saved scroll position on initialization. */ if(initialStateSave && that.s.dt.oLoadedState){ oData.iScroller = that.s.dt.oLoadedState.iScroller; oData.iScrollerTopRow = that.s.dt.oLoadedState.iScrollerTopRow; initialStateSave = false; } else { oData.iScroller = that.dom.scroller.scrollTop; oData.iScrollerTopRow = that.s.topRowFloat; } }, "Scroller_State" ); if ( this.s.dt.oLoadedState ) { this.s.topRowFloat = this.s.dt.oLoadedState.iScrollerTopRow || 0; } /* Destructor */ this.s.dt.aoDestroyCallback.push( { "sName": "Scroller", "fn": function () { $(window).off( 'resize.DTS' ); $(that.dom.scroller).off('touchstart.DTS scroll.DTS'); $(that.s.dt.nTableWrapper).removeClass('DTS'); $('div.DTS_Loading', that.dom.scroller.parentNode).remove(); that.dom.table.style.position = ""; that.dom.table.style.top = ""; that.dom.table.style.left = ""; } } ); }, /** * Scrolling function - fired whenever the scrolling position is changed. * This method needs to use the stored values to see if the table should be * redrawn as we are moving towards the end of the information that is * currently drawn or not. If needed, then it will redraw the table based on * the new position. * @returns {void} * @private */ "_fnScroll": function () { var that = this, heights = this.s.heights, iScrollTop = this.dom.scroller.scrollTop, iTopRow; if ( this.s.skip ) { return; } if ( this.s.ingnoreScroll ) { return; } /* If the table has been sorted or filtered, then we use the redraw that * DataTables as done, rather than performing our own */ if ( this.s.dt.bFiltered || this.s.dt.bSorted ) { this.s.lastScrollTop = 0; return; } /* Update the table's information display for what is now in the viewport */ this._fnInfo(); /* We don't want to state save on every scroll event - that's heavy * handed, so use a timeout to update the state saving only when the * scrolling has finished */ clearTimeout( this.s.stateTO ); this.s.stateTO = setTimeout( function () { that.s.dt.oApi._fnSaveState( that.s.dt ); }, 250 ); /* Check if the scroll point is outside the trigger boundary which would required * a DataTables redraw */ if ( iScrollTop < this.s.redrawTop || iScrollTop > this.s.redrawBottom ) { var preRows = Math.ceil( ((this.s.displayBuffer-1)/2) * this.s.viewportRows ); if ( Math.abs( iScrollTop - this.s.lastScrollTop ) > heights.viewport || this.s.ani ) { iTopRow = parseInt(this._domain( 'physicalToVirtual', iScrollTop ) / heights.row, 10) - preRows; this.s.topRowFloat = (this._domain( 'physicalToVirtual', iScrollTop ) / heights.row); } else { iTopRow = this.fnPixelsToRow( iScrollTop ) - preRows; this.s.topRowFloat = this.fnPixelsToRow( iScrollTop, false ); } if ( iTopRow <= 0 ) { /* At the start of the table */ iTopRow = 0; } else if ( iTopRow + this.s.dt._iDisplayLength > this.s.dt.fnRecordsDisplay() ) { /* At the end of the table */ iTopRow = this.s.dt.fnRecordsDisplay() - this.s.dt._iDisplayLength; if ( iTopRow < 0 ) { iTopRow = 0; } } else if ( iTopRow % 2 !== 0 ) { // For the row-striping classes (odd/even) we want only to start // on evens otherwise the stripes will change between draws and // look rubbish iTopRow++; } if ( iTopRow != this.s.dt._iDisplayStart ) { /* Cache the new table position for quick lookups */ this.s.tableTop = $(this.s.dt.nTable).offset().top; this.s.tableBottom = $(this.s.dt.nTable).height() + this.s.tableTop; var draw = function () { if ( that.s.scrollDrawReq === null ) { that.s.scrollDrawReq = iScrollTop; } that.s.dt._iDisplayStart = iTopRow; if ( that.s.dt.oApi._fnCalculateEnd ) { // Removed in 1.10 that.s.dt.oApi._fnCalculateEnd( that.s.dt ); } that.s.dt.oApi._fnDraw( that.s.dt ); }; /* Do the DataTables redraw based on the calculated start point - note that when * using server-side processing we introduce a small delay to not DoS the server... */ if ( this.s.dt.oFeatures.bServerSide ) { clearTimeout( this.s.drawTO ); this.s.drawTO = setTimeout( draw, this.s.serverWait ); } else { draw(); } if ( this.dom.loader && ! this.s.loaderVisible ) { this.dom.loader.css( 'display', 'block' ); this.s.loaderVisible = true; } } } this.s.lastScrollTop = iScrollTop; this.s.stateSaveThrottle(); }, /** * Convert from one domain to another. The physical domain is the actual * pixel count on the screen, while the virtual is if we had browsers which * had scrolling containers of infinite height (i.e. the absolute value) * * @param {string} dir Domain transform direction, `virtualToPhysical` or * `physicalToVirtual` * @returns {number} Calculated transform * @private */ _domain: function ( dir, val ) { var heights = this.s.heights; var coeff; // If the virtual and physical height match, then we use a linear // transform between the two, allowing the scrollbar to be linear if ( heights.virtual === heights.scroll ) { coeff = (heights.virtual-heights.viewport) / (heights.scroll-heights.viewport); if ( dir === 'virtualToPhysical' ) { return val / coeff; } else if ( dir === 'physicalToVirtual' ) { return val * coeff; } } // Otherwise, we want a non-linear scrollbar to take account of the // redrawing regions at the start and end of the table, otherwise these // can stutter badly - on large tables 30px (for example) scroll might // be hundreds of rows, so the table would be redrawing every few px at // the start and end. Use a simple quadratic to stop this. It does mean // the scrollbar is non-linear, but with such massive data sets, the // scrollbar is going to be a best guess anyway var xMax = (heights.scroll - heights.viewport) / 2; var yMax = (heights.virtual - heights.viewport) / 2; coeff = yMax / ( xMax * xMax ); if ( dir === 'virtualToPhysical' ) { if ( val < yMax ) { return Math.pow(val / coeff, 0.5); } else { val = (yMax*2) - val; return val < 0 ? heights.scroll : (xMax*2) - Math.pow(val / coeff, 0.5); } } else if ( dir === 'physicalToVirtual' ) { if ( val < xMax ) { return val * val * coeff; } else { val = (xMax*2) - val; return val < 0 ? heights.virtual : (yMax*2) - (val * val * coeff); } } }, /** * Draw callback function which is fired when the DataTable is redrawn. The main function of * this method is to position the drawn table correctly the scrolling container for the rows * that is displays as a result of the scrolling position. * @returns {void} * @private */ "_fnDrawCallback": function () { var that = this, heights = this.s.heights, iScrollTop = this.dom.scroller.scrollTop, iActualScrollTop = iScrollTop, iScrollBottom = iScrollTop + heights.viewport, iTableHeight = $(this.s.dt.nTable).height(), displayStart = this.s.dt._iDisplayStart, displayLen = this.s.dt._iDisplayLength, displayEnd = this.s.dt.fnRecordsDisplay(); // Disable the scroll event listener while we are updating the DOM this.s.skip = true; // Resize the scroll forcing element this._fnScrollForce(); // Reposition the scrolling for the updated virtual position if needed if ( displayStart === 0 ) { // Linear calculation at the top of the table iScrollTop = this.s.topRowFloat * heights.row; } else if ( displayStart + displayLen >= displayEnd ) { // Linear calculation that the bottom as well iScrollTop = heights.scroll - ((displayEnd - this.s.topRowFloat) * heights.row); } else { // Domain scaled in the middle iScrollTop = this._domain( 'virtualToPhysical', this.s.topRowFloat * heights.row ); } this.dom.scroller.scrollTop = iScrollTop; // Store positional information so positional calculations can be based // upon the current table draw position this.s.baseScrollTop = iScrollTop; this.s.baseRowTop = this.s.topRowFloat; // Position the table in the virtual scroller var tableTop = iScrollTop - ((this.s.topRowFloat - displayStart) * heights.row); if ( displayStart === 0 ) { tableTop = 0; } else if ( displayStart + displayLen >= displayEnd ) { tableTop = heights.scroll - iTableHeight; } this.dom.table.style.top = tableTop+'px'; /* Cache some information for the scroller */ this.s.tableTop = tableTop; this.s.tableBottom = iTableHeight + this.s.tableTop; // Calculate the boundaries for where a redraw will be triggered by the // scroll event listener var boundaryPx = (iScrollTop - this.s.tableTop) * this.s.boundaryScale; this.s.redrawTop = iScrollTop - boundaryPx; this.s.redrawBottom = iScrollTop + boundaryPx; this.s.skip = false; // Restore the scrolling position that was saved by DataTable's state // saving Note that this is done on the second draw when data is Ajax // sourced, and the first draw when DOM soured if ( this.s.dt.oFeatures.bStateSave && this.s.dt.oLoadedState !== null && typeof this.s.dt.oLoadedState.iScroller != 'undefined' ) { // A quirk of DataTables is that the draw callback will occur on an // empty set if Ajax sourced, but not if server-side processing. var ajaxSourced = (this.s.dt.sAjaxSource || that.s.dt.ajax) && ! this.s.dt.oFeatures.bServerSide ? true : false; if ( ( ajaxSourced && this.s.dt.iDraw == 2) || (!ajaxSourced && this.s.dt.iDraw == 1) ) { setTimeout( function () { $(that.dom.scroller).scrollTop( that.s.dt.oLoadedState.iScroller ); that.s.redrawTop = that.s.dt.oLoadedState.iScroller - (heights.viewport/2); // In order to prevent layout thrashing we need another // small delay setTimeout( function () { that.s.ingnoreScroll = false; }, 0 ); }, 0 ); } } else { that.s.ingnoreScroll = false; } // Because of the order of the DT callbacks, the info update will // take precedence over the one we want here. So a 'thread' break is // needed setTimeout( function () { that._fnInfo.call( that ); }, 0 ); // Hide the loading indicator if ( this.dom.loader && this.s.loaderVisible ) { this.dom.loader.css( 'display', 'none' ); this.s.loaderVisible = false; } }, /** * Force the scrolling container to have height beyond that of just the * table that has been drawn so the user can scroll the whole data set. * * Note that if the calculated required scrolling height exceeds a maximum * value (1 million pixels - hard-coded) the forcing element will be set * only to that maximum value and virtual / physical domain transforms will * be used to allow Scroller to display tables of any number of records. * @returns {void} * @private */ _fnScrollForce: function () { var heights = this.s.heights; var max = 1000000; heights.virtual = heights.row * this.s.dt.fnRecordsDisplay(); heights.scroll = heights.virtual; if ( heights.scroll > max ) { heights.scroll = max; } this.dom.force.style.height = heights.scroll+"px"; }, /** * Automatic calculation of table row height. This is just a little tricky here as using * initialisation DataTables has tale the table out of the document, so we need to create * a new table and insert it into the document, calculate the row height and then whip the * table out. * @returns {void} * @private */ "_fnCalcRowHeight": function () { var dt = this.s.dt; var origTable = dt.nTable; var nTable = origTable.cloneNode( false ); var tbody = $('').appendTo( nTable ); var container = $( '
'+ '
'+ '
'+ '
'+ '
' ); // Want 3 rows in the sizing table so :first-child and :last-child // CSS styles don't come into play - take the size of the middle row $('tbody tr:lt(4)', origTable).clone().appendTo( tbody ); while( $('tr', tbody).length < 3 ) { tbody.append( ' ' ); } $('div.'+dt.oClasses.sScrollBody, container).append( nTable ); var appendTo; if (dt._bInitComplete) { appendTo = origTable.parentNode; } else { if (!this.s.dt.nHolding) { this.s.dt.nHolding = $( '
' ).insertBefore( this.s.dt.nTable ); } appendTo = this.s.dt.nHolding; } container.appendTo( appendTo ); this.s.heights.row = $('tr', tbody).eq(1).outerHeight(); container.remove(); }, /** * Update any information elements that are controlled by the DataTable based on the scrolling * viewport and what rows are visible in it. This function basically acts in the same way as * _fnUpdateInfo in DataTables, and effectively replaces that function. * @returns {void} * @private */ "_fnInfo": function () { if ( !this.s.dt.oFeatures.bInfo ) { return; } var dt = this.s.dt, language = dt.oLanguage, iScrollTop = this.dom.scroller.scrollTop, iStart = Math.floor( this.fnPixelsToRow(iScrollTop, false, this.s.ani)+1 ), iMax = dt.fnRecordsTotal(), iTotal = dt.fnRecordsDisplay(), iPossibleEnd = Math.ceil( this.fnPixelsToRow(iScrollTop+this.s.heights.viewport, false, this.s.ani) ), iEnd = iTotal < iPossibleEnd ? iTotal : iPossibleEnd, sStart = dt.fnFormatNumber( iStart ), sEnd = dt.fnFormatNumber( iEnd ), sMax = dt.fnFormatNumber( iMax ), sTotal = dt.fnFormatNumber( iTotal ), sOut; if ( dt.fnRecordsDisplay() === 0 && dt.fnRecordsDisplay() == dt.fnRecordsTotal() ) { /* Empty record set */ sOut = language.sInfoEmpty+ language.sInfoPostFix; } else if ( dt.fnRecordsDisplay() === 0 ) { /* Empty record set after filtering */ sOut = language.sInfoEmpty +' '+ language.sInfoFiltered.replace('_MAX_', sMax)+ language.sInfoPostFix; } else if ( dt.fnRecordsDisplay() == dt.fnRecordsTotal() ) { /* Normal record set */ sOut = language.sInfo. replace('_START_', sStart). replace('_END_', sEnd). replace('_MAX_', sMax). replace('_TOTAL_', sTotal)+ language.sInfoPostFix; } else { /* Record set after filtering */ sOut = language.sInfo. replace('_START_', sStart). replace('_END_', sEnd). replace('_MAX_', sMax). replace('_TOTAL_', sTotal) +' '+ language.sInfoFiltered.replace( '_MAX_', dt.fnFormatNumber(dt.fnRecordsTotal()) )+ language.sInfoPostFix; } var callback = language.fnInfoCallback; if ( callback ) { sOut = callback.call( dt.oInstance, dt, iStart, iEnd, iMax, iTotal, sOut ); } var n = dt.aanFeatures.i; if ( typeof n != 'undefined' ) { for ( var i=0, iLen=n.length ; i t3iIDATxڌm 0UvΠv.XG46r/G7 v1S-A< *(}uNq #fmM!{+:PjIENDB`extensions/Scroller/Readme.txt000064400000004313147211617400012472 0ustar00# Scroller Scroller is a virtual rendering plug-in for DataTables which allows large datasets to be drawn on screen every quickly. What the virtual rendering means is that only the visible portion of the table (and a bit to either side to make the scrolling smooth) is drawn, while the scrolling container gives the visual impression that the whole table is visible. This is done by making use of the pagination abilities of DataTables and moving the table around in the scrolling container DataTables adds to the page. The scrolling container is forced to the height it would be for the full table display using an extra element. Key features include: * Speed! The aim of Scroller for DataTables is to make rendering large data sets fast * Full compatibility with DataTables' deferred rendering for maximum speed * Integration with state saving in DataTables (scrolling position is saved) * Support for scrolling with millions of rows * Easy to use # Installation To use Scroller, first download DataTables ( http://datatables.net/download ) and place the unzipped Scroller package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser. # Basic usage Scroller is initialised by simply including the letter `dt-string S` in the `dt-init dom` for the table you want to have this feature enabled on. Note that the `dt-string S` must come after the `dt-string t` parameter in `dom`. For example: ```js $(document).ready( function () { $('#example').DataTable( { dom: 'lfrtipS' } ); } ); ``` Note that rows in the table must all be the same height. Information in a cell which expands on to multiple lines will cause some odd behaviour in the scrolling. Additionally, the table's `cellspacing` parameter must be set to 0, again to ensure the information display is correct. # Documentation / support * Documentation: http://datatables.net/extensions/scroller/ * DataTables support forums: http://datatables.net/forums # GitHub If you fancy getting involved with the development of Scroller and help make it better, please refer to its GitHub repo: https://github.com/DataTables/Scroller extensions/Scroller/css/dataTables.scroller.css000064400000001306147211617400015725 0ustar00 /* * Namespace: DTS (DataTables Scroller) */ div.DTS tbody th, div.DTS tbody td { white-space: nowrap; } div.DTS tbody tr.even { background-color: white; } div.DTS div.DTS_Loading { position: absolute; top: 50%; left: 50%; width: 200px; height: 20px; margin-top: -20px; margin-left: -100px; z-index: 1; border: 1px solid #999; padding: 20px 0; text-align: center; background-color: white; background-color: rgba(255, 255, 255, 0.5); } div.DTS div.dataTables_scrollHead, div.DTS div.dataTables_scrollFoot { background-color: white; } div.DTS div.dataTables_scrollBody { z-index: 2; } div.DTS div.dataTables_scroll { background: url('../images/loading-background.png') repeat 0 0; } extensions/Scroller/css/dataTables.scroller.min.css000064400000001074147211617400016511 0ustar00div.DTS tbody th,div.DTS tbody td{white-space:nowrap}div.DTS tbody tr.even{background-color:white}div.DTS div.DTS_Loading{position:absolute;top:50%;left:50%;width:200px;height:20px;margin-top:-20px;margin-left:-100px;z-index:1;border:1px solid #999;padding:20px 0;text-align:center;background-color:white;background-color:rgba(255,255,255,0.5)}div.DTS div.dataTables_scrollHead,div.DTS div.dataTables_scrollFoot{background-color:white}div.DTS div.dataTables_scrollBody{z-index:2}div.DTS div.dataTables_scroll{background:url("../images/loading-background.png") repeat 0 0} extensions/FixedColumns/examples/left_right_columns.html000064400000051567147211617400017757 0ustar00 FixedColumns example - Left and right fixed columns

FixedColumns example Left and right fixed columns

FixedColumns allows columns to be fixed from both the left and right hand sides of the table. Fixing right hand-side columns is done by using the rightColumns initialisation parameter, which works just the same as leftColumns does for the left side of the table. This example shows both the left and right columns being fixed in place.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table, { leftColumns: 1, rightColumns: 1 } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/css_size.html000064400000053251147211617400015702 0ustar00 FixedColumns example - CSS row sizing

FixedColumns example CSS row sizing

Because of the method FixedColumns uses to display the fixed columns, an important consideration is the alignment of the rows due to different heights in the individual rows of the table. There are two different algorithms in FixedColumns which can be used, or you can switch off automatic row sizing all together. This is controlled through the heightMatch parameter. If can take the following values:

  • none - no automatic row height matching is performed. CSS can be used in this case and is useful when speed is of primary importance.
  • semiauto (default) - the height calculation will be performed once, and the result cached to be used again (fnRecalculateHeight can be used to force recalculation)
  • auto - height matching is performed on every draw (slowest but must accurate)

This example shows row height matching switched off but there is a CSS statement of tr { height: 50px } to force all rows to the same height.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table, { heightMatch: 'none' } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; } tr { height: 50px; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/size_fluid.html000064400000052442147211617400016216 0ustar00 FixedColumns example - Fluid column width

FixedColumns example Fluid column width

The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width of the column can be controlled using the columns.widthDT option.

This example shows the first column being set to width: 20% (note that this is not pixel perfect in a table, the browser will make some adjustments!), a width that is reflected in the fixed column. Resize the browser window horizontally and you will be able to see that the fixed column retains its proportional width (again with a small margin dictated by the browser) in the resizing table.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, columnDefs: [ { width: '20%', targets: 0 } ] } ); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { margin: 0 auto; } div.container { width: 80%; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/col_filter.html000064400000053723147211617400016206 0ustar00 FixedColumns example - Individual column filtering

FixedColumns example Individual column filtering

This example shows FixedColumns being configured with individual column filtering abilities. Note that the event handler for the filtering is applied to the input elements before FixedColumns is initialised, so when FixedColumns clones nodes it also copies the event.

First name Last name Position Office Age Start date Salary Extn. E-mail
First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $('#example thead th').eq( $(this).index() ).text(); $(this).html( '<input type="text" placeholder="Search '+title+'" />' ); } ); // DataTable var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); // Apply the filter table.columns().indexes().each( function (idx) { $( 'input', table.column( idx ).footer() ).on( 'keyup change', function () { table .column( idx ) .search( this.value ) .draw(); } ); } ); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/rowspan.html000064400000043565147211617400015560 0ustar00 FixedColumns example - Complex headers

FixedColumns example Complex headers

If you are using multiple rows in the table header, it can be useful to have a rowspanning cell on the column(s) you have fixed in place - equally at other times it can be useful to not and make use of the two or more cells per column. FixedColumns builds on the complex header support in DataTables to make this trivial to use in FixedColumns. Just initialise your FixedColumns instance as you normally would!

Name HR Information Contact
Position Salary Office Extn. E-mail
Name Position Salary Office Extn. E-mail
Tiger Nixon System Architect $320,800 Edinburgh 5421 t.nixon@datatables.net
Garrett Winters Accountant $170,750 Tokyo 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author $86,000 San Francisco 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224 c.kelly@datatables.net
Airi Satou Accountant $162,700 Tokyo 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist $372,000 New York 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant $137,500 San Francisco 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist $327,900 Tokyo 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer $205,500 San Francisco 2360 c.hurst@datatables.net
Sonya Frost Software Engineer $103,600 Edinburgh 1667 s.frost@datatables.net
Jena Gaines Office Manager $90,560 London 3814 j.gaines@datatables.net
Quinn Flynn Support Lead $342,000 Edinburgh 9497 q.flynn@datatables.net
Charde Marshall Regional Director $470,600 San Francisco 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer $313,500 London 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director $385,750 London 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer $198,500 London 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) $725,000 New York 3059 p.byrd@datatables.net
Gloria Little Systems Administrator $237,500 New York 1721 g.little@datatables.net
Bradley Greer Software Engineer $132,000 London 2558 b.greer@datatables.net
Dai Rios Personnel Lead $217,500 Edinburgh 2290 d.rios@datatables.net
Jenette Caldwell Development Lead $345,000 New York 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) $675,000 New York 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support $106,450 New York 8330 c.vance@datatables.net
Doris Wilder Sales Assistant $85,600 Sidney 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) $1,200,000 London 5797 a.ramos@datatables.net
Gavin Joyce Developer $92,575 Edinburgh 8822 g.joyce@datatables.net
Jennifer Chang Regional Director $357,650 Singapore 9239 j.chang@datatables.net
Brenden Wagner Software Engineer $206,850 San Francisco 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) $850,000 San Francisco 2947 f.green@datatables.net
Shou Itou Regional Marketing $163,000 Tokyo 8899 s.itou@datatables.net
Michelle House Integration Specialist $95,400 Sidney 2769 m.house@datatables.net
Suki Burks Developer $114,500 London 6832 s.burks@datatables.net
Prescott Bartlett Technical Author $145,000 London 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader $235,500 San Francisco 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support $324,050 Edinburgh 8240 m.mccray@datatables.net
Unity Butler Marketing Designer $85,675 San Francisco 5384 u.butler@datatables.net
Howard Hatfield Office Manager $164,500 San Francisco 7031 h.hatfield@datatables.net
Hope Fuentes Secretary $109,850 San Francisco 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller $452,500 San Francisco 9422 v.harrell@datatables.net
Timothy Mooney Office Manager $136,200 London 7580 t.mooney@datatables.net
Jackson Bradshaw Director $645,750 New York 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer $234,500 Singapore 2120 o.liang@datatables.net
Bruno Nash Software Engineer $163,500 London 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer $139,575 Tokyo 9383 s.yamamoto@datatables.net
Thor Walton Developer $98,540 New York 8327 t.walton@datatables.net
Finn Camacho Support Engineer $87,500 San Francisco 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator $138,575 Singapore 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer $125,250 New York 7439 z.frank@datatables.net
Zorita Serrano Software Engineer $115,000 San Francisco 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer $75,650 Edinburgh 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant $145,600 New York 3990 c.stevens@datatables.net
Hermione Butler Regional Director $356,250 London 1016 h.butler@datatables.net
Lael Greer Systems Administrator $103,500 London 6733 l.greer@datatables.net
Jonas Alexander Developer $86,500 San Francisco 8196 j.alexander@datatables.net
Shad Decker Regional Director $183,000 Edinburgh 6373 s.decker@datatables.net
Michael Bruce Javascript Developer $183,000 Singapore 5384 m.bruce@datatables.net
Donna Snider Customer Support $112,000 New York 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; padding-left: 40px !important; padding-right: 40px !important; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/simple.html000064400000052254147211617400015353 0ustar00 FixedColumns example - Basic initialisation

FixedColumns example Basic initialisation

When displaying a table which scrolls along the x-axis, it can sometimes be useful to the end user for the left most column to be fixed in place, if it shows grouping, index or similar information. This is basically the same idea as 'freeze columns' in Excel. This can be achieved with the FixedColumns plug-in for DataTables, as shown below.

Note that FixedColumns is suitable only for use with the scrolling features in DataTables. If you want to achieve a similar effect without scrolling enabled, please checkout FixedHeader, also for DataTables.

FixedColumns is initialised using the constructor new $.fn.dataTable.FixedColumns(); - shown below.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/server-side-processing.html000064400000016662147211617400020467 0ustar00 FixedColumns example - Server-side processing

FixedColumns example Server-side processing

This example shows how FixedColumns can be used with server-side processing in DataTables to cope with very large tables. No special considerations are required, just initialise FixedColumns as you normally would!

Note that the table width is constrained in this example to allow scrolling to occur as the server-side processing data set has a limited number of columns in this demo!

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, ajax: "../../../examples/server_side/scripts/server_processing.php", serverSide: true } ); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 600px; margin: 0 auto; } /* Lots of padding for the cells as SSP has limited data in the demo */ th, td { padding-left: 40px !important; padding-right: 40px !important; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/bootstrap.html000064400000053210147211617400016070 0ustar00 FixedColumns example - Bootstrap

FixedColumns example Bootstrap

When displaying a table which scrolls along the x-axis, it can sometimes be useful to the end user for the left most column to be fixed in place, if it shows grouping, index or similar information. This is basically the same idea as 'freeze columns' in Excel. This can be achieved with the FixedColumns plug-in for DataTables, as shown below.

Note that FixedColumns is suitable only for use with the scrolling features in DataTables. If you want to achieve a similar effect without scrolling enabled, please checkout FixedHeader, also for DataTables.

FixedColumns is initialised using the constructor new $.fn.dataTable.FixedColumns(); - shown below.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

body { font-size: 140%; } /* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/colvis.html000064400000053572147211617400015365 0ustar00 FixedColumns example - ColVis integration

FixedColumns example ColVis integration

FixedColumns operates with DataTables' built-in column visibility options (columns.visibleDT and column().visible()DT), which columns that are hidden not being shown in the fixed columns. This integration also means that FixedColumns works well with ColVis, with columns that are dynamically shown and hidden updated immediately in the fixed columns.

The example below shows ColVis and FixedColumns working together. Two columns have been fixed on the left hand side of the table to show FixedColumns ability to work effortlessly with column visibility.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { dom: "Cfrtip", scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table, { leftColumns: 2 } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; } div.ColVis { float: left; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/index_column.html000064400000056313147211617400016546 0ustar00 FixedColumns example - Index column

FixedColumns example Index column

A typical interaction to want to perform with a fixed column, is an index column. A method for how this can be achieved with FixedColumns is shown in this example, building on the index column example for DataTables. Also shown in this example is how the fixed column can be styled with CSS to show it more prominently.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, columnDefs: [ { sortable: false, "class": "index", targets: 0 } ], order: [[ 1, 'asc' ]] } ); table.on( 'order.dt search.dt', function () { table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) { cell.innerHTML = i+1; } ); } ).draw(); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; } /* Styling for the index columns */ th.index, td.index { background-color: white !important; border-top: 1px solid white !important; border-bottom: none !important; } div.DTFC_LeftHeadWrapper table { border-bottom: 1px solid white !important; } div.DTFC_LeftHeadWrapper th { border-bottom: 1px solid white !important; } div.DTFC_LeftBodyWrapper { border-right: 1px solid black; } div.DTFC_LeftFootWrapper th { border-top: 1px solid white !important; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/right_column.html000064400000051601147211617400016547 0ustar00 FixedColumns example - Right column only

FixedColumns example Right column only

FixedColumns has the ability to freeze columns on both the left and right hand sides of the table. By default it will fix the first column on the left, but using the initialisation parameters leftColumns and rightColumns you can alter this to fix the columns on the right as well. This example shows a single column fixed in place, in this case the right most column.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table, { leftColumns: 0, rightColumns: 1 } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/index.html000064400000006754147211617400015175 0ustar00 FixedColumns examples - FixedColumns examples

FixedColumns example FixedColumns examples

When making use of DataTables' x-axis scrolling feature (scrollXDT), you may wish to fix the left or right most columns in place. This extension for DataTables provides exactly this option (for non-scrolling tables, please use the FixedHeader extension, which can fix headers, footers and columns). Key features include:

  • Freezes the left most column to the side of the table
  • Option to freeze two or more columns
  • Full integration with DataTables' scrolling options

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/size_fixed.html000064400000052451147211617400016212 0ustar00 FixedColumns example - Assigned column width

FixedColumns example Assigned column width

The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width of the column can be controlled using the columns.widthDT option.

This example shows the first column being set to width: 200px (note that this is not pixel perfect in a table, the browser will make some adjustments!), a width that is reflected in the fixed column. Resize the browser window horizontally and you will be able to see that the fixed column retains its width while the scrolling viewport and the table resize.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').removeAttr('width').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, columnDefs: [ { width: 200, targets: 0 } ] } ); new $.fn.dataTable.FixedColumns( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { margin: 0 auto; } div.container { width: 80%; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/examples/two_columns.html000064400000051153147211617400016430 0ustar00 FixedColumns example - Multiple fixed columns

FixedColumns example Multiple fixed columns

FixedColumns allows more than one column to be frozen into place using the leftColumns parameter. The example below shows two columns fixed.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table, { leftColumns: 2 } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/FixedColumns/License.txt000064400000002100147211617400013462 0ustar00Copyright (c) 2010-2015 SpryMedia Limited http://datatables.net Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. extensions/FixedColumns/Readme.md000064400000002745147211617400013075 0ustar00# FixedColumns When making use of DataTables' x-axis scrolling feature (`scrollX`), you may wish to fix the left or right most columns in place. This plug-in for DataTables provides exactly this option (for non-scrolling tables, please use the FixedHeader plug-in, which can fix headers, footers and columns). Key features include: * Freezes the left most column to the side of the table * Option to freeze two or more columns * Full integration with DataTables' scrolling options # Installation To use FixedColumns, first download DataTables ( http://datatables.net/download ) and place the unzipped FixedColumns package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser. # Basic usage FixedColumns is initialised using the `$.fn.dataTable.FixedColumns()` constructor. For example: ```js $(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false } ); new $.fn.dataTable.FixedColumns( table ); } ); ``` # Documentation / support * Documentation: http://datatables.net/extensions/FixedColumns/ * DataTables support forums: http://datatables.net/forums # GitHub If you fancy getting involved with the development of FixedColumns and help make it better, please refer to its GitHub repo: https://github.com/DataTables/FixedColumns extensions/FixedColumns/js/dataTables.fixedColumns.js000064400000117744147211617400017041 0ustar00/*! FixedColumns 3.0.4 * ©2010-2014 SpryMedia Ltd - datatables.net/license */ /** * @summary FixedColumns * @description Freeze columns in place on a scrolling DataTable * @version 3.0.4 * @file dataTables.fixedColumns.js * @author SpryMedia Ltd (www.sprymedia.co.uk) * @contact www.sprymedia.co.uk/contact * @copyright Copyright 2010-2014 SpryMedia Ltd. * * This source file is free software, available under the following license: * MIT license - http://datatables.net/license/mit * * This source file is distributed in the hope that it will be useful, but * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. * * For details please refer to: http://www.datatables.net */ (function(window, document, undefined) { var factory = function( $, DataTable ) { "use strict"; /** * When making use of DataTables' x-axis scrolling feature, you may wish to * fix the left most column in place. This plug-in for DataTables provides * exactly this option (note for non-scrolling tables, please use the * FixedHeader plug-in, which can fix headers, footers and columns). Key * features include: * * * Freezes the left or right most columns to the side of the table * * Option to freeze two or more columns * * Full integration with DataTables' scrolling options * * Speed - FixedColumns is fast in its operation * * @class * @constructor * @global * @param {object} dt DataTables instance. With DataTables 1.10 this can also * be a jQuery collection, a jQuery selector, DataTables API instance or * settings object. * @param {object} [init={}] Configuration object for FixedColumns. Options are * defined by {@link FixedColumns.defaults} * * @requires jQuery 1.7+ * @requires DataTables 1.8.0+ * * @example * var table = $('#example').dataTable( { * "scrollX": "100%" * } ); * new $.fn.dataTable.fixedColumns( table ); */ var FixedColumns = function ( dt, init ) { var that = this; /* Sanity check - you just know it will happen */ if ( ! ( this instanceof FixedColumns ) ) { alert( "FixedColumns warning: FixedColumns must be initialised with the 'new' keyword." ); return; } if ( typeof init == 'undefined' ) { init = {}; } // Use the DataTables Hungarian notation mapping method, if it exists to // provide forwards compatibility for camel case variables var camelToHungarian = $.fn.dataTable.camelToHungarian; if ( camelToHungarian ) { camelToHungarian( FixedColumns.defaults, FixedColumns.defaults, true ); camelToHungarian( FixedColumns.defaults, init ); } // v1.10 allows the settings object to be got form a number of sources var dtSettings = $.fn.dataTable.Api ? new $.fn.dataTable.Api( dt ).settings()[0] : dt.fnSettings(); /** * Settings object which contains customisable information for FixedColumns instance * @namespace * @extends FixedColumns.defaults * @private */ this.s = { /** * DataTables settings objects * @type object * @default Obtained from DataTables instance */ "dt": dtSettings, /** * Number of columns in the DataTable - stored for quick access * @type int * @default Obtained from DataTables instance */ "iTableColumns": dtSettings.aoColumns.length, /** * Original outer widths of the columns as rendered by DataTables - used to calculate * the FixedColumns grid bounding box * @type array. * @default [] */ "aiOuterWidths": [], /** * Original inner widths of the columns as rendered by DataTables - used to apply widths * to the columns * @type array. * @default [] */ "aiInnerWidths": [] }; /** * DOM elements used by the class instance * @namespace * @private * */ this.dom = { /** * DataTables scrolling element * @type node * @default null */ "scroller": null, /** * DataTables header table * @type node * @default null */ "header": null, /** * DataTables body table * @type node * @default null */ "body": null, /** * DataTables footer table * @type node * @default null */ "footer": null, /** * Display grid elements * @namespace */ "grid": { /** * Grid wrapper. This is the container element for the 3x3 grid * @type node * @default null */ "wrapper": null, /** * DataTables scrolling element. This element is the DataTables * component in the display grid (making up the main table - i.e. * not the fixed columns). * @type node * @default null */ "dt": null, /** * Left fixed column grid components * @namespace */ "left": { "wrapper": null, "head": null, "body": null, "foot": null }, /** * Right fixed column grid components * @namespace */ "right": { "wrapper": null, "head": null, "body": null, "foot": null } }, /** * Cloned table nodes * @namespace */ "clone": { /** * Left column cloned table nodes * @namespace */ "left": { /** * Cloned header table * @type node * @default null */ "header": null, /** * Cloned body table * @type node * @default null */ "body": null, /** * Cloned footer table * @type node * @default null */ "footer": null }, /** * Right column cloned table nodes * @namespace */ "right": { /** * Cloned header table * @type node * @default null */ "header": null, /** * Cloned body table * @type node * @default null */ "body": null, /** * Cloned footer table * @type node * @default null */ "footer": null } } }; /* Attach the instance to the DataTables instance so it can be accessed easily */ dtSettings._oFixedColumns = this; /* Let's do it */ if ( ! dtSettings._bInitComplete ) { dtSettings.oApi._fnCallbackReg( dtSettings, 'aoInitComplete', function () { that._fnConstruct( init ); }, 'FixedColumns' ); } else { this._fnConstruct( init ); } }; FixedColumns.prototype = /** @lends FixedColumns.prototype */{ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Public methods * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /** * Update the fixed columns - including headers and footers. Note that FixedColumns will * automatically update the display whenever the host DataTable redraws. * @returns {void} * @example * var table = $('#example').dataTable( { * "scrollX": "100%" * } ); * var fc = new $.fn.dataTable.fixedColumns( table ); * * // at some later point when the table has been manipulated.... * fc.fnUpdate(); */ "fnUpdate": function () { this._fnDraw( true ); }, /** * Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table. * This is useful if you update the width of the table container. Note that FixedColumns will * perform this function automatically when the window.resize event is fired. * @returns {void} * @example * var table = $('#example').dataTable( { * "scrollX": "100%" * } ); * var fc = new $.fn.dataTable.fixedColumns( table ); * * // Resize the table container and then have FixedColumns adjust its layout.... * $('#content').width( 1200 ); * fc.fnRedrawLayout(); */ "fnRedrawLayout": function () { this._fnColCalc(); this._fnGridLayout(); this.fnUpdate(); }, /** * Mark a row such that it's height should be recalculated when using 'semiauto' row * height matching. This function will have no effect when 'none' or 'auto' row height * matching is used. * @param {Node} nTr TR element that should have it's height recalculated * @returns {void} * @example * var table = $('#example').dataTable( { * "scrollX": "100%" * } ); * var fc = new $.fn.dataTable.fixedColumns( table ); * * // manipulate the table - mark the row as needing an update then update the table * // this allows the redraw performed by DataTables fnUpdate to recalculate the row * // height * fc.fnRecalculateHeight(); * table.fnUpdate( $('#example tbody tr:eq(0)')[0], ["insert date", 1, 2, 3 ... ]); */ "fnRecalculateHeight": function ( nTr ) { delete nTr._DTTC_iHeight; nTr.style.height = 'auto'; }, /** * Set the height of a given row - provides cross browser compatibility * @param {Node} nTarget TR element that should have it's height recalculated * @param {int} iHeight Height in pixels to set * @returns {void} * @example * var table = $('#example').dataTable( { * "scrollX": "100%" * } ); * var fc = new $.fn.dataTable.fixedColumns( table ); * * // You may want to do this after manipulating a row in the fixed column * fc.fnSetRowHeight( $('#example tbody tr:eq(0)')[0], 50 ); */ "fnSetRowHeight": function ( nTarget, iHeight ) { nTarget.style.height = iHeight+"px"; }, /** * Get data index information about a row or cell in the table body. * This function is functionally identical to fnGetPosition in DataTables, * taking the same parameter (TH, TD or TR node) and returning exactly the * the same information (data index information). THe difference between * the two is that this method takes into account the fixed columns in the * table, so you can pass in nodes from the master table, or the cloned * tables and get the index position for the data in the main table. * @param {node} node TR, TH or TD element to get the information about * @returns {int} If nNode is given as a TR, then a single index is * returned, or if given as a cell, an array of [row index, column index * (visible), column index (all)] is given. */ "fnGetPosition": function ( node ) { var idx; var inst = this.s.dt.oInstance; if ( ! $(node).parents('.DTFC_Cloned').length ) { // Not in a cloned table return inst.fnGetPosition( node ); } else { // Its in the cloned table, so need to look up position if ( node.nodeName.toLowerCase() === 'tr' ) { idx = $(node).index(); return inst.fnGetPosition( $('tr', this.s.dt.nTBody)[ idx ] ); } else { var colIdx = $(node).index(); idx = $(node.parentNode).index(); var row = inst.fnGetPosition( $('tr', this.s.dt.nTBody)[ idx ] ); return [ row, colIdx, inst.oApi._fnVisibleToColumnIndex( this.s.dt, colIdx ) ]; } } }, /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Private methods (they are of course public in JS, but recommended as private) * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /** * Initialisation for FixedColumns * @param {Object} oInit User settings for initialisation * @returns {void} * @private */ "_fnConstruct": function ( oInit ) { var i, iLen, iWidth, that = this; /* Sanity checking */ if ( typeof this.s.dt.oInstance.fnVersionCheck != 'function' || this.s.dt.oInstance.fnVersionCheck( '1.8.0' ) !== true ) { alert( "FixedColumns "+FixedColumns.VERSION+" required DataTables 1.8.0 or later. "+ "Please upgrade your DataTables installation" ); return; } if ( this.s.dt.oScroll.sX === "" ) { this.s.dt.oInstance.oApi._fnLog( this.s.dt, 1, "FixedColumns is not needed (no "+ "x-scrolling in DataTables enabled), so no action will be taken. Use 'FixedHeader' for "+ "column fixing when scrolling is not enabled" ); return; } /* Apply the settings from the user / defaults */ this.s = $.extend( true, this.s, FixedColumns.defaults, oInit ); /* Set up the DOM as we need it and cache nodes */ var classes = this.s.dt.oClasses; this.dom.grid.dt = $(this.s.dt.nTable).parents('div.'+classes.sScrollWrapper)[0]; this.dom.scroller = $('div.'+classes.sScrollBody, this.dom.grid.dt )[0]; /* Set up the DOM that we want for the fixed column layout grid */ this._fnColCalc(); this._fnGridSetup(); /* Event handlers */ var mouseController; // When the body is scrolled - scroll the left and right columns $(this.dom.scroller) .on( 'mouseover.DTFC touchstart.DTFC', function () { mouseController = 'main'; } ) .on( 'scroll.DTFC', function () { if ( mouseController === 'main' ) { if ( that.s.iLeftColumns > 0 ) { that.dom.grid.left.liner.scrollTop = that.dom.scroller.scrollTop; } if ( that.s.iRightColumns > 0 ) { that.dom.grid.right.liner.scrollTop = that.dom.scroller.scrollTop; } } } ); var wheelType = 'onwheel' in document.createElement('div') ? 'wheel.DTFC' : 'mousewheel.DTFC'; if ( that.s.iLeftColumns > 0 ) { // When scrolling the left column, scroll the body and right column $(that.dom.grid.left.liner) .on( 'mouseover.DTFC touchstart.DTFC', function () { mouseController = 'left'; } ) .on( 'scroll.DTFC', function () { if ( mouseController === 'left' ) { that.dom.scroller.scrollTop = that.dom.grid.left.liner.scrollTop; if ( that.s.iRightColumns > 0 ) { that.dom.grid.right.liner.scrollTop = that.dom.grid.left.liner.scrollTop; } } } ) .on( wheelType, function(e) { // xxx update the destroy as well // Pass horizontal scrolling through var xDelta = e.type === 'wheel' ? -e.originalEvent.deltaX : e.originalEvent.wheelDeltaX; that.dom.scroller.scrollLeft -= xDelta; } ); } if ( that.s.iRightColumns > 0 ) { // When scrolling the right column, scroll the body and the left column $(that.dom.grid.right.liner) .on( 'mouseover.DTFC touchstart.DTFC', function () { mouseController = 'right'; } ) .on( 'scroll.DTFC', function () { if ( mouseController === 'right' ) { that.dom.scroller.scrollTop = that.dom.grid.right.liner.scrollTop; if ( that.s.iLeftColumns > 0 ) { that.dom.grid.left.liner.scrollTop = that.dom.grid.right.liner.scrollTop; } } } ) .on( wheelType, function(e) { // Pass horizontal scrolling through var xDelta = e.type === 'wheel' ? -e.originalEvent.deltaX : e.originalEvent.wheelDeltaX; that.dom.scroller.scrollLeft -= xDelta; } ); } $(window).on( 'resize.DTFC', function () { that._fnGridLayout.call( that ); } ); var bFirstDraw = true; var jqTable = $(this.s.dt.nTable); jqTable .on( 'draw.dt.DTFC', function () { that._fnDraw.call( that, bFirstDraw ); bFirstDraw = false; } ) .on( 'column-sizing.dt.DTFC', function () { that._fnColCalc(); that._fnGridLayout( that ); } ) .on( 'column-visibility.dt.DTFC', function () { that._fnColCalc(); that._fnGridLayout( that ); that._fnDraw( true ); } ) .on( 'destroy.dt.DTFC', function () { jqTable.off( 'column-sizing.dt.DTFC destroy.dt.DTFC draw.dt.DTFC' ); $(that.dom.scroller).off( 'scroll.DTFC mouseover.DTFC' ); $(window).off( 'resize.DTFC' ); $(that.dom.grid.left.liner).off( 'scroll.DTFC mouseover.DTFC '+wheelType ); $(that.dom.grid.left.wrapper).remove(); $(that.dom.grid.right.liner).off( 'scroll.DTFC mouseover.DTFC '+wheelType ); $(that.dom.grid.right.wrapper).remove(); } ); /* Get things right to start with - note that due to adjusting the columns, there must be * another redraw of the main table. It doesn't need to be a full redraw however. */ this._fnGridLayout(); this.s.dt.oInstance.fnDraw(false); }, /** * Calculate the column widths for the grid layout * @returns {void} * @private */ "_fnColCalc": function () { var that = this; var iLeftWidth = 0; var iRightWidth = 0; this.s.aiInnerWidths = []; this.s.aiOuterWidths = []; $.each( this.s.dt.aoColumns, function (i, col) { var th = $(col.nTh); var border; if ( ! th.filter(':visible').length ) { that.s.aiInnerWidths.push( 0 ); that.s.aiOuterWidths.push( 0 ); } else { // Inner width is used to assign widths to cells // Outer width is used to calculate the container var iWidth = th.outerWidth(); // When working with the left most-cell, need to add on the // table's border to the outerWidth, since we need to take // account of it, but it isn't in any cell if ( that.s.aiOuterWidths.length === 0 ) { border = $(that.s.dt.nTable).css('border-left-width'); iWidth += typeof border === 'string' ? 1 : parseInt( border, 10 ); } // Likewise with the final column on the right if ( that.s.aiOuterWidths.length === that.s.dt.aoColumns.length-1 ) { border = $(that.s.dt.nTable).css('border-right-width'); iWidth += typeof border === 'string' ? 1 : parseInt( border, 10 ); } that.s.aiOuterWidths.push( iWidth ); that.s.aiInnerWidths.push( th.width() ); if ( i < that.s.iLeftColumns ) { iLeftWidth += iWidth; } if ( that.s.iTableColumns-that.s.iRightColumns <= i ) { iRightWidth += iWidth; } } } ); this.s.iLeftWidth = iLeftWidth; this.s.iRightWidth = iRightWidth; }, /** * Set up the DOM for the fixed column. The way the layout works is to create a 1x3 grid * for the left column, the DataTable (for which we just reuse the scrolling element DataTable * puts into the DOM) and the right column. In each of he two fixed column elements there is a * grouping wrapper element and then a head, body and footer wrapper. In each of these we then * place the cloned header, body or footer tables. This effectively gives as 3x3 grid structure. * @returns {void} * @private */ "_fnGridSetup": function () { var that = this; var oOverflow = this._fnDTOverflow(); var block; this.dom.body = this.s.dt.nTable; this.dom.header = this.s.dt.nTHead.parentNode; this.dom.header.parentNode.parentNode.style.position = "relative"; var nSWrapper = $('
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
')[0]; var nLeft = nSWrapper.childNodes[0]; var nRight = nSWrapper.childNodes[1]; this.dom.grid.dt.parentNode.insertBefore( nSWrapper, this.dom.grid.dt ); nSWrapper.appendChild( this.dom.grid.dt ); this.dom.grid.wrapper = nSWrapper; if ( this.s.iLeftColumns > 0 ) { this.dom.grid.left.wrapper = nLeft; this.dom.grid.left.head = nLeft.childNodes[0]; this.dom.grid.left.body = nLeft.childNodes[1]; this.dom.grid.left.liner = $('div.DTFC_LeftBodyLiner', nSWrapper)[0]; nSWrapper.appendChild( nLeft ); } if ( this.s.iRightColumns > 0 ) { this.dom.grid.right.wrapper = nRight; this.dom.grid.right.head = nRight.childNodes[0]; this.dom.grid.right.body = nRight.childNodes[1]; this.dom.grid.right.liner = $('div.DTFC_RightBodyLiner', nSWrapper)[0]; block = $('div.DTFC_RightHeadBlocker', nSWrapper)[0]; block.style.width = oOverflow.bar+"px"; block.style.right = -oOverflow.bar+"px"; this.dom.grid.right.headBlock = block; block = $('div.DTFC_RightFootBlocker', nSWrapper)[0]; block.style.width = oOverflow.bar+"px"; block.style.right = -oOverflow.bar+"px"; this.dom.grid.right.footBlock = block; nSWrapper.appendChild( nRight ); } if ( this.s.dt.nTFoot ) { this.dom.footer = this.s.dt.nTFoot.parentNode; if ( this.s.iLeftColumns > 0 ) { this.dom.grid.left.foot = nLeft.childNodes[2]; } if ( this.s.iRightColumns > 0 ) { this.dom.grid.right.foot = nRight.childNodes[2]; } } }, /** * Style and position the grid used for the FixedColumns layout * @returns {void} * @private */ "_fnGridLayout": function () { var oGrid = this.dom.grid; var iWidth = $(oGrid.wrapper).width(); var iBodyHeight = $(this.s.dt.nTable.parentNode).outerHeight(); var iFullHeight = $(this.s.dt.nTable.parentNode.parentNode).outerHeight(); var oOverflow = this._fnDTOverflow(); var iLeftWidth = this.s.iLeftWidth, iRightWidth = this.s.iRightWidth, iRight; var scrollbarAdjust = function ( node, width ) { if ( ! oOverflow.bar ) { // If there is no scrollbar (Macs) we need to hide the auto scrollbar node.style.width = (width+20)+"px"; node.style.paddingRight = "20px"; node.style.boxSizing = "border-box"; } else { // Otherwise just overflow by the scrollbar node.style.width = (width+oOverflow.bar)+"px"; } }; // When x scrolling - don't paint the fixed columns over the x scrollbar if ( oOverflow.x ) { iBodyHeight -= oOverflow.bar; } oGrid.wrapper.style.height = iFullHeight+"px"; if ( this.s.iLeftColumns > 0 ) { oGrid.left.wrapper.style.width = iLeftWidth+"px"; oGrid.left.wrapper.style.height = "1px"; oGrid.left.body.style.height = iBodyHeight+"px"; if ( oGrid.left.foot ) { oGrid.left.foot.style.top = (oOverflow.x ? oOverflow.bar : 0)+"px"; // shift footer for scrollbar } scrollbarAdjust( oGrid.left.liner, iLeftWidth ); oGrid.left.liner.style.height = iBodyHeight+"px"; } if ( this.s.iRightColumns > 0 ) { iRight = iWidth - iRightWidth; if ( oOverflow.y ) { iRight -= oOverflow.bar; } oGrid.right.wrapper.style.width = iRightWidth+"px"; oGrid.right.wrapper.style.left = iRight+"px"; oGrid.right.wrapper.style.height = "1px"; oGrid.right.body.style.height = iBodyHeight+"px"; if ( oGrid.right.foot ) { oGrid.right.foot.style.top = (oOverflow.x ? oOverflow.bar : 0)+"px"; } scrollbarAdjust( oGrid.right.liner, iRightWidth ); oGrid.right.liner.style.height = iBodyHeight+"px"; oGrid.right.headBlock.style.display = oOverflow.y ? 'block' : 'none'; oGrid.right.footBlock.style.display = oOverflow.y ? 'block' : 'none'; } }, /** * Get information about the DataTable's scrolling state - specifically if the table is scrolling * on either the x or y axis, and also the scrollbar width. * @returns {object} Information about the DataTables scrolling state with the properties: * 'x', 'y' and 'bar' * @private */ "_fnDTOverflow": function () { var nTable = this.s.dt.nTable; var nTableScrollBody = nTable.parentNode; var out = { "x": false, "y": false, "bar": this.s.dt.oScroll.iBarWidth }; if ( nTable.offsetWidth > nTableScrollBody.clientWidth ) { out.x = true; } if ( nTable.offsetHeight > nTableScrollBody.clientHeight ) { out.y = true; } return out; }, /** * Clone and position the fixed columns * @returns {void} * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true) * @private */ "_fnDraw": function ( bAll ) { this._fnGridLayout(); this._fnCloneLeft( bAll ); this._fnCloneRight( bAll ); /* Draw callback function */ if ( this.s.fnDrawCallback !== null ) { this.s.fnDrawCallback.call( this, this.dom.clone.left, this.dom.clone.right ); } /* Event triggering */ $(this).trigger( 'draw.dtfc', { "leftClone": this.dom.clone.left, "rightClone": this.dom.clone.right } ); }, /** * Clone the right columns * @returns {void} * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true) * @private */ "_fnCloneRight": function ( bAll ) { if ( this.s.iRightColumns <= 0 ) { return; } var that = this, i, jq, aiColumns = []; for ( i=this.s.iTableColumns-this.s.iRightColumns ; ithead', oClone.header); jqCloneThead.empty(); /* Add the created cloned TR elements to the table */ for ( i=0, iLen=aoCloneLayout.length ; ithead', oClone.header)[0] ); for ( i=0, iLen=aoCloneLayout.length ; itbody>tr', that.dom.body).css('height', 'auto'); } if ( oClone.body !== null ) { oClone.body.parentNode.removeChild( oClone.body ); oClone.body = null; } oClone.body = $(this.dom.body).clone(true)[0]; oClone.body.className += " DTFC_Cloned"; oClone.body.style.paddingBottom = dt.oScroll.iBarWidth+"px"; oClone.body.style.marginBottom = (dt.oScroll.iBarWidth*2)+"px"; /* For IE */ if ( oClone.body.getAttribute('id') !== null ) { oClone.body.removeAttribute('id'); } $('>thead>tr', oClone.body).empty(); $('>tfoot', oClone.body).remove(); var nBody = $('tbody', oClone.body)[0]; $(nBody).empty(); if ( dt.aiDisplay.length > 0 ) { /* Copy the DataTables' header elements to force the column width in exactly the * same way that DataTables does it - have the header element, apply the width and * colapse it down */ var nInnerThead = $('>thead>tr', oClone.body)[0]; for ( iIndex=0 ; iIndextbody>tr', that.dom.body).each( function (z) { var n = this.cloneNode(false); n.removeAttribute('id'); var i = that.s.dt.oFeatures.bServerSide===false ? that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+z ] : z; var aTds = that.s.dt.aoData[ i ].anCells || $(this).children('td, th'); for ( iIndex=0 ; iIndex 0 ) { nClone = $( aTds[iColumn] ).clone(true, true)[0]; n.appendChild( nClone ); } } nBody.appendChild( n ); } ); } else { $('>tbody>tr', that.dom.body).each( function (z) { nClone = this.cloneNode(true); nClone.className += ' DTFC_NoData'; $('td', nClone).html(''); nBody.appendChild( nClone ); } ); } oClone.body.style.width = "100%"; oClone.body.style.margin = "0"; oClone.body.style.padding = "0"; // Interop with Scroller - need to use a height forcing element in the // scrolling area in the same way that Scroller does in the body scroll. if ( dt.oScroller !== undefined ) { var scrollerForcer = dt.oScroller.dom.force; if ( ! oGrid.forcer ) { oGrid.forcer = scrollerForcer.cloneNode( true ); oGrid.liner.appendChild( oGrid.forcer ); } else { oGrid.forcer.style.height = scrollerForcer.style.height; } } oGrid.liner.appendChild( oClone.body ); this._fnEqualiseHeights( 'tbody', that.dom.body, oClone.body ); /* * Footer */ if ( dt.nTFoot !== null ) { if ( bAll ) { if ( oClone.footer !== null ) { oClone.footer.parentNode.removeChild( oClone.footer ); } oClone.footer = $(this.dom.footer).clone(true, true)[0]; oClone.footer.className += " DTFC_Cloned"; oClone.footer.style.width = "100%"; oGrid.foot.appendChild( oClone.footer ); /* Copy the footer just like we do for the header */ aoCloneLayout = this._fnCopyLayout( dt.aoFooter, aiColumns ); var jqCloneTfoot = $('>tfoot', oClone.footer); jqCloneTfoot.empty(); for ( i=0, iLen=aoCloneLayout.length ; itfoot', oClone.footer)[0] ); for ( i=0, iLen=aoCloneLayout.length ; ithead', oClone.header)[0] ); $(anUnique).each( function (i) { iColumn = aiColumns[i]; this.style.width = that.s.aiInnerWidths[iColumn]+"px"; } ); if ( that.s.dt.nTFoot !== null ) { anUnique = dt.oApi._fnGetUniqueThs( dt, $('>tfoot', oClone.footer)[0] ); $(anUnique).each( function (i) { iColumn = aiColumns[i]; this.style.width = that.s.aiInnerWidths[iColumn]+"px"; } ); } }, /** * From a given table node (THEAD etc), get a list of TR direct child elements * @param {Node} nIn Table element to search for TR elements (THEAD, TBODY or TFOOT element) * @returns {Array} List of TR elements found * @private */ "_fnGetTrNodes": function ( nIn ) { var aOut = []; for ( var i=0, iLen=nIn.childNodes.length ; i'+nodeName+'>tr:eq(0)', original).children(':first'), iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height(), anOriginal = this._fnGetTrNodes( rootOriginal ), anClone = this._fnGetTrNodes( rootClone ), heights = []; for ( i=0, iLen=anClone.length ; i iHeightOriginal ? iHeightClone : iHeightOriginal; if ( this.s.sHeightMatch == 'semiauto' ) { anOriginal[i]._DTTC_iHeight = iHeight; } heights.push( iHeight ); } for ( i=0, iLen=anClone.length ; i
')[0], g=c.childNodes[0],f=c.childNodes[1];this.dom.grid.dt.parentNode.insertBefore(c,this.dom.grid.dt);c.appendChild(this.dom.grid.dt);this.dom.grid.wrapper=c;0b.clientWidth&&(c.x=!0);a.offsetHeight>b.clientHeight&&(c.y=!0);return c},_fnDraw:function(a){this._fnGridLayout();this._fnCloneLeft(a);this._fnCloneRight(a);null!==this.s.fnDrawCallback&&this.s.fnDrawCallback.call(this,this.dom.clone.left,this.dom.clone.right);d(this).trigger("draw.dtfc",{leftClone:this.dom.clone.left,rightClone:this.dom.clone.right})},_fnCloneRight:function(a){if(!(0>= this.s.iRightColumns)){var b,c=[];for(b=this.s.iTableColumns-this.s.iRightColumns;b=this.s.iLeftColumns)){var b,c=[];for(b=0;bthead",a.header);k.empty();e=0;for(h=n.length;ethead",a.header)[0]);e=0;for(h=n.length;etbody>tr",f.dom.body).css("height","auto");null!==a.body&&(a.body.parentNode.removeChild(a.body),a.body=null);a.body=d(this.dom.body).clone(!0)[0];a.body.className+=" DTFC_Cloned";a.body.style.paddingBottom=l.oScroll.iBarWidth+"px";a.body.style.marginBottom=2*l.oScroll.iBarWidth+"px";null!==a.body.getAttribute("id")&&a.body.removeAttribute("id");d(">thead>tr",a.body).empty();d(">tfoot", a.body).remove();var p=d("tbody",a.body)[0];d(p).empty();if(0thead>tr",a.body)[0];for(o=0;otbody>tr",f.dom.body).each(function(a){var b=this.cloneNode(false);b.removeAttribute("id");a=f.s.dt.aoData[f.s.dt.oFeatures.bServerSide===false?f.s.dt.aiDisplay[f.s.dt._iDisplayStart+ a]:a].anCells||d(this).children("td, th");for(o=0;o0){m=d(a[j]).clone(true,true)[0];b.appendChild(m)}}p.appendChild(b)})}else d(">tbody>tr",f.dom.body).each(function(){m=this.cloneNode(true);m.className=m.className+" DTFC_NoData";d("td",m).html("");p.appendChild(m)});a.body.style.width="100%";a.body.style.margin="0";a.body.style.padding="0";l.oScroller!==t&&(h=l.oScroller.dom.force,b.forcer?b.forcer.style.height=h.style.height:(b.forcer=h.cloneNode(!0),b.liner.appendChild(b.forcer))); b.liner.appendChild(a.body);this._fnEqualiseHeights("tbody",f.dom.body,a.body);if(null!==l.nTFoot){if(g){null!==a.footer&&a.footer.parentNode.removeChild(a.footer);a.footer=d(this.dom.footer).clone(!0,!0)[0];a.footer.className+=" DTFC_Cloned";a.footer.style.width="100%";b.foot.appendChild(a.footer);n=this._fnCopyLayout(l.aoFooter,c);b=d(">tfoot",a.footer);b.empty();e=0;for(h=n.length;etfoot",a.footer)[0]);e=0;for(h=n.length;ethead",a.header)[0]);d(b).each(function(a){j=c[a];this.style.width=f.s.aiInnerWidths[j]+"px"});null!==f.s.dt.nTFoot&&(b=l.oApi._fnGetUniqueThs(l,d(">tfoot",a.footer)[0]),d(b).each(function(a){j=c[a];this.style.width=f.s.aiInnerWidths[j]+"px"}))},_fnGetTrNodes:function(a){for(var b= [],c=0,d=a.childNodes.length;c"+a+">tr:eq(0)",b).children(":first");a.outerHeight();a.height();for(var e=this._fnGetTrNodes(e),b=this._fnGetTrNodes(c),h=[],c=0,a=b.length;cg?f:g,"semiauto"==this.s.sHeightMatch&& (e[c]._DTTC_iHeight=g),h.push(g);c=0;for(a=b.length;c Responsive example - Foundation styling

Responsive example Foundation styling

This example shows DataTables and the Responsive extension being used with the Foundation framework providing the styling. The DataTables / Foundation integration files prove seamless integration for DataTables to be used in a Foundation page.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable(); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

table.dataTable th, table.dataTable td { white-space: nowrap; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/styling/bootstrap.html000064400000055052147211617400017324 0ustar00 Responsive example - Bootstrap styling

Responsive example Bootstrap styling

This example shows DataTables and the Responsive extension being used with the Bootstrap framework providing the styling. The DataTables / Bootstrap integration files prove seamless integration for DataTables to be used in a Bootstrap page.

Note that the dt-responsive class is used to indicate to the extension that it should be enabled on this page, as responsive has special meaning in Bootstrap. The responsiveR option could also be used if required.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable(); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

body { font-size: 140% } table.dataTable th, table.dataTable td { white-space: nowrap; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/styling/scrolling.html000064400000053515147211617400017305 0ustar00 Responsive example - Vertical scrolling

Responsive example Vertical scrolling

This example shows Responsive in use with the scrollYDT option to present a scrolling table (instead of using paging as the other Responsive examples do). Responsive will automatically work with the table in such a configuration.

Responsive can be used with scrollXDT, however it is relatively pointless as Responsive will remove columns to ensure that there is no horizontal scrolling!

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { scrollY: 300, paging: false } ); new $.fn.dataTable.Responsive( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

div.container { max-width: 1200px }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/styling/compact.html000064400000053061147211617400016733 0ustar00 Responsive example - Compact styling

Responsive example Compact styling

DataTables' default stylesheet has a number number of features available that can be enabled by including a class name on the DataTable. One of those options is compact which displays the DataTable with less whitespace padding that might other be used to increase the information density of the table. Responsive's own style has support for this compact styling as showing in this example.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable(); new $.fn.dataTable.Responsive( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

div.container { max-width: 1200px }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/styling/index.html000064400000004565147211617400016421 0ustar00 Responsive examples - Styling

Responsive example Styling

Responsive requires very little styling information of its own, with styling needed only for the child row display when the table has been collapsed. As such, integrating Responsive with your application should be as simple as including the Javascript and base stylesheet! This section shows Responsive being styling using external CSS frameworks.

Styling

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/child-rows/right-column.html000064400000051330147211617400020274 0ustar00 Responsive example - Column control - right

Responsive example Column control - right

When using the column child row control type, Responsive has the ability to use any column or element as the show / hide control for the row details. This is provided through the responsive.details.targetR option, which can be either a column index, or a jQuery selector.

This example shows the last column in the table being used as the control column.

First name Last name Position Office Age Start date Salary Extn.
First name Last name Position Office Age Start date Salary Extn.
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769
Suki Burks Developer London 53 2009/10/22 $114,500 6832
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383
Thor Walton Developer New York 61 2013/08/11 $98,540 8327
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { responsive: { details: { type: 'column', target: -1 } }, columnDefs: [ { className: 'control', orderable: false, targets: -1 } ] } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/child-rows/column-control.html000064400000052546147211617400020651 0ustar00 Responsive example - Column controlled child rows

Responsive example Column controlled child rows

Responsive has two built in methods for displaying the controlling element of the child rows; inline which is the default option and shows the control in the first column, and column which set a control column as the control. The control column is shown only when there is some other column hidden, and is dedicated only to the show / hide control for the rows.

This example shows the responsive.details.typeR option set to column to activate the control column. Note that by default the first column is used as the control, so additionally in the initialisation the orderDT and columns.orderableDT options are used to disable sorting on this column.

First name Last name Position Office Age Start date Salary Extn.
First name Last name Position Office Age Start date Salary Extn.
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769
Suki Burks Developer London 53 2009/10/22 $114,500 6832
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383
Thor Walton Developer New York 61 2013/08/11 $98,540 8327
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { responsive: { details: { type: 'column' } }, columnDefs: [ { className: 'control', orderable: false, targets: 0 } ], order: [ 1, 'asc' ] } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/child-rows/custom-renderer.html000064400000055562147211617400021015 0ustar00 Responsive example - Custom child row renderer

Responsive example Custom child row renderer

The child row's for a collapsed table in Responsive, by default, show a ul/li list of the data from the hidden columns. The responsive.details.rendererR option provide the ability to create your own custom renderer. It is given two parameters: the DataTables API instance for the table and the row index to use.

This example shows the cells()DT method being used to select the hidden columns and constructing a table of the data. You could refine the selector to select only certain columns, or show all columns, etc.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { responsive: { details: { renderer: function ( api, rowIdx ) { // Select hidden columns for the given row var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) { var header = $( api.column( cell.column ).header() ); return '<tr>'+ '<td>'+ header.text()+':'+ '</td> '+ '<td>'+ api.cell( cell ).data()+ '</td>'+ '</tr>'; } ).toArray().join(''); return data ? $('<table/>').append( data ) : false; } } } } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/child-rows/disable-child-rows.html000064400000052770147211617400021351 0ustar00 Responsive example - Disable child rows

Responsive example Disable child rows

By default, when Responsive collapses a table, it will show an option for the end user to expand the row, showing the details of the hidden columns in a child row. This can be disabled using the responsive.detailsR option and setting it to false, as shown in the example below. In this case the hidden data is not directly accessible to the end user.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { responsive: { details: false } } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/child-rows/whole-row-control.html000064400000051325147211617400021271 0ustar00 Responsive example - Whole row child row control

Responsive example Whole row child row control

When using the column details type in Responsive the responsive.details.targetR option provides the ability to control what element is used to show / hide the child rows when the table is collapsed.

This example uses the tr selector to have the whole row act as the control.

First name Last name Position Office Age Start date Salary Extn.
First name Last name Position Office Age Start date Salary Extn.
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769
Suki Burks Developer London 53 2009/10/22 $114,500 6832
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383
Thor Walton Developer New York 61 2013/08/11 $98,540 8327
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { responsive: { details: { type: 'column', target: 'tr' } }, columnDefs: [ { className: 'control', orderable: false, targets: 0 } ], order: [ 1, 'asc' ] } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/child-rows/index.html000064400000007122147211617400016773 0ustar00 Responsive examples - Child row control

Responsive example Child row control

When a column is removed from display by Responsive, the data is still available in the table and can be displayed in a DataTables child row (see row().child()DT). By default Responsive will show child row controls in the first column when the table has been collapsed, allowing the end user to show / hide the information from the hidden columns.

Responsive has a number of options for display of the child rows:

This section shows examples of these options being used.

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/initialisation/className.html000064400000052570147211617400020546 0ustar00 Responsive example - Class name

Responsive example Class name

The easiest way to initialise the Responsive extension for DataTables is simply to add the class responsive to the table's class name. When the DataTable is initialised the Responsive extension will automatically enable itself on these tables.

The may also use the class dt-responsive to perform the same action, since responsive may be used in your stylesheet, or may have some other meaning in a CSS framework being used (for example Bootstrap).

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable(); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/initialisation/new.html000064400000053451147211617400017430 0ustar00 Responsive example - `new` constructor

Responsive example `new` constructor

Responsive will automatically detect new DataTable instances being created on a page and initialise itself if it find the responsiveR option or responsive class name on the table, as shown in the other examples.

The third way of initialising Responsive is manually creating a new instance using the $.fn.dataTable.Responsive class, as shown in this example (the other two methods are provided using this constructor in a initDT event handler!).

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable(); new $.fn.dataTable.Responsive( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

div.container { max-width: 1200px }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/initialisation/default.html000064400000053460147211617400020263 0ustar00 Responsive example - Default initialisation

Responsive example Default initialisation

It can often be useful to be able to set a default value for DataTables' initialisation options, providing a common starting point for initialisation when working with multiple tables over many pages or even just on a single page. DataTables provides that ability through the $.fn.dataTable.defaults object which can have any of the initialisation options set.

Extending that ability, Responsive can also be set to initialise by default, as shown in this example thorugh the $.fn.dataTable.defaults.responsive property. Extending that, all of the Responsive options can also be set using this configuration option (i.e. use responsive as an object).

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$.extend( $.fn.dataTable.defaults, { responsive: true } ); $(document).ready(function() { $('#example').DataTable(); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/initialisation/ajax.html000064400000020045147211617400017553 0ustar00 Responsive example - Ajax data

Responsive example Ajax data

This example shows the Responsive extension working with Ajax sourced data in the DataTable. Note that no special initialisation is required. Responsive is enabled by adding the responsive class to the table element.

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { "ajax": "../../../../examples/ajax/data/objects.txt", "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "extn" }, { "data": "start_date" }, { "data": "salary" } ] } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

div.container { max-width: 1200px }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/initialisation/option.html000064400000053411147211617400020143 0ustar00 Responsive example - Configuration option

Responsive example Configuration option

The Responsive extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name on the table, or using the DataTables initialisation options. This method shows the latter, with the responsiveR option being set to the boolean value true.

The responsiveR option can be given as a boolean value, or as an object with configuration options. If as a boolean, as in this case, the default options are used.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { responsive: true } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

div.container { max-width: 1200px }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/initialisation/index.html000064400000005332147211617400017741 0ustar00 Responsive examples - Initialisation

Responsive example Initialisation

Responsive can be run on a DataTable in a number of different ways:

  • By adding the class responsive or dt-responsive to the table
  • Using the responsiveR option in the DataTables initialisation
  • Use the $.fn.dataTable.Responsive constructor.

This set of examples demonstrates these initialisation options.

Basic initialisation

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/display-control/classes.html000064400000024364147211617400020400 0ustar00 Responsive example - Class control

Responsive example Class control

You can tell Responsive what columns to want to be visible on different devices through the use of class names on the columns. The breakpoints are horizontal screen resolutions and the defaults are set for common devices:

  • desktop x >= 1024px
  • tablet-l (landscape) 768 <= x < 1024
  • tablet-p (portrait) 480 <= x < 768
  • mobile-l (landscape) 320 <= x < 480
  • mobile-p (portrait) x < 320

You may leave the -[lp] option from the end if you wish to just target all tablet or mobile devices. Additionally to may add min-, max- or not- as a prefix to the class name to perform logic operations. For example not-mobile would cause a column to appear as visible on desktop and tablet devices, while min-tablet-l would require at least a horizontal width of 768 for the browser window to be shown, and be shown at all sizes larger.

Additionally, there are three special class names:

  • all - Always display
  • none - Don't display as a column, but show in the child row
  • never - Never display
  • control - Used for the column responsive.details.typeR option.

Please refer to the Responsive manual for further details of these options.

This example shows the salary column visible on a desktop only - office and age require a tablet, while the position column requires a phone in landscape or larger. The name column is always visible and the start date is never visible.

This can be useful if you wish to change the format of the data shown on different devices, for example using a combination of mobile and not-mobile on two different columns would allow information to be formatted suitable for each device type.

Name Position Office Age Start date Salary Extn.
Name Position Office Age Start date Salary Extn.
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { "ajax": "../../../../examples/ajax/data/objects.txt", "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "age" }, { "data": "start_date" }, { "data": "salary" }, { "data": "extn" } ] } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/display-control/init-classes.html000064400000021007147211617400021330 0ustar00 Responsive example - Assigned class control

Responsive example Assigned class control

This example exactly matches the functionality of the class control example but in this case the classes are assigned using the columns.classNameDT option.

Name Position Office Age Start date Salary Extn.
Name Position Office Age Start date Salary Extn.
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable( { "ajax": "../../../../examples/ajax/data/objects.txt", "columns": [ { "data": "name", className: "all" }, { "data": "position", className: "min-phone-l" }, { "data": "office", className: "min-tablet" }, { "data": "age", className: "min-tablet" }, { "data": "start_date", className: "never" }, { "data": "salary", className: "desktop" }, { "data": "extn", className: "none" } ] } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/display-control/auto.html000064400000052746147211617400017720 0ustar00 Responsive example - Automatic column hiding

Responsive example Automatic column hiding

Responsive will automatically detect which columns have breakpoint class names assigned to them for visibility control. If no breakpoint class is found for a column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. This is done by removing columns which cause the table to overflow the viewport, with the columns being removed from the right.

This example shows that simple case. On a desktop browser resize the window horizontally to see columns added and removed on-the-fly. On a tablet or mobile browser, change the screen's orientation.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').DataTable(); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/display-control/fixedHeader.html000064400000053533147211617400021153 0ustar00 Responsive example - With FixedHeader

Responsive example With FixedHeader

This example shows Responsive being used with the DataTables FixedHeader extension. FixedHeader will lock a table's header to the top of the table, ensuring that the user always knows what each column relates to.

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Office Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330 c.vance@datatables.net
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797 a.ramos@datatables.net
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575 8822 g.joyce@datatables.net
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650 9239 j.chang@datatables.net
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000 2947 f.green@datatables.net
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000 8899 s.itou@datatables.net
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400 2769 m.house@datatables.net
Suki Burks Developer London 53 2009/10/22 $114,500 6832 s.burks@datatables.net
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050 8240 m.mccray@datatables.net
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 5384 u.butler@datatables.net
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500 7031 h.hatfield@datatables.net
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500 9422 v.harrell@datatables.net
Timothy Mooney Office Manager London 37 2008/12/11 $136,200 7580 t.mooney@datatables.net
Jackson Bradshaw Director New York 65 2008/09/26 $645,750 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500 2120 o.liang@datatables.net
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575 9383 s.yamamoto@datatables.net
Thor Walton Developer New York 61 2013/08/11 $98,540 8327 t.walton@datatables.net
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250 7439 z.frank@datatables.net
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990 c.stevens@datatables.net
Hermione Butler Regional Director London 47 2011/03/21 $356,250 1016 h.butler@datatables.net
Lael Greer Systems Administrator London 21 2009/02/27 $103,500 6733 l.greer@datatables.net
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500 8196 j.alexander@datatables.net
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000 6373 s.decker@datatables.net
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 5384 m.bruce@datatables.net
Donna Snider Customer Support New York 27 2011/01/25 $112,000 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { responsive: true, paging: false } ); new $.fn.dataTable.FixedHeader( table ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

div.container { max-width: 1200px }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/display-control/complexHeader.html000064400000050463147211617400021522 0ustar00 Responsive example - Complex headers (rowspan / colspan)

Responsive example Complex headers (rowspan / colspan)

This example shows how Responsive can be used with complex headers (i.e. headers that contain colspan attributes for one or more cells). As Responsive will removed columns one at a time the cell with the colspan attribute can end up forcing the width of a column, disrupting the flow. Rather than removing all columns under the colspan cell, we want to reduce the amount of text that is visible in that cell. This example shows how that can be achieved thought a little bit of jQuery and CSS.

We use jQuery to find the header cells which have a colspan attribute and wrap their contents in a span tag. That span is then set to position: absolute; using text-overflow: ellipsis. The result is that the text of the colspan cell will reduce automatically to fit the available area based on the contents of the column cells below it.

This functionality is not currently built into Responsive. It likely will be for v1.1.

Name HR Information Contact
Position Salary Office Extn. E-mail
Name Position Salary Office Extn. E-mail
Tiger Nixon System Architect $320,800 Edinburgh 5421 t.nixon@datatables.net
Garrett Winters Accountant $170,750 Tokyo 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author $86,000 San Francisco 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224 c.kelly@datatables.net
Airi Satou Accountant $162,700 Tokyo 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist $372,000 New York 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant $137,500 San Francisco 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist $327,900 Tokyo 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer $205,500 San Francisco 2360 c.hurst@datatables.net
Sonya Frost Software Engineer $103,600 Edinburgh 1667 s.frost@datatables.net
Jena Gaines Office Manager $90,560 London 3814 j.gaines@datatables.net
Quinn Flynn Support Lead $342,000 Edinburgh 9497 q.flynn@datatables.net
Charde Marshall Regional Director $470,600 San Francisco 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer $313,500 London 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director $385,750 London 1965 t.fitzpatrick@datatables.net
Michael Silva Marketing Designer $198,500 London 1581 m.silva@datatables.net
Paul Byrd Chief Financial Officer (CFO) $725,000 New York 3059 p.byrd@datatables.net
Gloria Little Systems Administrator $237,500 New York 1721 g.little@datatables.net
Bradley Greer Software Engineer $132,000 London 2558 b.greer@datatables.net
Dai Rios Personnel Lead $217,500 Edinburgh 2290 d.rios@datatables.net
Jenette Caldwell Development Lead $345,000 New York 1937 j.caldwell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) $675,000 New York 6154 y.berry@datatables.net
Caesar Vance Pre-Sales Support $106,450 New York 8330 c.vance@datatables.net
Doris Wilder Sales Assistant $85,600 Sidney 3023 d.wilder@datatables.net
Angelica Ramos Chief Executive Officer (CEO) $1,200,000 London 5797 a.ramos@datatables.net
Gavin Joyce Developer $92,575 Edinburgh 8822 g.joyce@datatables.net
Jennifer Chang Regional Director $357,650 Singapore 9239 j.chang@datatables.net
Brenden Wagner Software Engineer $206,850 San Francisco 1314 b.wagner@datatables.net
Fiona Green Chief Operating Officer (COO) $850,000 San Francisco 2947 f.green@datatables.net
Shou Itou Regional Marketing $163,000 Tokyo 8899 s.itou@datatables.net
Michelle House Integration Specialist $95,400 Sidney 2769 m.house@datatables.net
Suki Burks Developer $114,500 London 6832 s.burks@datatables.net
Prescott Bartlett Technical Author $145,000 London 3606 p.bartlett@datatables.net
Gavin Cortez Team Leader $235,500 San Francisco 2860 g.cortez@datatables.net
Martena Mccray Post-Sales support $324,050 Edinburgh 8240 m.mccray@datatables.net
Unity Butler Marketing Designer $85,675 San Francisco 5384 u.butler@datatables.net
Howard Hatfield Office Manager $164,500 San Francisco 7031 h.hatfield@datatables.net
Hope Fuentes Secretary $109,850 San Francisco 6318 h.fuentes@datatables.net
Vivian Harrell Financial Controller $452,500 San Francisco 9422 v.harrell@datatables.net
Timothy Mooney Office Manager $136,200 London 7580 t.mooney@datatables.net
Jackson Bradshaw Director $645,750 New York 1042 j.bradshaw@datatables.net
Olivia Liang Support Engineer $234,500 Singapore 2120 o.liang@datatables.net
Bruno Nash Software Engineer $163,500 London 6222 b.nash@datatables.net
Sakura Yamamoto Support Engineer $139,575 Tokyo 9383 s.yamamoto@datatables.net
Thor Walton Developer $98,540 New York 8327 t.walton@datatables.net
Finn Camacho Support Engineer $87,500 San Francisco 2927 f.camacho@datatables.net
Serge Baldwin Data Coordinator $138,575 Singapore 8352 s.baldwin@datatables.net
Zenaida Frank Software Engineer $125,250 New York 7439 z.frank@datatables.net
Zorita Serrano Software Engineer $115,000 San Francisco 4389 z.serrano@datatables.net
Jennifer Acosta Junior Javascript Developer $75,650 Edinburgh 3431 j.acosta@datatables.net
Cara Stevens Sales Assistant $145,600 New York 3990 c.stevens@datatables.net
Hermione Butler Regional Director $356,250 London 1016 h.butler@datatables.net
Lael Greer Systems Administrator $103,500 London 6733 l.greer@datatables.net
Jonas Alexander Developer $86,500 San Francisco 8196 j.alexander@datatables.net
Shad Decker Regional Director $183,000 Edinburgh 6373 s.decker@datatables.net
Michael Bruce Javascript Developer $183,000 Singapore 5384 m.bruce@datatables.net
Donna Snider Customer Support $112,000 New York 4226 d.snider@datatables.net
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { // jQuery update a column title from the demo table to contain a long description // You would not need to do this in your own code. $('#example thead tr:eq(0) th:eq(2)').html("This is a really long column title!"); // Wrap the colspan'ing header cells with a span so they can be positioned // absolutely - filling the available space, and no more. $('#example thead th[colspan]').wrapInner( '<span/>' ).append( '&nbsp;' ); // Standard initialisation $('#example').DataTable( { responsive: true, paging: false } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

th { position: relative; min-height: 41px; } span { display: block; position: absolute; left: 0; right: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/display-control/index.html000064400000005370147211617400020046 0ustar00 Responsive examples - Display control

Responsive example Display control

Responsive has two basic modes of operation for controlling the visibility of columns at different display sizes. These two modes can be using either separately or together:

  • Manually assigned class names for breakpoints - Assign a column a class name to tell Responsive which breakpoint(s) to show it in.
  • Automatically - for columns without a breakpoint class name, it will be automatically removed if there is no room available on screen to show it. Columns are removed from the right, moving left.

This section explores these two options.

Display control

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/examples/index.html000064400000007337147211617400014730 0ustar00 Responsive examples - Responsive DataTables

Responsive example Responsive DataTables

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2015
DataTables is licensed under the MIT license.

extensions/Responsive/License.txt000064400000002100147211617400013217 0ustar00Copyright (c) 2014-2015 SpryMedia Limited http://datatables.net Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. extensions/Responsive/Readme.md000064400000000000147211617400012610 0ustar00extensions/Responsive/js/dataTables.responsive.js000064400000061012147211617400016315 0ustar00/*! Responsive 1.0.6 * 2014-2015 SpryMedia Ltd - datatables.net/license */ /** * @summary Responsive * @description Responsive tables plug-in for DataTables * @version 1.0.6 * @file dataTables.responsive.js * @author SpryMedia Ltd (www.sprymedia.co.uk) * @contact www.sprymedia.co.uk/contact * @copyright Copyright 2014-2015 SpryMedia Ltd. * * This source file is free software, available under the following license: * MIT license - http://datatables.net/license/mit * * This source file is distributed in the hope that it will be useful, but * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. * * For details please refer to: http://www.datatables.net */ (function(window, document, undefined) { var factory = function( $, DataTable ) { "use strict"; /** * Responsive is a plug-in for the DataTables library that makes use of * DataTables' ability to change the visibility of columns, changing the * visibility of columns so the displayed columns fit into the table container. * The end result is that complex tables will be dynamically adjusted to fit * into the viewport, be it on a desktop, tablet or mobile browser. * * Responsive for DataTables has two modes of operation, which can used * individually or combined: * * * Class name based control - columns assigned class names that match the * breakpoint logic can be shown / hidden as required for each breakpoint. * * Automatic control - columns are automatically hidden when there is no * room left to display them. Columns removed from the right. * * In additional to column visibility control, Responsive also has built into * options to use DataTables' child row display to show / hide the information * from the table that has been hidden. There are also two modes of operation * for this child row display: * * * Inline - when the control element that the user can use to show / hide * child rows is displayed inside the first column of the table. * * Column - where a whole column is dedicated to be the show / hide control. * * Initialisation of Responsive is performed by: * * * Adding the class `responsive` or `dt-responsive` to the table. In this case * Responsive will automatically be initialised with the default configuration * options when the DataTable is created. * * Using the `responsive` option in the DataTables configuration options. This * can also be used to specify the configuration options, or simply set to * `true` to use the defaults. * * @class * @param {object} settings DataTables settings object for the host table * @param {object} [opts] Configuration options * @requires jQuery 1.7+ * @requires DataTables 1.10.1+ * * @example * $('#example').DataTable( { * responsive: true * } ); * } ); */ var Responsive = function ( settings, opts ) { // Sanity check that we are using DataTables 1.10 or newer if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.1' ) ) { throw 'DataTables Responsive requires DataTables 1.10.1 or newer'; } this.s = { dt: new DataTable.Api( settings ), columns: [] }; // Check if responsive has already been initialised on this table if ( this.s.dt.settings()[0].responsive ) { return; } // details is an object, but for simplicity the user can give it as a string if ( opts && typeof opts.details === 'string' ) { opts.details = { type: opts.details }; } this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts ); settings.responsive = this; this._constructor(); }; Responsive.prototype = { /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Constructor */ /** * Initialise the Responsive instance * * @private */ _constructor: function () { var that = this; var dt = this.s.dt; dt.settings()[0]._responsive = this; // Use DataTables' private throttle function to avoid processor thrashing $(window).on( 'resize.dtr orientationchange.dtr', dt.settings()[0].oApi._fnThrottle( function () { that._resize(); } ) ); // Destroy event handler dt.on( 'destroy.dtr', function () { $(window).off( 'resize.dtr orientationchange.dtr draw.dtr' ); } ); // Reorder the breakpoints array here in case they have been added out // of order this.c.breakpoints.sort( function (a, b) { return a.width < b.width ? 1 : a.width > b.width ? -1 : 0; } ); // Determine which columns are already hidden, and should therefore // remain hidden. todo - should this be done? See thread 22677 // // this.s.alwaysHidden = dt.columns(':hidden').indexes(); this._classLogic(); this._resizeAuto(); // Details handler var details = this.c.details; if ( details.type ) { that._detailsInit(); this._detailsVis(); dt.on( 'column-visibility.dtr', function () { that._detailsVis(); } ); // Redraw the details box on each draw. This is used until // DataTables implements a native `updated` event for rows dt.on( 'draw.dtr', function () { dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) { var row = dt.row( idx ); if ( row.child.isShown() ) { var info = that.c.details.renderer( dt, idx ); row.child( info, 'child' ).show(); } } ); } ); $(dt.table().node()).addClass( 'dtr-'+details.type ); } // First pass - draw the table for the current viewport size this._resize(); }, /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Private methods */ /** * Calculate the visibility for the columns in a table for a given * breakpoint. The result is pre-determined based on the class logic if * class names are used to control all columns, but the width of the table * is also used if there are columns which are to be automatically shown * and hidden. * * @param {string} breakpoint Breakpoint name to use for the calculation * @return {array} Array of boolean values initiating the visibility of each * column. * @private */ _columnsVisiblity: function ( breakpoint ) { var dt = this.s.dt; var columns = this.s.columns; var i, ien; // Class logic - determine which columns are in this breakpoint based // on the classes. If no class control (i.e. `auto`) then `-` is used // to indicate this to the rest of the function var display = $.map( columns, function ( col ) { return col.auto && col.minWidth === null ? false : col.auto === true ? '-' : $.inArray( breakpoint, col.includeIn ) !== -1; } ); // Auto column control - first pass: how much width is taken by the // ones that must be included from the non-auto columns var requiredWidth = 0; for ( i=0, ien=display.length ; i