省略号

將輸出資料限制在特定長度,較長資料會以省略號顯示,並在滑鼠滑過時提供瀏覽器提供的工具提示。

這個資料呈現輔助方法,對於需要在受寬度限制的欄位中顯示可能很長的資料字串時會很有用。此欄位的資料依然可以完全搜尋和排序,但是如果資料比給定的字元數長,它會被截斷並顯示省略號。瀏覽器提供的工具提示會在滑鼠滑過儲存格時,向使用者顯示完整字串。

此函式應該與 DataTables 的columns.render 組態選項一起使用。

它接受三個參數

  1. 整數 - 將顯示資料限制的字元數。
  2. 布林值(選用,預設為 false) - 表示字串截斷是否不應該發生在單字中間(true)或可發生(false)。這可能有助於讓字串顯示起來更好看,但會減少顯示的字元數。
  3. 布林值(選用,預設為 false) - 轉換 HTML 實體(true)或不轉換(false,預設)。

使用

這個外掛程式可以用多種不同方式取得和使用。

瀏覽器

這個外掛程式可在 DataTables CDN 上取得

JS

然後外掛程式會自動在全球 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/ellipsis.mjs';

CommonJS

如果你使用的是 Node 的 CommonJS 載入器(例如與舊版 Webpack 或非模組 Node 程式碼一起使用),請使用下列方法require 這個外掛程式

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

範例

// Restrict a column to 17 characters, don't split words
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 1,
      render: DataTable.render.ellipsis( 17, true )
    } ]
  } );
// Restrict a column to 10 characters, do split words
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 2,
      render: DataTable.render.ellipsis( 10 )
    } ]
  } );

版本控制

如果你有任何想法可以改善這個外掛程式,或發現有任何錯誤,它已在 GitHub 上提供,歡迎提出 Pull 要求!