如何：使用 JsGrid 进行服务器端过滤答案

【问题标题】：How To: Server-Side Filtering with JsGrid如何：使用 JsGrid 进行服务器端过滤
【发布时间】：2019-04-06 13:55:49
【问题描述】：

我是 JsGrid 的新手。我目前正在使用 JsGrid 配置的“数据”属性通过 Ajax 调用加载数据。但是，我想允许用户过滤数据。我知道它可以在客户端或服务器端完成。我没有偏好，但如果我使用服务器端，看起来我需要“控制器”并实现“loadData”功能。但是，我看到的代码将“loadData”函数的“filter”参数发送到 $.ajax() 调用的“data”属性。

我的 API 是用 Node.js (Express & Body-Parser) 编写的；我可以期望在我的 API 中收到什么？它会是一个 JSON 文档，其中包含用户在文本框中输入的所有过滤值的字段：值对？如果是这样，我想我需要将这些值发送到我的存储过程（使用 Tedious）？

我知道，这听起来很明显，但在我开始走这条路之前，我想确保我走的是正确的方向。

提前致谢！

这是我的原型代码（尚未执行）：

    var db = {
        loadData: (filter)=>{
            $.ajax({
                type: 'GET',
                    url: '/kudosapi/report?member=1',
                    data: filter,
                    dataType: 'json',
                    error: (xhr,status,error)=>{
                        errorHandler(xhr,status,error);
                    },
                    success: (data)=>{
                        // Load grid
                    }
            });
        }
    }

【问题讨论】：

标签： jsgrid

【解决方案1】：

要使其在服务器端工作，您需要实现 pageLoading: true 和 pageIndex: n，并返回数据及其长度。

这是我如何解决它的示例

$("#my-table").jsGrid({
          width: "100%",
          filtering: true,
          inserting: false,
          editing: false,
          sorting: true,
          paging: true,
          pageSize: 4,
          autoload: true,
          pageLoading: true,
          pageIndex: 1,
          controller: {
            loadData: function (filter) {
              var d = $.Deferred();
              var url = "your url";
              $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                data: filter
              }).done(function (response) {
                 d.resolve(response);
              });

              return d.promise().then(function(data) {
                var startIndex = (filter.pageIndex - 1) * filter.pageSize;
                return {
                      data: data(startIndex, startIndex + filter.pageSize),
                      itemsCount: data
                };
             });

            }

          },

          fields: []
});

【讨论】：