JQuery JTable 使用 ajax 调用的记录填充表

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 调用中:

表格如下所示:

 $('#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您可以将数据发送至listAction的方法。以下是示例(asp.net web form 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
}

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