超連結

在超連結中顯示帶有自訂佔位符的 URL 資料

作者：Lokesh Babu
需求：DataTables 1.10+

當需要渲染帶有自訂錨點文字的超連結時，此資料渲染輔助方法會很有用。該欄位的資料仍然可以完全搜尋和排序，基於超連結值進行搜尋和排序，但在網頁中顯示時，會使用自訂佔位符進行渲染

它接受四個參數

'anchorText' - 字串類型 - (選填 - 預設值 Click Here) - 要顯示的自訂佔位符
'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 上取得，非常歡迎發送 pull request！

此外掛程式：hyperLink.js
完整的 DataTables 外掛程式儲存庫：DataTables/Plugins