Client-side filtering of jqGrid with multiple conditions

I am faced with a challenge in filtering records in a jqGrid based on multiple conditions.

For example, if there are columns for Name, Age, and City, and I need to filter the grid using the following condition:

Name = "Mark" and Age = 25 and City = 'NY'

The code below effectively filters the records-

 var grid = jQuery("#memberDetails");
 var postdata = grid.jqGrid('getGridParam', 'postData');

 var filterArray = new Array();
 var filterCondition; 

 filterCondition = new Object();
 filterCondition.field = "name";
 filterCondition.op = "eq";
 filterCondition.data = "Mark";
 filterArray.push(filterCondition);

 filterCondition = new Object();
 filterCondition.field = "Age";
 filterCondition.op = "eq";
 filterCondition.data = "25";
 filterArray.push(filterCondition);

 filterCondition = new Object();
 filterCondition.field = "City";
 filterCondition.op = "eq";
 filterCondition.data = "NY";
 filterArray.push(filterCondition);

 jQuery.extend(postdata, {
        filters: {
            "groupOp": "and",
            "rules": filterArray
        }
    });

 grid.jqGrid('setGridParam', {
            search: true,
            postData: postdata
    });

 grid.trigger("reloadGrid", [{
        page: 1
    }]);

However, I am unsure how to implement the following more complex filter:

Name = "Mark" and Age = 25 and (City = 'NY' OR City = 'FL')

The groupOp currently only supports AND or OR conditions, making it challenging to include sub-conditions within the main condition.

Any suggestions would be greatly appreciated. Thank you.

javascriptjqgrid

Answer №1

The documentation outlines the format of filters for implementing advanced search criteria using the groups property. Below is an example of how this can be implemented:

var $grid = $("#memberDetails");

$.extend($grid.jqGrid("getGridParam", "postData"), {
    filters: JSON.stringify({
        groupOp: "AND",
        rules: [
            { field: "Name", op: "eq", data: "Sarah" },
            { field: "Age",  op: "gt", data: "30" }
        ],
        groups: [
            {
                groupOp: "OR",
                rules: [
                    { field: "City", op: "eq", data: "LA" },
                    { field: "City", op: "eq", data: "SF" }
                ],
                groups: []
            }
        ]
    })
});
$grid.jqGrid("setGridParam", {search: true})
     .trigger('reloadGrid', [{current: true, page: 1}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an Uncaught TypeError when attempting to set properties of null with useRef

I've been working on an app that requires access to the user's device camera in order to display live video on the screen. I've managed to achieve this by utilizing a video HTML Object and setting the media stream as its srcObject. Everythin ...

javascriptreactjstypescriptnext.js

A guide on extracting content from a PDF file with JavaScript

Hey there, I'm experimenting with various methods to extract content from a PDF file but so far nothing seems to be working for me. Even when I try using pdf.js, it shows an error and I can't figure out why. This is the approach I've been tr ...

javascriptreactjspdf.js

Sending data to another page in React Native can be achieved by passing the values as parameters

I am currently working on passing values from one page to another using navigation. I have attempted the following code: this.props.navigation.navigate('welcome', {JSON_ListView_Clicked_Item:this.state.email,})) in the parent class where I am s ...

javascriptreact-nativenavigationreact-navigation

web browser editing tool

Do you know which library was utilized to create this JSON editor? You can find it at . The editor efficiently checks the syntax and shows errors when necessary. ...

javascriptjsoneditortext-editor

Do we always need to incorporate components in Vue.js, even if there are no plans for reuse?

I've been pondering this question for some time now: is it necessary for every component to be reusable? Consider a scenario where we have HTML, CSS, and JavaScript that cannot be reused. For instance, a CRUD table designed specifically for managing u ...

javascripthtmlcssreactjsvue.js

Transmit the Boolean value to the controller using ajax requests in asp.net.core with C# programming

Within the view section, there is a form that includes a checkbox input. <div class="checkbox"> <label class="">active</label> <div class="icheckbox_flat-green checked" style="position: relative;"> <input type="checkbox" id="A ...

javascriptc#htmlajaxmodel-view-controller

Top Method for Incorporating Syntax Highlighting into Code Blocks - React Sanity Blog

I'm currently exploring the most effective method to incorporate syntax highlighting into my react sanity.io blog. Here's a look at the article component I've developed using react: import React, {useEffect, useState} from "react"; import ...

javascriptcssreactjssyntaxsanity

Discover the way to utilize the java enum toString() function in jQuery

In my Java Enum class called NciTaskType, I have defined two tasks: Pnd Review Woli and Osp Planning. public enum NciTaskType { PndReviewWoli, // 0 OspPlanning, // 1 ; @Override public String toString() { switch (this) ...

javascriptjavajqueryenumstostring

Unable to invoke the 'apply' method on an undefined object when configuring directions for the jQuery Google Maps plugin

I've gone through the steps in a tutorial to create a jquery mobile google map canvas here, and have attempted to set it up. However, I keep encountering this error in my JavaScript console: Uncaught TypeError: Cannot call method 'apply' ...

javascriptjqueryjquery-mobilegoogle-maps-api-3

Is it possible to serialize the entirety of a website's Javascript state, including Closure/Hidden scopes?

My goal is to capture a "snapshot" of a webpage while maintaining its interactive functionality, allowing all Javascript states to be saved and restored. An example scenario where this would be beneficial is when a webpage contains script that utilizes glo ...

javascripthtmlgoogle-chrome-extensionfirefox-addon

React/Javascript - Executing Function returns prematurely

I have been working on a function that takes an object and iterates through it to create a search query. However, the issue I'm facing is that the function returns before I finish looping through the object: export default function buildQuery(query) ...

javascriptreactjs

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

javascripthtmlnode.jsexpresslocalhost

Eliminate items from one array when there is a corresponding match in a separate array using JavaScript

I am working with 2 JavaScript arrays First Array var columns=[{name: 'id', default: true}, {name: 'type', default: true},{name: 'typeName', default: true}, {name: 'client', default: false}]; Second Array var unSel ...

javascriptarrays

Unable to retrieve the value property from document.getElementById as it is null

Can someone help me with reading the input field value in my code? <input type="text" name="acadp_fields[1200]" class="text" placeholder="" value="December 26, 1969"> Here is the code snippet I am us ...

javascript

Create a loop to iterate through dates within a specified range using the Fetch API

When I need to get the exchange rate from the bank for a specific interval specified in the input, I follow these steps. The interval is defined as [startdate; enddate]. However, in order to make a successful request to the bank, the selected dates must be ...

javascriptjsonajaxapiloops

What is the best way to establish a global constant that can be accessed by multiple controllers in AngularJS?

Imagine I need to create a constant variable that can be shared between controllers in Angularjs; $webroot = "localhost/webroot/app" After some research, it appears that services are the recommended approach. But which one should I use? Should I implemen ...

javascriptangularjsangularjs-service

Retrieving CSS style values with Node.js

I am looking to design a new CSS style that includes the lowest and highest values. table[my-type="myStyle"] { width: 255.388px !important; } This code snippet is included in numerous CSS files within my style directory. ...

javascriptjquerycssnode.jsnodes

Display loading spinner and lock the page while a request is being processed via AJAX

Currently, I am working on a project using MVC in C#, along with Bootstrap and FontAwesome. The main objective of my project is to display a spinner and disable the page while waiting for an ajax request. Up until now, I have been able to achieve this go ...

javascriptjqueryhtmlajax

Retrieve the place_id associated with the address components

Having trouble obtaining the place_id of address_components using Google place autocomplete? The JSON data only includes long_name, short_name, and types. Take a look at my code snippet below: var object_location = document.getElementById('object_loc ...

javascriptgoogle-mapsgoogle-places-apigoogle-places

"Is it possible to rearrange the parent div's position when hovering over a child image with jquery sortable

Can you assist me with a task? I have two text boxes with an equal sign image, and I want the user to be able to move the div only when hovering over the equal sign. This means that the user should be able to drag the div using the equal sign. Can you hel ...

javascriptjqueryhtmlcssjquery-ui