hyperLink

Displays url data in hyperLink with custom plcaeholder

  • Author: [Lokesh Babu]
  • Requires: DataTables 1.10+

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. '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) 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'.

Plug-in code

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") {
      return data;
    }

    var url = data;

    try {
      url = new URL(data);

      switch (location) {
        case "newTab":
          return (
            '<a title="' +
            url +
            '" href="' +
            url +
            '" target="_blank">' +
            anchorText +
            "</a>"
          );
        case "popup":
          return (
            '<a title="' +
            url +
            '" href="' +
            url +
            '" target="popup" rel="noopener noreferrer" onclick="window.open(\'' +
            url +
            "', '" +
            anchorText +
            "', 'width=" +
            width +
            ",height=" +
            height +
            "'); return false;\">" +
            anchorText +
            "</a>"
          );
        default:
          return (
            '<a title="' +
            url +
            '" href="' +
            url +
            '" target="_blank">' +
            anchorText +
            "</a>"
          );
      }
    } catch (e) {
      return url;
    }
  };
};

CDN

This plug-in is available on the DataTables CDN:

JS

Note that if you are using multiple plug-ins, it is beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!

Examples

// 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()
    } ]
  } );
// 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.hyperLink( 'Download' )
    } ]
  } );
// 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.hyperLink( 'Download', 'popup' )
    } ]
  } );
// 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.hyperLink( 'Download', 'popup' , 1000, 500)
    } ]
  } );