Add jsGrid http://js-grid.com tables to your website using the shortcode: [nmr_jsgrid id='your-grid-name'].

mirceatm

Add jsGrid http://js-grid.com tables to your website using the shortcode: <code>[nmr_jsgrid id='your-grid-name']</code>.
Data grids or tables have configurable number of columns, filters, edit, update and delete functionalities. 
Configuration of grids is performed on the admin back-end. 
Tables can be paginated and need back-end pagination. Ajax calls help to avoid entire page reload.
Example of a toy back-end pagination:
<pre><code>add_action('wp_ajax_nopriv_sample_pagination', function () {
 // assume HTTP GET for this example
 $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]));
});
</code></pre>
Having prepared the back-end to provide paginated data, the front-end data-grid cand be built in the Admin->NMR jsGrids interface. 
Add a row and set the column values accordingly. 
Please consult <a href="http://js-grid.com/docs/" rel="nofollow ugc">the documentation</a> for more details:
<ul>
<li><code>Name</code> will be used as DOM id for the data-grid</li>
<li><code>URL</code> back-end endpoint, usually https://your-website.com/wp-admin/admin-ajax.php</li>
<li><code>Action</code> should be sincronized with back-end. In our example <code>Action=sample_pagination</code> taken from: <code>wp_ajax_nopriv_sample_pagination</code></li>
<li><code>Fields</code> JSON array of columns as text. In our example could be: 
[{“name”: “umeta_id”,”title”: “Id”,”type”: “number”},{“name”: “meta_key”,”title”: “Key”,”type”: “text”}] 
For a complete list of possible columns check <a href="http://js-grid.com/docs/#grid-fields" rel="nofollow ugc">the documentation</a></li>
<li><code>Height</code> could be <code>auto</code>, a percent like <code>80%</code>, a number: <code>400</code></li>
<li><code>Width</code> same as above</li>
<li><code>Paging</code>, <code>Editing</code>, <code>Sorting</code>, <code>Autoload</code>, <code>Deleting</code>, <code>Filtering</code>, <code>Inserting</code>, <code>Page size</code> are self explanatory: allow pagination, editing, sorting, auto-loading, deleting, filtering and inserting of data. Page size determines the number of rows in one page.</li>
<li><code>Pager format</code> can have a value of: Rows: {itemCount} – Pages: {first} {prev} {pages} {next} {last}    {pageIndex} of {pageCount}</li>
<li><code>Page buttons</code> 5 is a good choice</li>
</ul>
Plugin will enqueue <code>nmr-jsgrid.js</code> javascript file. 
To use the plugin on the Admin module one should add the Admin slug/hook in the filter: <code>nmr_jsgrid_admin_enqueue_scripts</code> 
Ex:
<pre><code>add_filter('nmr_jsgrid_admin_enqueue_scripts', function ($admin_php_files) {
 // NMR jsGrid will be available in Admin->My page->My subpage
 $admin_php_files[] = 'admin-my_page_admin-my_subpage';
 return $admin_php_files;
});
</code></pre>
If you enjoy using NMR JSGrid and find it useful, please consider <a href="https://paypal.me/mirceatm" rel="nofollow ugc">making a donation</a>. Your donation will help encourage and support the plugin’s continued development and better user support.
<h4>Privacy Notices</h4>

Alternatives to NMR jsGrid

Top alternatives