datatables.net 2.3.4 → 2.3.6

package/js/dataTables.mjs

@@ -1,4 +1,4 @@
-/*! DataTables 2.3.4
+/*! DataTables 2.3.6
  * © SpryMedia Ltd - datatables.net/license
  */
 
@@ -139,7 +139,7 @@ var DataTable = function ( selector, options )
 			"sDestroyWidth": $this[0].style.width,
 			"sInstance":     sId,
 			"sTableId":      sId,
-			colgroup: $('<colgroup>').prependTo(this),
+			colgroup: $('<colgroup>'),
 			fastData: function (row, column, type) {
 				return _fnGetCellData(oSettings, row, column, type);
 			}
@@ -212,6 +212,7 @@ var DataTable = function ( selector, options )
 			"orderHandler",
 			"titleRow",
 			"typeDetect",
+			"columnTitleTag",
 			[ "iCookieDuration", "iStateDuration" ], // backwards compat
 			[ "oSearch", "oPreviousSearch" ],
 			[ "aoSearchCols", "aoPreSearchCols" ],
@@ -376,7 +377,7 @@ var DataTable = function ( selector, options )
 		
 		if ( oSettings.caption ) {
 			if ( caption.length === 0 ) {
-				caption = $('<caption/>').appendTo( $this );
+				caption = $('<caption/>').prependTo( $this );
 			}
 		
 			caption.html( oSettings.caption );
@@ -389,6 +390,14 @@ var DataTable = function ( selector, options )
 			oSettings.captionNode = caption[0];
 		}
 		
+		// Place the colgroup element in the correct location for the HTML structure
+		if (caption.length) {
+			oSettings.colgroup.insertAfter(caption);
+		}
+		else {
+			oSettings.colgroup.prependTo(oSettings.nTable);
+		}
+		
 		if ( thead.length === 0 ) {
 			thead = $('<thead/>').appendTo($this);
 		}
@@ -404,7 +413,7 @@ var DataTable = function ( selector, options )
 		if ( tfoot.length === 0 ) {
 			// If we are a scrolling table, and no footer has been given, then we need to create
 			// a tfoot element for the caption element to be appended to
-			tfoot = $('<tfoot/>').appendTo($this);
+			tfoot = $('<tfoot/>').insertAfter(thead);
 		}
 		oSettings.nTFoot = tfoot[0];
 		
@@ -1245,7 +1254,7 @@ var _removeEmpty = function ( a )
 };
 
 // Replaceable function in api.util
-var _stripHtml = function (input) {
+var _stripHtml = function (input, replacement) {
 	if (! input || typeof input !== 'string') {
 		return input;
 	}
@@ -1257,7 +1266,7 @@ var _stripHtml = function (input) {
 
 	var previous;
 
-	input = input.replace(_re_html, ''); // Complete tags
+	input = input.replace(_re_html, replacement || ''); // Complete tags
 
 	// Safety for incomplete script tag - use do / while to ensure that
 	// we get all instances
@@ -1722,7 +1731,7 @@ DataTable.util = {
 		}
 	},
 
-	stripHtml: function (mixed) {
+	stripHtml: function (mixed, replacement) {
 		var type = typeof mixed;
 
 		if (type === 'function') {
@@ -1730,7 +1739,7 @@ DataTable.util = {
 			return;
 		}
 		else if (type === 'string') {
-			return _stripHtml(mixed);
+			return _stripHtml(mixed, replacement);
 		}
 		return mixed;
 	},
@@ -2902,12 +2911,12 @@ function _fnInvalidate( settings, rowIdx, src, colIdx )
 
 		// Max length string. Its a fairly cheep recalculation, so not worth
 		// something more complicated
-		cols[ colIdx ].maxLenString = null;
+		cols[ colIdx ].wideStrings = null;
 	}
 	else {
 		for ( i=0, iLen=cols.length ; i<iLen ; i++ ) {
 			cols[i].sType = null;
-			cols[i].maxLenString = null;
+			cols[i].wideStrings = null;
 		}
 
 		// Update DataTables special `DT_*` attributes for the row
@@ -3332,7 +3341,7 @@ function _fnHeaderLayout( settings, source, incColumns )
 					colspan++;
 				}
 
-				var titleSpan = $('span.dt-column-title', cell);
+				var titleSpan = $('.dt-column-title', cell);
 
 				structure[row][column] = {
 					cell: cell,
@@ -3448,6 +3457,14 @@ function _fnDraw( oSettings, ajaxComplete )
 		{
 			var iDataIndex = aiDisplay[j];
 			var aoData = oSettings.aoData[ iDataIndex ];
+
+			// Row has been deleted - can't be displayed
+			if (aoData === null)
+			{
+				continue;
+			}
+
+			// Row node hasn't been created yet
 			if ( aoData.nTr === null )
 			{
 				_fnCreateTr( oSettings, iDataIndex );
@@ -4038,8 +4055,8 @@ function _fnDetectHeader ( settings, thead, write )
 					}
 
 					// Wrap the column title so we can write to it in future
-					if ( $('span.dt-column-title', cell).length === 0) {
-						$('<span>')
+					if ( $('.dt-column-title', cell).length === 0) {
+						$(document.createElement(settings.columnTitleTag))
 							.addClass('dt-column-title')
 							.append(cell.childNodes)
 							.appendTo(cell);
@@ -4050,9 +4067,9 @@ function _fnDetectHeader ( settings, thead, write )
 						isHeader &&
 						jqCell.filter(':not([data-dt-order=disable])').length !== 0 &&
 						jqCell.parent(':not([data-dt-order=disable])').length !== 0 &&
-						$('span.dt-column-order', cell).length === 0
+						$('.dt-column-order', cell).length === 0
 					) {
-						$('<span>')
+						$(document.createElement(settings.columnTitleTag))
 							.addClass('dt-column-order')
 							.appendTo(cell);
 					}
@@ -4061,7 +4078,7 @@ function _fnDetectHeader ( settings, thead, write )
 					// layout for those elements
 					var headerFooter = isHeader ? 'header' : 'footer';
 
-					if ( $('span.dt-column-' + headerFooter, cell).length === 0) {
+					if ( $('div.dt-column-' + headerFooter, cell).length === 0) {
 						$('<div>')
 							.addClass('dt-column-' + headerFooter)
 							.append(cell.childNodes)
@@ -4218,6 +4235,10 @@ function _fnBuildAjax(oSettings, data, fn) {
 	// Custom Ajax option to submit the parameters as a JSON string
 	if (baseAjax.submitAs === 'json' && typeof data === 'object') {
 		baseAjax.data = JSON.stringify(data);
+
+		if (!baseAjax.contentType) {
+			baseAjax.contentType = 'application/json; charset=utf-8';
+		}
 	}
 
 	if (typeof ajax === 'function') {
@@ -5373,7 +5394,7 @@ function _fnCalculateColumnWidths ( settings )
 		visibleColumns = _fnGetColumns( settings, 'bVisible' ),
 		tableWidthAttr = table.getAttribute('width'), // from DOM element
 		tableContainer = table.parentNode,
-		i, column, columnIdx;
+		i, j, column, columnIdx;
 		
 	var styleWidth = table.style.width;
 	var containerWidth = _fnWrapperWidth(settings);
@@ -5407,17 +5428,16 @@ function _fnCalculateColumnWidths ( settings )
 		false
 	);
 
-	// Construct a single row, worst case, table with the widest
-	// node in the data, assign any user defined widths, then insert it into
-	// the DOM and allow the browser to do all the hard work of calculating
-	// table widths
+	// Construct a worst case table with the widest, assign any user defined
+	// widths, then insert it into  the DOM and allow the browser to do all
+	// the hard work of calculating table widths
 	var tmpTable = $(table.cloneNode())
 		.css( 'visibility', 'hidden' )
+		.css( 'margin', 0 )
 		.removeAttr( 'id' );
 
 	// Clean up the table body
 	tmpTable.append('<tbody/>')
-	var tr = $('<tr/>').appendTo( tmpTable.find('tbody') );
 
 	// Clone the table header and footer - we can't use the header / footer
 	// from the cloned table, since if scrolling is active, the table's
@@ -5457,23 +5477,37 @@ function _fnCalculateColumnWidths ( settings )
 		}
 	} );
 
-	// Find the widest piece of data for each column and put it into the table
+	// Get the widest strings for each of the visible columns and add them to
+	// our table to create a "worst case"
+	var longestData = [];
+
 	for ( i=0 ; i<visibleColumns.length ; i++ ) {
-		columnIdx = visibleColumns[i];
-		column = columns[ columnIdx ];
-
-		var longest = _fnGetMaxLenString(settings, columnIdx);
-		var autoClass = _ext.type.className[column.sType];
-		var text = longest + column.sContentPadding;
-		var insert = longest.indexOf('<') === -1
-			? document.createTextNode(text)
-			: text
-		
-		$('<td/>')
-			.addClass(autoClass)
-			.addClass(column.sClass)
-			.append(insert)
-			.appendTo(tr);
+		longestData.push(_fnGetWideStrings(settings, visibleColumns[i]));
+	}
+
+	if (longestData.length) {
+		for ( i=0 ; i<longestData[0].length ; i++ ) {
+			var tr = $('<tr/>').appendTo( tmpTable.find('tbody') );
+
+			for ( j=0 ; j<visibleColumns.length ; j++ ) {
+				columnIdx = visibleColumns[j];
+				column = columns[ columnIdx ];
+
+				var longest = longestData[j][i] || '';
+				var autoClass = _ext.type.className[column.sType];
+				var padding = column.sContentPadding || (scrollX ? '-' : '');
+				var text = longest + padding;
+				var insert = longest.indexOf('<') === -1 && longest.indexOf('&') === -1
+					? document.createTextNode(text)
+					: text
+
+				$('<td/>')
+					.addClass(autoClass)
+					.addClass(column.sClass)
+					.append(insert)
+					.appendTo(tr);
+			}
+		}
 	}
 
 	// Tidy the temporary table - remove name attributes so there aren't
@@ -5612,19 +5646,31 @@ function _fnWrapperWidth(settings) {
 }
 
 /**
- * Get the maximum strlen for each data column
+ * Get the widest strings for each column.
+ *
+ * It is very difficult to determine what the widest string actually is due to variable character
+ * width and kerning. Doing an exact calculation with the DOM or even Canvas would kill performance
+ * and this is a critical point, so we use two techniques to determine a collection of the longest
+ * strings from the column, which will likely contain the widest strings:
+ *
+ * 1) Get the top three longest strings from the column
+ * 2) Get the top three widest words (i.e. an unbreakable phrase)
+ *
  *  @param {object} settings dataTables settings object
  *  @param {int} colIdx column of interest
- *  @returns {string} string of the max length
+ *  @returns {string[]} Array of the longest strings
  *  @memberof DataTable#oApi
  */
-function _fnGetMaxLenString( settings, colIdx )
+function _fnGetWideStrings( settings, colIdx )
 {
 	var column = settings.aoColumns[colIdx];
 
-	if (! column.maxLenString) {
-		var s, max='', maxLen = -1;
-	
+	// Do we need to recalculate (i.e. was invalidated), or just use the cached data?
+	if (! column.wideStrings) {
+		var allStrings = [];
+		var collection = [];
+
+		// Create an array with the string information for the column
 		for ( var i=0, iLen=settings.aiDisplayMaster.length ; i<iLen ; i++ ) {
 			var rowIdx = settings.aiDisplayMaster[i];
 			var data = _fnGetRowDisplay(settings, rowIdx)[colIdx];
@@ -5639,21 +5685,54 @@ function _fnGetMaxLenString( settings, colIdx )
 				.replace(/id=".*?"/g, '')
 				.replace(/name=".*?"/g, '');
 
-			s = _stripHtml(cellString)
+			// Don't want Javascript at all in these calculation cells.
+			cellString = cellString.replace(/<script.*?<\/script>/gi, ' ');
+
+			var noHtml = _stripHtml(cellString, ' ')
 				.replace( /&nbsp;/g, ' ' );
 	
-			if ( s.length > maxLen ) {
-				// We want the HTML in the string, but the length that
-				// is important is the stripped string
-				max = cellString;
-				maxLen = s.length;
-			}
+			// The length is calculated on the text only, but we keep the HTML
+			// in the string so it can be used in the calculation table
+			collection.push({
+				str: cellString,
+				len: noHtml.length
+			});
+
+			allStrings.push(noHtml);
 		}
 
-		column.maxLenString = max;
+		// Order and then cut down to the size we need
+		collection
+			.sort(function (a, b) {
+				return b.len - a.len;
+			})
+			.splice(3);
+
+		column.wideStrings = collection.map(function (item) {
+			return item.str;
+		});
+
+		// Longest unbroken string
+		let parts = allStrings.join(' ').split(' ');
+
+		parts.sort(function (a, b) {
+			return b.length - a.length;
+		});
+
+		if (parts.length) {
+			column.wideStrings.push(parts[0]);
+		}
+
+		if (parts.length > 1) {
+			column.wideStrings.push(parts[1]);
+		}
+
+		if (parts.length > 2) {
+			column.wideStrings.push(parts[3]);
+		}
 	}
 
-	return column.maxLenString;
+	return column.wideStrings;
 }
 
 
@@ -8674,7 +8753,7 @@ var __column_header = function ( settings, column, row ) {
 		// Automatic - find the _last_ unique cell from the top that is not empty (last for
 		// backwards compatibility)
 		for (var i=0 ; i<header.length ; i++) {
-			if (header[i][column].unique && $('span.dt-column-title', header[i][column].cell).text()) {
+			if (header[i][column].unique && $('.dt-column-title', header[i][column].cell).text()) {
 				target = i;
 			}
 		}
@@ -8981,7 +9060,7 @@ _api_registerPlural( 'columns().titles()', 'column().title()', function (title,
 			title = undefined;
 		}
 
-		var span = $('span.dt-column-title', this.column(column).header(row));
+		var span = $('.dt-column-title', this.column(column).header(row));
 
 		if (title !== undefined) {
 			span.html(title);
@@ -8994,13 +9073,16 @@ _api_registerPlural( 'columns().titles()', 'column().title()', function (title,
 
 _api_registerPlural( 'columns().types()', 'column().type()', function () {
 	return this.iterator( 'column', function ( settings, column ) {
-		var type = settings.aoColumns[column].sType;
+		var colObj = settings.aoColumns[column]
+		var type = colObj.sType;
 
 		// If the type was invalidated, then resolve it. This actually does
 		// all columns at the moment. Would only happen once if getting all
 		// column's data types.
 		if (! type) {
 			_fnColumnTypes(settings);
+
+			type = colObj.sType;
 		}
 
 		return type;
@@ -10152,8 +10234,8 @@ _api_register( 'i18n()', function ( token, def, plural ) {
 
 // Needed for header and footer, so pulled into its own function
 function cleanHeader(node, className) {
-	$(node).find('span.dt-column-order').remove();
-	$(node).find('span.dt-column-title').each(function () {
+	$(node).find('.dt-column-order').remove();
+	$(node).find('.dt-column-title').each(function () {
 		var title = $(this).html();
 		$(this).parent().parent().append(title);
 		$(this).remove();
@@ -10171,7 +10253,7 @@ function cleanHeader(node, className) {
  *  @type string
  *  @default Version number
  */
-DataTable.version = "2.3.4";
+DataTable.version = "2.3.6";
 
 /**
  * Private data store, containing all of the settings objects that are
@@ -10473,8 +10555,8 @@ DataTable.models.oColumn = {
 	 */
 	"sWidthOrig": null,
 
-	/** Cached string which is the longest in the column */
-	maxLenString: null,
+	/** Cached longest strings from a column */
+	wideStrings: null,
 
 	/**
 	 * Store for named searches
@@ -11339,7 +11421,10 @@ DataTable.defaults = {
 	iDeferLoading: null,
 
 	/** Event listeners */
-	on: null
+	on: null,
+
+	/** Title wrapper element type */
+	columnTitleTag: 'span'
 };
 
 _fnHungarianMap( DataTable.defaults );
@@ -12303,7 +12388,10 @@ DataTable.models.oSettings = {
 	orderHandler: true,
 
 	/** Title row indicator */
-	titleRow: null
+	titleRow: null,
+
+	/** Title wrapper element type */
+	columnTitleTag: 'span'
 };
 
 /**

package/package.json

@@ -4,7 +4,7 @@
     "main": "js/dataTables.js",
     "module": "js/dataTables.mjs",
     "types": "./types/types.d.ts",
-    "version": "2.3.4",
+    "version": "2.3.6",
     "files": [
         "js/**/*.js",
         "js/**/*.mjs",

package/types/types.d.ts

@@ -338,6 +338,11 @@ export interface Config {
      */
     columnDefs?: ConfigColumnDefs[];
 
+    /**
+     * HTML element to use for the title elements (including order indicator)
+     */
+    columnTitleTag?: string;
+
     /**
      * Data to use as the display data for the table.
      */