From 25ae6ae135b2ae4f26cffd7b3f69a09f0eb5f3c5 Mon Sep 17 00:00:00 2001 From: LokeshBabuTG <55309854+LokeshBabuTG@users.noreply.github.com> Date: Tue, 23 Jun 2020 23:13:56 +0530 Subject: [PATCH 1/2] Added a new render hyperLink.js This data rendering helper method can be useful when a hyperLink --- dataRender/hyperLink.js | 113 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 dataRender/hyperLink.js diff --git a/dataRender/hyperLink.js b/dataRender/hyperLink.js new file mode 100644 index 0000000..1d286bd --- /dev/null +++ b/dataRender/hyperLink.js @@ -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 '' + text + ''; + case 'popup': + return '' + text + ''; + default: + return '' + text + ''; + } + + } catch(e) { + return url; + } + + }; +}; From 6106331e05e9375426f0250b41df561151014556 Mon Sep 17 00:00:00 2001 From: LokeshBabuTG <55309854+LokeshBabuTG@users.noreply.github.com> Date: Thu, 25 Jun 2020 17:00:26 +0530 Subject: [PATCH 2/2] implemented review comments --- dataRender/hyperLink.js | 136 ++++++++++++++++++++++++---------------- 1 file changed, 82 insertions(+), 54 deletions(-) diff --git a/dataRender/hyperLink.js b/dataRender/hyperLink.js index 1d286bd..9ddd6d8 100644 --- a/dataRender/hyperLink.js +++ b/dataRender/hyperLink.js @@ -1,17 +1,17 @@ /** - * 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, + * This data rendering helper method can be useful when a hyperLink with custom + * anchorText 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`) + * 1. 'anchorText' - 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`) + * 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`) + * 4. 'height' - type integer - (optional - default `400`) * The custom heigth of popup to display. * Value is utilised on when 'location' is given as 'popup'. * @@ -35,7 +35,7 @@ * $('#example').DataTable( { * columnDefs: [ { * targets: 2, - * render: $.fn.dataTable.render.ellipsis( 'Download' ) + * render: $.fn.dataTable.render.hyperLink( 'Download' ) * } ] * } ); * @@ -45,7 +45,7 @@ * $('#example').DataTable( { * columnDefs: [ { * targets: 2, - * render: $.fn.dataTable.render.ellipsis( 'Download', 'popup' ) + * render: $.fn.dataTable.render.hyperLink( 'Download', 'popup' ) * } ] * } ); * @@ -55,59 +55,87 @@ * $('#example').DataTable( { * columnDefs: [ { * targets: 2, - * render: $.fn.dataTable.render.ellipsis( 'Download', 'popup' , 1000, 500) + * render: $.fn.dataTable.render.hyperLink( '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) { +jQuery.fn.dataTable.render.hyperLink = function ( + anchorText, + location, + width, + height +) { + validateAndReturnDefaultIfFailed = function (item, defaultValue) { + if (typeof item === "number") { + return item; + } + + if (typeof item === "string") { + return parseInt(item) ? item : defaultValue; + } + + return defaultValue; + }; + var anchorText = anchorText || "Click Here"; + var location = location || "newTab"; + var width = validateAndReturnDefaultIfFailed(width, "600"); + var height = validateAndReturnDefaultIfFailed(height, "400"); + + return function (data, type, row) { // restriction only for table display rendering - if (type !== 'display') { + if (type !== "display") { return data; } - - try { - - url = new URL(data); - - switch(location) { - case 'newTab' : - return '' + text + ''; - case 'popup': - return '' + text + ''; - default: - return '' + text + ''; - } - - } catch(e) { - return url; - } - + + var url = data; + + try { + url = new URL(data); + + switch (location) { + case "newTab": + return ( + '' + + anchorText + + "" + ); + case "popup": + return ( + '" + + anchorText + + "" + ); + default: + return ( + '' + + anchorText + + "" + ); + } + } catch (e) { + return url; + } }; };