Составная фильтрация даты Slickgrid не работает с разбиением на страницы. Я хочу фильтровать по дате как (<,>, <=,> =, <>)

Question

Я следую примеру (https://ghiscoding.github.io/Angular-Slickgrid/#/odata) код этого примера здесь (https://github.com/ghiscoding/AngularSlickgrid/blob/master/src/app/examples/grid-odata.component.ts)) Мои данные поступают из backed-api, аналогичного этому примеру, но при использовании соединения только для пагинациифильтр даты в slickgrid не работает.

    /******************code below*************************/
 ngOnInit():void{
 this.columnDefinitions = [
  {
    id: "SessionId",
    name: "SessionId",
    field: "SessionId",
    sortable: true,
    filterable: true,
    formatter: customFormatter,
    type: FieldType.string,
    filter: {
       model: Filters.compoundInput
    },
    onCellClick: (e, args) => {
      this.selectPayloadId(args.dataContext.PayloadId);
    }
  },
  {
    id: "ScheduleName",
    name: "ScheduleName",
    field: "ScheduleName",
    sortable: true,
    filterable: true,
    formatter: customFormatter,
    type: FieldType.string,
    filter: {
      // model: Filters.compoundInput
    },
    minWidth: 180,
    maxWidth: 180,
    onCellClick: (e, args) => {
      this.selectPayloadId(args.dataContext.PayloadId);
    }
  },
  {
    id: "SubModuleName",
    name: "SubModuleName",
    field: "SubModuleName",
    sortable: true,
    filterable: true,
    formatter: customFormatter,
    type: FieldType.string,
    filter: {
       model: Filters.compoundInput
    },
    minWidth: 180,
    maxWidth: 180,
    onCellClick: (e, args) => {
      this.selectPayloadId(args.dataContext.PayloadId);
    }
  },
  {
    id: "ScheduleDateTime",
    name: "ScheduleDateTime",
    field: "ScheduleDateTime",
    minWidth: 150,
    maxWidth: 150,
    sortable: true,
    filterable: true,
    filter: { model: Filters.compoundDate },
    formatter: Formatters.dateTimeUsAmPm,
    exportWithFormatter: true,
    type: FieldType.dateTimeUsAmPm,
    outputType: FieldType.dateTimeUsAmPm,
    onCellClick: (e, args) => {
      this.selectPayloadId(args.dataContext.PayloadId);
    }
  },
  {
    id: "PayloadCreateDateTime",
    name: "PayloadCreateDateTime",
    field: "PayloadCreateDateTime",
    minWidth: 150,
    maxWidth: 150,
    sortable: true,
    filterable: true,
    filter: { model: Filters.compoundDate },
    formatter: Formatters.dateTimeUsAmPm,
    exportWithFormatter: true,
    type: FieldType.dateTimeUsAmPm,
    outputType: FieldType.dateTimeUsAmPm,
    onCellClick: (e, args) => {
      this.selectPayloadId(args.dataContext.PayloadId);
    }
  },
  {
    id: "Processing",
    name: "Processing",
    field: "Processing",
    sortable: true,
    filterable: true,
    formatter: customFormatter,
    type: FieldType.string,
    filter: {
      model: Filters.compoundInput
    },
    minWidth: 250,
    maxWidth: 250,
    onCellClick: (e, args) => {
      this.selectPayloadId(args.dataContext.PayloadId);
    }
  },
  {
    id: "Status",
    name: "Status",
    field: "Status",
    sortable: true,
    filterable: true,
    minWidth: 100,
    maxWidth: 100,
    filter: {
      collection: [
        { value: "Completed", labelKey: "Completed" },
        { value: "Abort", labelKey: "Abort" },
        { value: "Scheduled", labelKey: "Scheduled" },
        { value: "Suspended", labelKey: "Suspended" },
        { value: "Inprogress", labelKey: "Inprogress" }
      ],
      collectionSortBy: {
        property: "labelKey" 
      },
      model: Filters.multipleSelect,
      filterOptions: {
        autoDropWidth: true
      }
    }
  }

];
this.gridOptions = {
  enableAutoResize: true,
  autoResize: {
    containerId: "demo-container",
    sidePadding: 15,
    maxHeight: this.scrHeight - 125
    // minHeight: 300,
  },
  // true by default
  enableCellNavigation: true,
  enableCheckboxSelector: true,
  enableFiltering: true,
  alwaysShowVerticalScroll: false,
  checkboxSelector: {
    // you can toggle these 2 properties to show the "select all" checkbox in different location
    hideInFilterHeaderRow: false,
    hideInColumnTitleRow: true
  },
  rowSelectionOptions: {
    // True (Single Selection), False (Multiple Selections)
    selectActiveRow: false
  },
  pagination: {
    pageSizes: [this.page],
    pageSize: null, //defaultPageSize,
    totalItems: 0
  },
  presets: {
    pagination: { pageNumber: 1, pageSize: this.page }
  },
  backendServiceApi: {
    service: new GridOdataService(),
    process: query => this.getCustomerApiCall(query),
    postProcess: response => {
      this.getCustomerCallback(response);
    }
  }
};

}

       /*****Filter  code***********/

       for (const param of queryParams) {
    //console.log(param);
    if (param.includes("$top=")) {
      top = +param.substring("$top=".length);
    }
    if (param.includes("$skip=")) {
      skip = +param.substring("$skip=".length);
    }
    if (param.includes("$orderby=")) {
      orderBy = param.substring("$orderby=".length);
    }
    if (param.includes("$filter=")) {
      const filterBy = param
        .substring("$filter=".length)
        .replace("%20", " ");
      if (filterBy.includes("substringof")) {
        const filterMatch = filterBy.match(
          /substringof\('(.*?)',([a-zA-Z ]*)/
        );
        const fieldName = filterMatch[2].trim();
        columnFilters[fieldName] = {
          type: "substring",
          term: filterMatch[1].trim()
        };
      }
      if (filterBy.includes("eq")) {
        const filterMatch = filterBy.match(/([a-zA-Z ]*) eq '(.*?)'/);
        const fieldName = filterMatch[1].trim();
        columnFilters[fieldName] = {
          type: "equal",
          term: filterMatch[2].trim()
        };
      }
      if (filterBy.includes("startswith")) {
        const filterMatch = filterBy.match(
          /startswith\(([a-zA-Z ]*),\s?'(.*?)'/
        );
        const fieldName = filterMatch[1].trim();
        columnFilters[fieldName] = {
          type: "starts",
          term: filterMatch[2].trim()
        };
      }
      if (filterBy.includes("endswith")) {
        const filterMatch = filterBy.match(
          /endswith\(([a-zA-Z ]*),\s?'(.*?)'/
        );
        const fieldName = filterMatch[1].trim();
        columnFilters[fieldName] = {
          type: "ends",
          term: filterMatch[2].trim()
        };
      }
     /**********lt represent less-than to filter date which is lesser to 
        it ********/
      if (filterBy.includes("lt")) {
        console.log("LT");
      }
    }
  }