[{"name":"NMR jsGrid","slug":"nmr-jsgrid","version":"1.0.0","author":"Mircea N.","author_profile":"https://profiles.wordpress.org/mirceatm/","requires":"5.2","tested":"6.1.7","requires_php":false,"requires_plugins":[],"rating":0,"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"downloaded":1681,"last_updated":"2023-01-26 2:46pm GMT","added":"2023-01-26","homepage":"https://namir.ro/jsgrid/","sections":{"description":"

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 number of columns, filters, edit, update and delete functionalities.
\nConfiguration of grids is performed on the admin back-end.
\nTables can be paginated and need back-end pagination. Ajax calls help to avoid entire page reload.

Example of a toy back-end pagination:

add_action('wp_ajax_nopriv_sample_pagination', function () {\n    // assume HTTP GET for this example\n    $data = $_GET;\n    global $wpdb;\n    $sql_base = $wpdb->prepare(\"SELECT umeta_id, meta_key FROM {$wpdb->prefix}usermeta\");\n    $sql = $wpdb->prepare(\"SELECT COUNT(*) FROM ({$sql_base}) t\");\n    $itemsCount = $wpdb->get_var($sql);\n    $pageIndex = intval($data['pageIndex']);\n    if ($pageIndex < 1) {\n        $pageIndex = 1;\n    }\n    $pageSize = intval($data['pageSize']);\n    if ($pageSize < 1) {\n        $pageSize = 20;\n    }\n    $endIndex = $pageIndex * $pageSize;\n    $startIndex = $endIndex - $pageSize;\n    $limit = \"LIMIT {$pageSize} OFFSET {$startIndex}\";\n    $sql = \"SELECT t.* FROM ({$sql_base}) t {$limit}\";\n    wp_send_json(json_encode(['data' => $wpdb->get_results($sql, ARRAY_A), 'itemsCount' => $itemsCount]));\n});\n

Having prepared the back-end to provide paginated data, the front-end data-grid cand be built in the Admin->NMR jsGrids interface.
\nAdd a row and set the column values accordingly.
\nPlease consult the documentation for more details:

Name will be used as DOM id for the data-grid
URL back-end endpoint, usually https://your-website.com/wp-admin/admin-ajax.php
Action should be sincronized with back-end. In our example Action=sample_pagination taken from: wp_ajax_nopriv_sample_pagination
Fields JSON array of columns as text. In our example could be:
\n[{“name”: “umeta_id”,”title”: “Id”,”type”: “number”},{“name”: “meta_key”,”title”: “Key”,”type”: “text”}]
\nFor a complete list of possible columns check the documentation
Height could be auto, a percent like 80%, a number: 400
Width same as above
Paging, Editing, Sorting, Autoload, Deleting, Filtering, Inserting, Page size 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.
Pager format can have a value of: Rows: {itemCount} – Pages: {first} {prev} {pages} {next} {last} {pageIndex} of {pageCount}
Page buttons 5 is a good choice

Plugin will enqueue nmr-jsgrid.js javascript file.
\nTo use the plugin on the Admin module one should add the Admin slug/hook in the filter: nmr_jsgrid_admin_enqueue_scripts
\nEx:

add_filter('nmr_jsgrid_admin_enqueue_scripts', function ($admin_php_files) {\n    // NMR jsGrid will be available in Admin->My page->My subpage\n    $admin_php_files[] = 'admin-my_page_admin-my_subpage';\n    return $admin_php_files;\n});\n

If you enjoy using NMR JSGrid and find it useful, please consider making a donation. Your donation will help encourage and support the plugin’s continued development and better user support.

Privacy Notices

\n","installation":"

Upload the entire nmr-jsgrid folder to the /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.

\n","changelog":"

1.0.0

Initial version.

\n","screenshots":"

"},"short_description":"Add jsGrid http://js-grid.com tables to your website using the shortcode: [nmr_jsgrid id='your-grid-name'].","download_link":"https://downloads.wordpress.org/plugin/nmr-jsgrid.1.0.0.zip","screenshots":{"1":{"src":"https://ps.w.org/nmr-jsgrid/assets/screenshot-1.jpg?rev=2854979","caption":""},"2":{"src":"https://ps.w.org/nmr-jsgrid/assets/screenshot-2.jpg?rev=2854979","caption":""}},"tags":{"jsgrid-table-jquery-javascript-ajax-pagination":"JSGrid table jquery javascript ajax pagination"},"versions":{"1.0.0":"https://downloads.wordpress.org/plugin/nmr-jsgrid.1.0.0.zip","trunk":"https://downloads.wordpress.org/plugin/nmr-jsgrid.zip"},"donate_link":"https://paypal.me/mirceatm","icons":{"1x":"https://ps.w.org/nmr-jsgrid/assets/icon-128x128.jpg?rev=2854988","2x":"https://ps.w.org/nmr-jsgrid/assets/icon-256x256.jpg?rev=2854988"}}]

JSGrid table jquery javascript ajax pagination

NMR jsGrid

Get New Themes & Resources