-->

Paging is not working, using JsonRest with Enhance

2019-08-07 03:29发布

问题:

I'm creating widget for IBM BusinessSpace, and I'm having some difficulties with paging. Data are succesfully returned from database (using restlet) and displayed in a grid. Navigation is also displayed below the grid (next page, previous page, go to page, number of pages, etc). If I, for example, have 3 pages, 5 rows per page, and want to navigate to second page, when I click on the page number 2, data reloads (it seems like restlet is called again), and first 5 rows (displayed on the first page) are showed on this one too. If I choose any other navigation option (next page, ...), same thing happeneds. Bottom line, every click results in first 5 rows from my database. Any clue on how to resolve this issue?

Here's a code regarding this:

dojo.require("dojo.data.ObjectStore"); 
dojo.require("dojox.grid.enhanced.plugins.Pagination"); 
dojo.require("dojox.grid.EnhancedGrid"); 
dojo.require("dojo.store.JsonRest"); 


var restStore = new dojo.store.JsonRest({target:"https://localhost:9443/Application/hello"}); 

var dataStore = dojo.data.ObjectStore({objectStore: restStore}); 

dojo.ready(function(){ 

    var grid = new dojox.grid.EnhancedGrid({ 

        store: dataStore, <br>
        structure: [                   
            {name:"Value", field:"value", width: "auto"}, 
            {name:"RequestID", field:"requestId", width: "auto"}, 
            {name:"ID", field:"id", width: "auto"}, 
            {name:"Name", field:"name", width: "auto"} 
        ],         
        columnReordering: true, 
        clientSort: true, 
        rowSelector: '20px', 
        rowsPerPage: 5, 
        autoHeight: true, 
        plugins: {
            pagination: { 
                pageSizes: ["5", "10", "15", "All"], // page length menu options 
                description: true, // display the current position
                sizeSwitch: true, // display the page length menu
                pageStepper: true, // display the page navigation choices 
                gotoButton: true, // go to page button   
                position: "bottom" // position of the pagination bar  
            }
        } 
    }, "gridDiv");
    grid.startup(); 
});

回答1:

When using jsonRest in a grid, when you scroll the records not shown are not loaded yet, at this moment jsonRest makes a request for the data needed to show, for this pager to work as expected, in your rest implementation you have to consume a header that dojo creates (Range: 0-24), this one is sent by dojo so you know the offset and limit for the data needed, for the response, you have to return a header (Content-Range: items 0-24/66), the numbers tell dojo from where to where it should be showing and how much total record are.

This is an example in php (assuming that db and response are actual objects):

$range = $request->headers->get('Range');

preg_match_all ('/.*?(\d+).*?(\d+)/is', $range, $matches);

$limit = $matches[2][0];
$offset = $matches[1][0];

$sql = "SELECT SQL_CALC_FOUND_ROWS * FROM table LIMIT {$limit} OFFSET {$offset}";
$result = $db->execute($sql);

$sql2 = "SELECT FOUND_ROWS()";
$count = $db->execute($sql2);

$response->setContent($result);
$response->headers->set('Content-Range', "items $offset-$limit/{$count}");

In jsonRest documentation there is some information.