You’ve got a table on your WordPress site — maybe a list of products, staff, members, or records — and it’s grown to the point where users can’t find what they need without scrolling through hundreds of rows. You need filtering (search by column value) and pagination (show 20 rows at a time). And ideally, both should work together without reloading the page.
This post covers how to do that with NMR jsGrid. Unlike static table plugins that filter and paginate in the browser, NMR jsGrid processes everything server-side — meaning it handles large datasets efficiently and your full data isn’t exposed in the page HTML.
The Problem with In-Browser Filtering
Many table plugins use DataTables.js or similar libraries that load all rows into the HTML, then hide/show them with JavaScript. This approach:
- Slows page load for large tables (all data loads upfront)
- Exposes all data in the page source (privacy and security concern)
- Breaks down above a few hundred rows
- Often breaks when filtering and pagination are used together (filter resets pagination, or pagination ignores filter)
Server-side processing solves all four. The database does the filtering and counting; the browser only receives the current page of matching results.
What the End Result Looks Like
An NMR jsGrid table has:
- A filter input row above the data rows — one field per column
- Pagination controls below — previous/next and page number buttons
- Sort arrows on column headers
- Results update via AJAX — no page reload, just the grid refreshes
When you type in a filter field, the grid fires an AJAX request with the filter value. The server runs the query with a matching WHERE clause and returns only the results for that filter + current page. Pagination shows the correct count for the filtered result set.
Setup Guide
Install and Activate
WordPress Admin → Plugins → Add New → search “NMR jsGrid” → Install → Activate.
Create a Grid
NMR jsGrid → Add New. Set an ID for the shortcode (e.g. staff-directory).
Pick a Data Source
SQL (recommended for existing database data):
SELECT id, full_name, department, location, phone
FROM wp_staffStatic (for small, manually-entered datasets — paste a JSON array):
[
{"id": 1, "name": "Alice", "department": "Sales", "location": "Cluj"},
{"id": 2, "name": "Bob", "department": "Engineering", "location": "Bucharest"}
]Configure Columns
Add one column per field. For filtering: enable the Filtering toggle on each column where you want a search input. For sorting: enable Sorting on sortable columns.
Set Pagination Options
Enable Paging, set Page Size (rows per page), enable Filtering and Sorting in Grid Options.
Embed
Filtering and Pagination Working Together
One common failure point in other plugins: you filter by “department = Sales”, get 12 results, but pagination still shows “Page 1 of 50” and lets you navigate pages that have no results. NMR jsGrid handles this correctly — the total count is recalculated on every filter change, so pagination always reflects the current filtered result set.
Pro Tip: Combine with Page Restriction
If the data is sensitive (staff contacts, client records), password-protect the page in WordPress Page Settings. The grid itself doesn’t enforce access control — that’s WordPress’s job. The page password or user role restriction keeps unauthorized users out.