---
title: "Server Features | Features"
description: "ZingGrid has built-in parameters to connect to and query server REST endpoints."
url: https://www.zinggrid.com/docs/features/server-features
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/server-features.md
mode: provenance
representation: markdown
origin_response_id: 6a14729aed15ebfe0af84e5821a84863
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.703Z
version_nonce: 315e2d3dbdd3d0b29d899f7a07dc7dc0
generated_at_utc: 2026-11-08T23:36:15.267Z
response_nonce: a9118957749783d63205eb3b156369ab
```

# Server Features

ZingGrid has built-in parameters to connect to and query server REST endpoints.

## Connecting

Use the `<zg-param>` tag to enable connection to a server endpoint, like so:

```html
<!-- define the main source for the API -->
<zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
<!--
  define the path in the JSON to get the array of results.
  In this case it is body.results
-->
<zg-param name="recordPath" value="results"></zg-param>
```

> **Note:** The API only returns ten results at a time, so you must implement server paging to properly connect to this endpoint.

### Server Endpoint Connected Grid
Here is a complete grid that is connected to a server endpoint:

[Example code](https://app.zingsoft.com/demos/embed/96GNN4WH)

## Filtering

There are two types of server filtering that is supported:
1. inline
2. menu

You can choose to enable one or both filtering behaviors.

Enable server filtering through these `<zg-param>` attributes, like so:

```html
<!-- Required to be enable for server filtering -->
<zg-param name="loadByPage" value="true"></zg-param>
<!-- Enables server filtering -->
<zg-param name="serverFilter" value="true"></zg-param>
<!-- Include only if enabling filter menu -->
<zg-param name="filterFunction" value="createFilterURL"></zg-param>
```

The `<zg-param name="filterFunction">` should be included only if filter menu is enabled.
The param accepts the name of a function with `oFilter` argument.
The function is expected to return a URL query string (or object as name/pair values) to your server-side filter url.

```js

// Builds url for filtering
function createFilterURL(oFilter) {
  // Returns a URL query string
  return `?filter=${encodeURIComponent(JSON.stringify(oFilter))}`;
  // Or an object as name/pair value
  // return {filter: JSON.stringify(oFilter)}
};
```

### Server Filtering (both) Enabled Grid
Here is a complete grid with server paging enabled:

[Example code](https://app.zingsoft.com/demos/embed/QJ80T0I5)

## Paging

Enable server paging through a couple `<zg-param>` attributes, like so:

```html
<zg-param name="loadByPage" value="true"></zg-param>
<!-- define the "page" query parameter -->
<zg-param name="pageKey" value="page"></zg-param>
<!--
  Need to tell ZG how many records were returned so it knows
  how to divide up the page-size
-->
<zg-param name="countPath" value="count"></zg-param>
<!-- define the path in the result JSON to find next/prev urls -->
<zg-param name="nextPath" value="next"></zg-param>
<zg-param name="prevPath" value="previous"></zg-param>
```
### Server Paging Enabled Grid
Here is a complete grid with server paging enabled:

[Example code](https://app.zingsoft.com/demos/embed/2N8MT6X4)

## Search

Use the `searchKey` param to enable server search, like so:

```html
<zg-param name="searchKey" value="search"></zg-param>
```
### Server Search Enabled Grid
Here is a complete grid with server search enabled:

[Example code](https://app.zingsoft.com/demos/embed/2MFNJDF7)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [API Methods List](https://www.zinggrid.com/docs/api-methods)
* [Adding Features Guide](https://www.zinggrid.com/docs/adding-features)
* [`<zg-param>` Documentation](https://www.zinggrid.com/docs/api/tags/zg-param)