JQgrid Пейджинг с группой вместо строк, как это сделать?

Question

Я использую jqGrid, и я сделал разбивку по страницам и разбивку по страницам, у меня более тысячи строк и для каждого отдела более 200 строк, и я показываю 100 строк на странице, поэтому проблема в каждой странице, я могу видеть только одну группу с первыми 100 записями на странице, и когда все строки заполнены, можно увидеть другую группу отдела. но на самом деле я хочу показать все группы на первой странице и при расширении я хочу показать первые 100 записей, а затем нумерацию страниц и то же самое для всей группы. это возможно с JqGrid? если да то как?

мой текущий код

var ParsedJson = JSON.parse(result.BatchRpt);
                jQuery("#tblBatchReport").jqGrid({
                    data: ParsedJson,
                    datatype: "local",
                    height: 'auto',
                    width: 'auto',
                    rowNum: 100,
                    rowList: [10, 20, 30, 50, 100],
                    colNames: ['Date', 'Time', 'CC #', 'Department', 'Amount', 'AuthCode', 'Invoice#'],
                    colModel: [
                        { name: 'BillDate', index: 'BillDate', width: 90, sorttype: "date", summaryType: 'count', summaryTpl: '({0}) total', resizable: false, },
                        { name: 'BillTime', index: 'BillTime', width: 90, sorttype: "date", resizable: false, },
                        { name: 'AccNo', index: 'AccNo', width: 130, resizable: false, },
                        { name: 'Department', index: 'Department', width: 100, resizable: false, },
                        { name: 'BillAmount', index: 'BillAmount', width: 80, align: "right", sorttype: 'number', formatter: 'number', summaryType: 'sum', resizable: false, },
                        { name: 'AuthCode', index: 'AuthCode', width: 100, resizable: false, },
                        { name: 'RegisterInvNo', index: 'RegisterInvNo', width: 100, resizable: false, },
                    ],
                    pager: "#tblBatchReportPager",
                    viewrecords: true,
                    sortorder: "desc",
                    caption: "Batch Report",
                    //sortname: 'DeptName',
                    grouping: true,
                    hidegrid: false,
                    groupingView: {
                        groupField: ['Department'],
                        groupDataSorted: false,
                        groupText: ['<b>{0} - {1} Department(s)</b>'],
                        groupCollapse: true,
                        groupOrder: ['asc'],
                        groupSummary: [true],
                        //groupSorted: false,
                    },
                    footerrow: true,
                    userDataOnFooter: true,
                    onClickGroup: function (hid, collapsed) {
                        //saveCollapsedStateToLocalStorage(hid, collapsed)

                        var i;
                        i = $.inArray(hid, expandedGroups) > -1;

                        if (!collapsed && i == false) {
                            expandedGroups.push(hid);
                        }
                        else if (collapsed && i == true) {
                            //Grouphid.splice(i, 1);
                            expandedGroups.splice($.inArray(hid, expandedGroups), 1);
                        }
                    },
                    loadComplete: function () {
                        var ActiveTab = $("#divBatchReportSection").find('.tabs').find('.active a').attr('data-TabIndex');
                        if (ActiveTab == "1") {
                            jQuery("#tblBatchReport").jqGrid('groupingRemove', true);
                        }
                        //else if (ActiveTab == 2)
                        //{
                        //    jQuery("#tblBatchReport").jqGrid('groupingGroupBy', ['CardType']);
                        //}
                        var $this = $(this),
                            //sum = $this.jqGrid("getCol", "SalesPrice", false, "sum"),
                            $footerRow = $(this.grid.sDiv).find("tr.footrow"),
                            localData = $this.jqGrid("getGridParam", "data"),
                            totalRows = localData.length,
                            totalSum = 0,
                            totalCostSum = 0,
                            $newFooterRow,
                            i;

                        for (i = 0; i < totalRows; i++) {
                            totalSum += parseFloat(localData[i].BillAmount, 10);
                        }
                        $footerRow.find(">td[aria-describedby=" + this.id + "_BillDate]")
                            .text("Grand Total:");
                        $footerRow.find(">td[aria-describedby=" + this.id + "_BillAmount]")
                            .text($.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number));
                        if (expandedGroups.length > 0) {
                            for (var i = 0; i <= expandedGroups.length; i++) {
                                if (typeof (expandedGroups[i]) != "undefined") {
                                    $this.jqGrid("groupingToggle", expandedGroups[i]);
                                }
                            }
                        }
                    }
                });
                jQuery("#tblBatchReport").jqGrid('navGrid', '#tblBatchReportPager', { add: false, edit: false, del: false });
                jQuery("#tblBatchReport").setGridWidth("100");
            }