Pagination with Searching and Sorting by using GET method

Pagination with searching and sorting is an essential feature in modern web applications. It helps users efficiently browse through extensive datasets, find specific information, and organize the results according to their preferences. In this comprehensive guide, we will delve into the implementation of pagination with searching and sorting using the Faux API tool, exploring its various aspects, functionalities, and response structures.

Understanding Pagination with Searching and Sorting

Pagination, searching, and sorting are essential functionalities that enhance the usability and Pagination, searching, and sorting are vital functions that boost the usability and efficiency of web applications, especially those handling large volumes of data. Pagination divides large datasets into manageable pages, allowing users to navigate through them sequentially. Searching allows users to filter data according to particular criteria, while sorting organizes the data in a chosen sequence, like ascending or descending order.

API Endpoint and Response Structure

The API endpoint for implementing pagination with searching and sorting follows a specific format:

API URL: serve/<apiName_tokenNo>?key1=value1&key2=value2&globalSearch=value1,value2&searchMode=AND&page=2&limit=10&sortBy=key1&sortOrder=DESC

Only pagination

API URL: serve/<apiName_tokenNo>?page=2&limit=10

Only sorting

API URL: serve/<apiName_tokenNo>?sortBy=key&sortOrder=DESC

All Query Parameters (Explained with Defaults)

Parameter	Meaning
searchMode	Choose "AND" to apply all row rules together, or "OR" to apply any rule from any row.
sortBy	Pick a column to sort by, such as id, name, or role
sortOrder	Use "ASC" for ascending (e.g., 1→10, A→Z) or "DESC" for descending (e.g., 10→1, Z→A).
page	Select which page of results to display. It starts at page 1 by default.
limit	Choose how many records appear on each page.
key1=value1	Apply filters by passing field-value pairs, e.g., key=value, key2=value2, and so on.
globalSearch	Find results by entering words like "trainer" or "admin". The search checks all fields and supports multiple terms.

🔥Example API: users

id	name	role	status
1	Nora	admin	active
2	Omar	user	active
3	Ivy	admin	inactive
4	Liam	user	inactive
5	Sara	trainers	inactive

🔹 Using sortBy and sortOrder (serachMode: OR)

=> This sorts by the id (Default value and no need to mention in filter) column in descending order:

API URL: ' serve/<apiName_tokenNo>?name=Nora&role=user&globalSearch=trainer&sortOrder=DESC

const params = new URLSearchParams({
"name": "Nora",
"role": "user",
"globalSearch": "trainer",
"sortOrder": "DESC"
});

fetch(`<API URL>?${params.toString()}`, { 
    method: 'GET',
    headers: {
        // Include Authorization headers if required
        'Authorization': 'Bearer YOUR_TOKEN_HERE',
    }
})
.then(response => response.json())
.then(data => {
    console.log(data); // Process the fetched data
})
.catch(error => {
    console.error('Error:', error); // Handle any errors
});

Test Code

🟢 Result:

id	name	role	status
5	Sara	trainers	inactive
4	Liam	user	inactive
2	Omar	user	active
1	Nora	admin	active

=> This sorts by the role column in descending order on all data:

API URL: ' serve/<apiName_tokenNo>?sortBy=role&sortOrder=DESC

const params = new URLSearchParams({
"sortOrder": "DESC",
"sortBy": "role"
});

fetch(`<API URL>?${params.toString()}`, { 
    method: 'GET',
    headers: {
        // Include Authorization headers if required
        'Authorization': 'Bearer YOUR_TOKEN_HERE',
    } 
})
.then(response => response.json())
.then(data => {
    console.log(data); // Process the fetched data
})
.catch(error => {
    console.error('Error:', error); // Handle any errors
});

Test Code

🟢 Result:

id	name	role	status
2	Omar	user	active
4	Liam	user	inactive
5	Sara	trainers	inactive
3	Ivy	admin	inactive
1	Nora	admin	active

const params = new URLSearchParams({
  "key1": "value1",
  "globalSearch": "value1,value2",
  "page": "1",
   .......
});

fetch(`<API URL>?${params.toString()}`, { 
    method: 'GET',
    headers: {
        // Include Authorization headers if required
        'Authorization': 'Bearer YOUR_TOKEN_HERE',
    } 
})
.then(response => response.json())
.then(data => {
    console.log(data); // Process the fetched data
})
.catch(error => {
    console.error('Error:', error); // Handle any errors
});

Test Code

Conclusion

Pagination with searching and sorting is a powerful feature that enhances data navigation and retrieval in web applications. Developers can use Fox API tools to set up efficient pagination methods to suit their needs. Be it fetching data into pages, searching, sorting or combining these features, Faux API provides the flexibility and convenience to handle large datasets effectively.