Plugins/dataRender/hyperLink.js

/**
 * This data rendering helper method can be useful when a hyperLink with custom 
 * text has to rendered. The data for the column is still fully searchable and sortable, based on the hyperLink value,
 * and sortable, based on the hyperLink value, but during display in webpage is rendered with custom placeholder
 *
 * It accepts four parameters:
 *
 * 1. 'text' -  type string - (optional - default `Click Here`)  - The custom placeholder to display
 * 2. 'location' -  type string - (optional - default `newTab`) 
 * 		takes two values 'newTab' and 'popup'
 * 3. 'width' -  type integer - (optional - default `600`) 
 *		The custom width of popup to display.
 *		Value is utilised on when 'location' is given as 'popup'.
 * 4. 'height' -  type integer - (optional - default `400`) 
 *		The custom heigth of popup to display.
 *		Value is utilised on when 'location' is given as 'popup'.
 *
 *  @name hyperLink
 *  @summary Displays url data in hyperLink with custom plcaeholder
 *  @author [Lokesh Babu]
 *  @requires DataTables 1.10+
 *
 *
 *  @example
 *    // Display the hyperlink with 'Click Here', which open hyperlink in new Tab or new Window based on Browser setting
 *    $('#example').DataTable( {
 *      columnDefs: [ {
 *        targets: 1,
 *        render: $.fn.dataTable.render.hyperLink()
 *      } ]
 *    } );
 *
 *  @example
 *    // Display the hyperlink with 'Download', which open hyperlink in new Tab or new Window based on Browser setting
 *    $('#example').DataTable( {
 *      columnDefs: [ {
 *        targets: 2,
 *        render: $.fn.dataTable.render.ellipsis( 'Download' )
 *      } ]
 *    } );
 *
 *  @example
 *    // Display the hyperlink with 'Download', which open hyperlink in popup
 *    //		with size 600as width and 400 as height
 *    $('#example').DataTable( {
 *      columnDefs: [ {
 *        targets: 2,
 *        render: $.fn.dataTable.render.ellipsis( 'Download', 'popup' )
 *      } ]
 *    } );
 *
 *  @example
 *    // Display the hyperlink with 'Download', which open hyperlink in popup
 *    //		with size 1000 width and 500 as height
 *    $('#example').DataTable( {
 *      columnDefs: [ {
 *        targets: 2,
 *        render: $.fn.dataTable.render.ellipsis( 'Download', 'popup' , 1000, 500)
 *      } ]
 *    } );
 */

jQuery.fn.dataTable.render.hyperLink = function (text, location, width, height) {
	
	
	validateAndReturnDefaultIfFailed = function(item, defaultValue) {
	  
	   if ( typeof item === 'number' ) {
			return item;
		}
		
		
		if ( typeof item === 'string' ) {
			return parseInt(item) ? item : defaultValue;
		}
		
		return defaultValue;
  }
	
  text = text || 'Click Here';
  location = location || 'newTab';
  width = validateAndReturnDefaultIfFailed(width, '600');
  height = validateAndReturnDefaultIfFailed(height, '400');
  
  
  
  
  return function (data, type, row) {

    // restriction only for table display rendering
    if (type !== 'display') {
      return data;
    }
    
	try {
		
		url = new URL(data);
		
		switch(location) {
			case  'newTab' :
				return '<a title="' + url + '" href="' + url + '" target="_blank">' + text + '</a>';
			case 'popup':
				return '<a title="' + url + '" href="' + url + '" target="popup" rel="noopener noreferrer" onclick="window.open(\'' + url + '\', \'' + text + '\', \'width='+width+',height='+height+'\'); return false;">' + text + '</a>';
			default:
				return '<a title="' + url + '" href="' + url + '" target="_blank">' + text + '</a>';
		}
		
	} catch(e) {
		return url;
	}
    
  };
};