內容簡介
使用短碼：[nmr_jsgrid id='your-grid-name']，在網站上添加 jsGrid http://js-grid.com 表格。
數據網格或表格具有可配置的列數、過濾器、編輯、更新和刪除功能。
網格的配置在管理員後端進行。
表格可以分頁，需要後端分頁。 Ajax 請求有助於避免整個頁面重新加載。
一個玩具後端分頁的示例：
add_action('wp_ajax_nopriv_sample_pagination', function () {
// 假定本示例使用 HTTP GET
$data = $_GET;
global $wpdb;
$sql_base = $wpdb->prepare("SELECT umeta_id, meta_key FROM {$wpdb->prefix}usermeta");
$sql = $wpdb->prepare("SELECT COUNT(*) FROM ({$sql_base}) t");
$itemsCount = $wpdb->get_var($sql);
$pageIndex = intval($data['pageIndex']);
if ($pageIndex < 1) {
$pageIndex = 1;
}
$pageSize = intval($data['pageSize']);
if ($pageSize < 1) {
$pageSize = 20;
}
$endIndex = $pageIndex * $pageSize;
$startIndex = $endIndex - $pageSize;
$limit = "LIMIT {$pageSize} OFFSET {$startIndex}";
$sql = "SELECT t.* FROM ({$sql_base}) t {$limit}";
wp_send_json(json_encode(['data' => $wpdb->get_results($sql, ARRAY_A), 'itemsCount' => $itemsCount]));
});
準備好提供分頁數據的後端後，在「管理員」->「NMR jsGrids」介面中可以建立前端資料網格。
添加一行並相應地設置列值。
請參閱文件以了解更多詳細信息：
名稱將用作數據網格的 DOM id
URL後端端點，通常為 https://your-website.com/wp-admin/admin-ajax.php
Action應與後端同步。在我們的示例中，Action=sample_pagination 取自： wp_ajax_nopriv_sample_pagination
Fields 文本形式的列的 JSON 數組。在我們的示例中可為：
[{“name”: “umeta_id”,”title”: “Id”,”type”: “number”},{“name”: “meta_key”,”title”: “Key”,”type”: “text”}]
有關可能列的完整列表，請查看文檔
Height 可以是 auto，一個百分比，如 80%，一個數字： 400
Width 同上
Paging、Editing、Sorting、Autoload、Deleting、Filtering、Inserting、Page size 是自解釋的：允許分頁、編輯、排序、自動加載、刪除、過濾和插入數據。分頁大小確定一頁中的行數。
Pager format 可以有以下值：行：{itemCount} - 頁：{first} {prev} {pages} {next} {last} {pageIndex} of {pageCount}
Page buttons 選 5 是個好選擇
插件將排隊 nmr-jsgrid.js JavaScript 檔。
要在「管理員模組」中使用插件，應在篩選器中添加 Admin slug/hook：nmr_jsgrid_admin_enqueue_scripts
例：
add_filter('nmr_jsgrid_admin_enqueue_scripts', function ($admin_php_files) {
// NMR jsGrid 將在管理員 -> 我的頁面 -> 我的子頁面中可用
$admin_php_files[] = 'admin-my_page_admin-my_subpage';
return $admin_php_files;
});
外掛標籤
開發者團隊
原文外掛簡介
Add jsGrid http://js-grid.com tables to your website using the shortcode: [nmr_jsgrid id='your-grid-name'].
Data grids or tables have configurable columns, filters, edit, update and delete functionality.
Configuration is performed in the WordPress admin. Tables support AJAX pagination to avoid full page reloads.
This is the free version of NMR jsGrid. For unlimited grids and all features, see NMR jsGrid Pro.
Free version limits
Maximum 10 grids
select field type is read-only in the column editor (Pro only)
Build Columns from Data Source is disabled (Pro only)
Pro version
NMR jsGrid Pro adds:
Unlimited grids
select field type with custom items, value field, and text field
Build Columns from Data Source — auto-detect columns from SQL, static, or remote data
Priority support
Usage
Go to Admin → NMR jsGrid → Add New. Pick a data source, build columns with the visual editor, configure display options, then embed with the shortcode [nmr_jsgrid id='your-grid-name'].
Data source types
Remote — AJAX calls to a custom WordPress action you provide. Set the endpoint URL and action name.
Static — paste a JSON array directly; no back-end needed.
SQL — write a SELECT query; the plugin handles pagination, filtering, insert, update, and delete automatically.
Display options
Height / Width — auto, percent (80%), or pixels (400)
Paging, Editing, Sorting, Autoload, Deleting, Filtering, Inserting, Page size — toggle grid behaviours
Pager format — e.g. Pages: {first} {prev} {pages} {next} {last} {pageIndex} of {pageCount}
Page buttons — number of page buttons shown (5 is a good default)
If you enjoy using NMR jsGrid and find it useful, please consider making a donation.