JQuery JTable 用来自 ajax 调用的记录填充 table

Question

我想用 ajax 通话记录填充 jTable。记录采用 JSON 格式，如下所示：

{
 "Result":"OK",
   "Records":[
    {"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"\/Date(1320259705710)\/"},
    {"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"\/Date(1320259705710)\/"},
    {"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"\/Date(1320259705710)\/"},
    {"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"\/Date(1320259705710)\/"}
   ]
}

发起调用的函数：

 $("#btnSearchOffer").click(function () {

    $.ajax({
      method: 'post',
      url: '/SalesOfferInvoiceDeliveryNote/SearchOffers/',
      data: {
        cORAC_NUM: $("#inputORAC_NUM").val(),
        cORAC_DAT_FROM: $("#inputORAC_DAT_FROM").val(),
        cORAC_DAT_TO: $("#inputORAC_DAT_TO").val(),
        cORAC_STA: $("#selectORAC_STA option:selected").val(),
        iACCO_KEY: $("#hiddenACCO_KEY").val(),
        iUSER_KEY: $("#hiddenUSER_KEY").val()        
      },
      success: function (response) {

        if (response.Result === "OK") {
          //here I would like to fill jTable with data (what I've tried here 
          //it's not working):
          $('#tblOffers').jtable().listAction = response;
        }
      },
      error: function (response) {
        alert(response);
      }
    });

  });

我需要通过按下按钮来填充 jTable，因为文本字段中的所有参数都需要包含在 ajax 调用中：

Table 看起来像这样：

 $('#tblOffers').jtable({
    title: 'Pregled ponudb',
    paging: true,
    pageSize: 20,
    sorting: true,
    defaultSorting: 'cORAC_NUM DESC',
    actions: {
      listAction: "/SalesOfferInvoiceDeliveryNote/SearchOffers/"
    },
    messages: {
      serverCommunicationError: 'Napaka!',
      loadingMessage: 'Nalagam...',
      noDataAvailable: 'Ni podatkov!'
    },
    fields: {
      cORAC_NUM: {
        key: true,        
        title: 'Št. ponudbe'
      },
      cORAC_DAT: {
        title: 'Datum'
      },
      cACCO_NME: {
        title: 'Kupec'
      },
      ORAC_GRO_SUM: {
        title: 'Za plačilo'
      }
    }
  });

Answer 1

通过使用 load method you can send your data to listAction。以下是示例（asp.net Web 表单 C#）代码。

客户端：

//Re-load records when user click 'Search Offer' button.
$('#btnSearchOffer').click(function (e) {
    e.preventDefault();
    $('#tblOffers').jtable('load', {
        cORAC_NUM: $("#inputORAC_NUM").val(),
        cORAC_DAT_FROM: $("#inputORAC_DAT_FROM").val()
    });
});

并且在服务器端你可以接收数据：

[WebMethod(EnableSession = true)]
public static object SearchOffers(string cORAC_NUM, int cORAC_DAT_FROM, int jtStartIndex, int jtPageSize, string jtSorting)
{
    //handle null for all parameters
}

我没有添加你所有的参数。希望你能理解代码。如果您需要任何帮助，请告诉我。

JQuery JTable 用来自 ajax 调用的记录填充 table

JQuery JTable fill table with records from ajax call

jquery

jquery-jtable