page.JumpToData()

透過搜尋欄位中的資料跳轉至特定頁面

直接跳轉到包含特定資料(例如使用者名稱)的頁面可能非常有用。這個外掛程式提供了這個功能,可以搜尋特定欄位中的特定資料參數,並立即變更表格的分頁,跳轉到該頁面。

如果有多個資料點符合請求的資料,則分頁將會變更以顯示第一個符合的資料。如果沒有符合的資料,則分頁不會變更。

請注意,與核心 DataTables API 方法不同,這個外掛程式會自動呼叫 draw() 來重新繪製表格,並顯示目前頁面。

使用

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

瀏覽器

這個外掛程式可在 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/api/page.jumpToData().mjs';

CommonJS

如果您使用的是 Node 的 CommonJS 加載器(例如,較舊版本的 Webpack,或非模組化的 Node 程式碼),請使用下列方法來 require 此外掛程式

var $ = require('jquery');
var DataTable = require('datatables.net');
require('datatables.net-plugins/api/page.jumpToData().js');

範例

var table = $('#example').DataTable();
  table.page.jumpToData( "Allan Jardine", 0 );

版本控制

如果您對如何改進此外掛程式有任何想法,或發現任何錯誤,它可在 GitHub 上取得,非常歡迎提出 pull request!