Added a new render hyperLink.js

This data rendering helper method can be useful when a hyperLink
pull/480/head
LokeshBabuTG 4 years ago committed by GitHub
parent 64178d6230
commit 25ae6ae135
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,113 @@
/**
* 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;
}
};
};
Loading…
Cancel
Save