jqueryajaxjsgrid

jsGrid loadData does not work


I use Ajax to load data into the jsGrid.

I have the following code:

$("#jsGrid").jsGrid({
    width: "100%",
    height: "100%",

    autoload:   true,
    paging:     true,
    pageSize:   15,
    pageButtonCount: 5,
    pageIndex:  1,

    controller: {
        loadData: function(filter) {
            var d = $.Deferred();
            $.ajax({    url: "/api/index.php/get_data",
                        contentType: "application/json; charset=utf-8",
                        data: {a:(filter.page?filter.page:0)},
                        dataType: "json"
                    }).done(function(response){
                        console.info(response);
                        d.resolve(response);
                    });
            return d.promise();
        }
    },
    fields: [
        { name: "ID", type: "number", width:50 },
        { name: "platform", type: "text", width: 100 },
        { name: "title", type: "text", width: 150 },
        { name: "url_image", type: "text", width: 200 },
        { name: "url", type: "text", width: 200 },
        { name: "cost", type: "text", width: 50 }
    ]
});

});

The ajax call returns an array of objects but it does not populate in the table.

What's wrong?


Solution

  • The ajax call returns an array of objects but it does not populate in the table.

    What's wrong?

    First: ajax is by itself a promise, so you may return itself.

    Second: height: "100%",: this will set the height to a little value (on my computer the value of ".jsgrid-grid-body" is only 3px!!!). You may use the default value or set another one.

    The snippet:

    $("#jsGrid").jsGrid({
      width: "100%",
      height: "auto",
    
      autoload:   true,
      paging:     true,
      pageSize:   5,
      pageButtonCount: 5,
      pageIndex:  1,
    
      controller: {
        loadData: function(filter) {
          return $.ajax({
            url: "https://api.github.com/repositories",
            dataType: "json"
          });
        }
      },
      fields: [
        {name: "name", width: 50},
        {name: "full_name", width: 100}
      ]
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
    
    
    <div id="jsGrid"></div>