Jquery Jtable 从 ajax 调用加载 Json

Question

我正在使用 jtable.org-s 库来显示 table 中的行。为了填充行，我使用了 listAction 这样的：

actions: {
  listAction: '/Passengers/Search'
},

此 URL 返回有效 json 并且一切正常。但我想从 ajax 手动调用 URL，因为这 URL returns 的信息比行多。它还 returns 我需要的其他表单元素的信息，例如搜索结果项数、woman/man 比率等

所以，我想 ajax 调用，并将响应加载到我的 jtable:

$.ajax({
  url: '/Passengers/Search',
  type: 'POST',
  data: {},
  success: function(data) {
    // here I would like to inject the Json(data) to my table
  }
});

Answer 1

您可以使用 FunctionsAsActions feature of jquery-jtable.
在 ajax 成功过滤器中，您可以过滤您的响应数据，使用 $dfd.resolve(data); 您可以将过滤后的数据加载到 jquery-jtable.
例如：

listAction: function (postData, jtParams) {
                    console.log("Loading from custom function...");
                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: '/Demo/StudentList?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
                            type: 'POST',
                            dataType: 'json',
                            data: postData,
                            success: function (data) {
                                //filter your data here and then pass filtered data to $dfd.resolve function

                                $dfd.resolve(data);
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },

Answer 2

abpatil 推荐的答案很好

一个更简单的解决方案可能是使用 jTable recordsLoaded 事件 http://jtable.org/ApiReference/Events#event-recordsLoaded

处理程序被赋予一个具有两个组件的事件数据对象。 data.records 是服务器发送的所有记录的数组，data.serverResponse 是来自服务器的完整 json 响应。

您可以遍历记录并处理任何额外的字段。

服务器还可以发送 jTable 未使用的额外 json 属性，您可以在此处处理 data.serverResponse 并在其他页面元素中使用它们。

Jquery Jtable 从 ajax 调用加载 Json

Jquery Jtable load Json from ajax call

ajax

jquery

json

jquery-jtable