jqGrid - Filter data with rules programmatically

Question

I have some problem with the jqGrid. I want filter my data into the jqGrid and want to display the only records depends on the id value like..

I want to display the only records whose id value is between 1-30 or 50-80 or 40-60.

So I called the on function that I created and I pass the value of id and that function will filter the data and display the filtered data.

If I pass the 0 It means It will display the records from the 1-30.

My coding is like below...

var jsonData = {
                "page": 1,
                "records": 100,
                "rows": [
                    { id: "1",...},
                    { id: "3",...},
                    { id: "4",...},
                    { id: "5",...},
                    { id: "6",...},
                    { id: "7",...},
                    { id: "8",...},
                    { id: "13",...},
                    { id: "14",...},
                    { id: "15",...},
                    { id: "16",...},
                    { id: "17",...},
                    { id: "18",...},
                    { id: "19",...},
                    { id: "20",...},
                    { id: "21",...},
                    { id: "22",...},
                    { id: "23",...},
                    { id: "24",...},
                    { id: "25",...},
                    { id: "26",...},
                    { id: "27",...},
                    { id: "28",...},
                    { id: "29",...},
                    { id: "30",...},
                    { id: "31",...},
                    { id: "32",...},
                    { id: "33",...},
                    { id: "34",...},
                    { id: "35",...},
                    { id: "36",...},
                    { id: "37",...},
                    { id: "38",...},
                    { id: "39",...},
                    { id: "40",...},
                    { id: "41",...},
                    { id: "42",...},
                    { id: "43",...},
                    { id: "44",...},
                    { id: "46",...},
                    { id: "47",...},
                    { id: "48",...},
                    { id: "49",...},
                    { id: "50",...},
                    { id: "51",...},
                    { id: "52",...},
                    { id: "53",...},
                    { id: "54",...},
                    { id: "55",...},
                    { id: "56",...},
                    { id: "57",...},
                    { id: "58",...},
                    { id: "59",...},
                    { id: "61",...},
                    { id: "62",...},
                    { id: "63",...},
                    { id: "64",...},
                    { id: "65",...},
                    { id: "66",...},
                    { id: "67",...},
                    { id: "68",...},
                    { id: "69",...},
                    { id: "70",...},
                    { id: "71",...},
                    { id: "72",...},
                    { id: "73",...},
                    { id: "74",...},
                    { id: "75",...},
                    { id: "76",...},
                    { id: "77",...},
                    { id: "78",...},
                    { id: "79",...},
                    { id: "80",...},
                    { id: "82",...},
                    { id: "83",...},
                    { id: "84",...},
                    { id: "85",...},
                    { id: "86",...},
                    { id: "87",...},
                    { id: "88",...},
                    { id: "89",...},
                    { id: "90",...},
                    { id: "91",...},
                    { id: "92",...},
                    { id: "93",...},
                    { id: "94",...},
                    { id: "95",...},
                    { id: "96",...},
                    { id: "97",...},
                    { id: "98",...},
                    { id: "99",...},
                    { id: "100",...},
                ]
            };

            $grid = $("#gridList");
            $grid.jqGrid({
                datatype: "jsonstring",
                datastr: jsonData,
                jsonReader: { "repeatitems": false },
                colNames: ['ID',...],
                colModel: [
                    { name: 'id', index: 'id', width: 10, alight: 'right', resizable: false, sortable: false }
                ],
                rowNum: 30,
                gridview: true,
                loadonce: true,
                height: "auto",
                ignoreCase: true,
                forceFit: true,
                autowidth: false,
                width: 244,
                loadComplete: function () {
                    $(this).find(">tbody>tr.jqgrow:odd").addClass("ui-jqgrow-even-blue");
                }
            });

            function FilterGridRow(value) {
                var startData = parseInt(value);
                var endData = startData + 30;

                var filter = {
                    groupOp: "AND",
                    rules: [
                        { field: "id", op: "ge", data: startData },
                        { field: "id", op: "le", data: endData },
                    ]
                }
                $grid[0].p.search = true;
                $.extend($grid[0].p.postData, { filters: eval(filter) });
                $grid.trigger("reloadGrid", [{ page: 1, current: true }]);
            }

            FilterGridRow(30);

Answer 1

The main problem if your code is missing property

sorttype: "integer"

in the id column. See https://jsfiddle.net/OlegKi/beutgLo8/3/. Without the property the data in id column will be interpreted as strings instead of integers and thus "4", "5", and "6" are larger as "30" (see https://jsfiddle.net/OlegKi/beutgLo8/4/)