w2ui grid getting records from api

Question

This is my first time trying to implement the w2ui library in my project. I have this code and am trying to get records from the remote url;

 <script type="text/javascript">
   $(function () {
    $('#grid').w2grid({
        name: 'grid',

      url:'http://api/payments.php',

       columns: [
        { field: 'name', caption: 'name', size: '30%' },

        { field: 'ref', caption: 'First Name', size: '30%' },
        { field: 'pay_date', caption: 'Last Name', size: '30%' },
        { field: 'amount', caption: 'Email', size: '40%' }


        ]

    });
});

the api returns this json output:

      [{"Key":"12;2TgBAACHBg==10;20897568710;","id":6,"amount":"50","pay_date":"2018-05-17T00:00:00Z","applicant_id":116,"paid_by":"sami","pay_type":"cash","ref":"NSC170621001","name":"Sekyi Quainoo"},{"Key":"12;2TgBAACHBw==10;20897569590;","id":7,"amount":"70","pay_date":"2018-05-17T00:00:00Z","applicant_id":119,"paid_by":"nii","pay_type":"cash","ref":"NSC170725119","name":"Adwoa Sam"}]

Answer 1

You need to change the returned JSON to be compliant with what w2ui expects.

The grid expects data in the JSON format from the server as it is described below. The JSON structure will be merged into the grid with jQuery.extend method. It means that you can return any supported grid property from the server and it will be applied.

{
    "status"  : "success",
    "total"   : 36,
    "records" : [
        { "recid": 1, "field-1": "value-1", ... "field-N": "value-N" },
        ...
        { "recid": N, "field-1": "value-1", ... "field-N": "value-N" }
    ]
}

Source: http://w2ui.com/web/docs/1.5/grid/overview#data-structures