超链接

使用自定义占位符在超链接中显示 URL 数据

作者：Lokesh Babu
需要：DataTables 1.10+

当需要使用自定义锚文本渲染超链接时，这种数据渲染帮助方法是很有用的。根据超链接值，该列的数据仍然可以完全搜索和排序，且基于超链接值，可以在网页显示期间使用自定义占位符进行渲染。

它接受四个参数

'anchorText' - 字符串类型 - (可选 - 默认值为 单击此处) - 要显示的自定义占位符
'location' - 字符串类型 - (可选 - 默认值为 newTab) 取两个值，'newTab' 和 'popup'
'width' - 整数类型 - (可选 - 默认值为 600) 要显示的弹出窗口的自定义宽度。当 'location' 被指定为 'popup' 时使用此值。
'height' - 整数类型 - (可选 - 默认值为 400) 要显示的弹出窗口的自定义高度。当 'location' 被指定为 'popup' 时使用此值。

用法

有多种方法可以获取和使用此插件。

浏览器

此插件可在 DataTables CDN 上获取。

然后，此插件将自动在全局 DataTables 实例中进行注册。如果使用 AMD 加载器（如 Require.js），也可以使用此文件。

请注意，如果你使用多个插件，从性能方面考虑，将插件组合成一个文件并将其托管在自己的服务器上是有好处的，而不是对 DataTables CDN 发出多个请求。

NPM

所有插件可在 NPM（也可以与 Yarn 或任何其他 Javascript 包管理器一起使用）作为 datatables.net-plugins 包的一部分获取。要使用此插件，请先安装插件包。

npm install datatables.net-plugins

ES 模块

然后，如果你使用 ES 模块，请导入 datatables.net、任何其他所需的 DataTables 扩展以及此插件。

import DataTable from 'datatables.net';
import 'datatables.net-plugins/dataRender/hyperLink.mjs';

CommonJS

如果你使用 Node 的 CommonJS 加载器（例如，使用 Webpack 的较低版本或非模块化 Node 代码），请使用以下方法来 require 此插件。

var $ = require('jquery');
var DataTable = require('datatables.net');
require('datatables.net-plugins/dataRender/hyperLink.js');

示例

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

版本控制

如果您有任何关于如何改进此插件的想法，或者发现任何错误，可以在 GitHub 上找到它，非常欢迎您提出拉取请求！

此插件：hyperLink.js
完整的 DataTables 插件仓库：DataTables/Plugins