jqueryjquery-jtable

JQuery JTable fill table with records from ajax call


I would like to fill jTable with records from ajax call. Records are in JSON format, like this:

{
 "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)\/"}
   ]
}

Function which makes the call:

 $("#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);
      }
    });

  });

I need to fill jTable with button press, because all of parameters from text fields needs to be included in the ajax call:

Table looks like this:

 $('#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'
      }
    }
  });

Solution

  • By using load method you can send your data to listAction. Following is the example(asp.net web form c#) code.

    Client side:

    //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()
        });
    });
    

    And in server side you can receive data:

    [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
    }
    

    I have not added your all parameters. Hope you will understand the code. Let me know if you need any help.