1

I have a jqGrid that points at an external API, which I have no control over. This external API has two endpoints:

  • Data Endpoint - Returns the table row data
  • Count Endpoint - Returns pagination counts etc.,

Based on user input the jqGrid filter gets converted into the appropriate query-string to filter the external API's Data and Count Endpoints.

I have jqGrids url being dynamically built based off of user input and targets the Data Endpoint...and during the loadBeforeSend() event it calls the Count Endpoint to get the latest pagination information based on users filter.

I am using the jsonreader capabilities:

jsonReader: {
                    root: 'products',
                    id: 'id',
                    records: function () {

                        return gridTotal;
                    },
                    total: function () {
                        // var totalPages = (gridTotal + reqOptions.limit-1) / reqOptions.limit;
                        var totalPages = Math.ceil(gridTotal / reqOptions.limit);
                        console.log('totalPages: ' + totalPages);
                        return totalPages;
                    },
                    page: function () {
                        //var totalPages = Math.ceil(gridTotal/20);
                        console.log('currentPage: ' + reqOptions.page);
                        return reqOptions.page;
                    }
                },

Sample of the loadBeforeSend method:

loadBeforeSend: function (xhr, settings) {
    settings.url = _newUrl || endpointURL;

    // Lets fetch our data count...this may change as items get published so lets fetch during load
    products.count(accessToken, _filterQuery)
        .success(function (resp) {
            // This is the total number of products that match our current search
            gridTotal = resp.count;
        }).catch(function (err) {
            console.error(err);
        });
}

Fetching from the Data Endpoint works really well, the issue is how to call the Count Endpoint and update the pagination data.

Tried the following:

  • Using setGridParam for records, last_page, etc.,
  • Using getGridParam('reccount')
  • Just update the html to look correct (not effective since paging will be off)

Is there a way to

  • Manually fire off the XHR for jqgrid URL...so I can request the Count first and when it returns then go fetch the Data?
  • Rerun the jsonreader functionality once the Count returns and gridTotal is set
  • Use a promise like structure to resolve records count

Updated to show @Oleg solution

    loadBeforeSend: function (xhr, settings) {
        settings.url = _newUrl || endpointURL;

        // Lets fetch our data count...this may change as items get published so lets fetch during load
        products.count(accessToken, _filterQuery)
            .success(function (resp) {
                // This is the total number of products that match our current search
                gridTotal = resp.count;
gridTotal = resp.count;
                            grid.jqGrid('setGridParam', {
                                page: gridOpts.jsonReader.page(),
                                records: gridTotal,
                                lastpage: gridOpts.jsonReader.total()
                            });
                            grid[0].updatepager(false, true);
            }).catch(function (err) {
                console.error(err);
            });
    }
afreeland
  • 3,889
  • 3
  • 31
  • 42

1 Answers1

2

I hope that I correctly understand your problem. In the case you can first make loading of the main data from the Data Endpoint. Then (inside of loadComplete) you can start new $.ajax request manually to get the data from the Count Endpoint and to update the pagination data inside of success callback of the $.ajax.

What you need to do for the updating the pager is:

  1. setting of page, records and lastpage parameters of jqGrid based on the data returned from the Count Endpoint.
  2. call of $("#grid")[0].updatepager(false, true); which will uses the above options and to refresh the information on the pager.

You can see in the old answer and example of usage of .updatepager(false, true).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Yes your understanding of the question is accurate, I was hoping I explained it well enough, nice job =) ... Excellent I ran across that 'old answer' before but 'pageServer', 'recordsServer', and 'lastpageServer' were null. Instead of grabbing from 'getGridParam' using those fields I just recall my jsonreader functions. Thanks a lot!! @Oleg #FTW #Again – afreeland Mar 02 '16 at 20:43