省略符號
將輸出資料限制為特定長度,較長的內容會以省略符號顯示,滑鼠懸停時會顯示瀏覽器提供的工具提示。
- 作者:Allan Jardine
- 需求:DataTables 1.10+
當您在寬度受限的欄位中顯示可能很長的資料字串時,此資料渲染輔助方法會很有用。欄位的資料仍然可以完整搜尋和排序,但如果長度超過給定的字元數,則會被截斷並以省略符號顯示。當使用者將滑鼠懸停在儲存格上時,瀏覽器提供的工具提示會顯示完整字串。
此函式應與 DataTables 的 columns.render
設定選項一起使用。
它接受三個參數
integer
- 限制顯示資料的字元數。boolean
(可選 - 預設為false
)- 指示字串截斷是否不應發生在單字中間(true
),還是可以發生(false
)。這可以讓字串顯示看起來更美觀,但會以顯示較少的字元為代價。boolean
(可選 - 預設為false
)- 是否逸出 HTML 實體(true
),否則為(false
- 預設)。
使用方法
此外掛程式可以透過多種不同的方式取得和使用。
瀏覽器
此外掛程式在 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/ellipsis.mjs';
CommonJS
如果您將 CommonJS 加載器用於 Node(例如,使用舊版本的 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 Request!
- 此外掛程式:ellipsis.js
- 完整的 DataTables 外掛程式儲存庫:DataTables/Plugins