0

Is it possible to override behaviour of jqgrid when passing data from client side? I know it is when fetching data from the server, but my issue is different. Here is jsfiddle link: http://jsfiddle.net/fott25/wdvsjwrg/

I will post my code here also, my html: 

<table id="list"></table>
<div id="pager"></div>

And this is my javascript with data and jqgrid initialization in it: 

var myData = [{
    id: 1,
    name: "aaz"
}, {
    id: 2,
    name: "bbz"
}, {
    id: 3,
    name: "ccz"
}, ];

$("#list").jqGrid({
    datastr: myData,
    datatype: "jsonstring",
    jsonReader: {
        page: function(datastr) {
            return 2;
        },
        total: function(datastr) { 
            return 10; 
        },
    }, 
    colNames: ["Id", "Name"],
    colModel: [{
        name: "id",
        index: "id",
        sorttype: "int"
    }, {
        name: "name",
        index: "name"
    }],
    rowNum:1,
    caption: "Viz Test",
    pager: '#pager',
});

This is the result of the code:

enter image description here

As you can see, I tried to set total number of pages to 10 in jsonReader properties, but jqgrid ignores that prop. Setting page to second is working just fine. Is it possible to override total page number?

EDIT #1: i tried setting lastpage to 10, but it is not working

Damir Ciganović-Janković
  • 821
  • 2
  • 12
  • 30
  • 1
    Which scenario you try to implement? Why you want to use `datatype: "jsonstring"`, which is almost the same as `datatype: "local"` with wrong `total` (`lastpage`) values? If the user clicks on the Next Page button then **previously loaded local data** will be tried to displayed, which will be not possible. One have to use `onPaging` callback to fix the problem. In general one can use `updatepager` callback to set the pager to any values, but I'm not sure that the grid will do want you expect after that. It could be that you just going in the false direction. What scenario you try to implement? – Oleg Apr 27 '16 at 10:38
  • We have some kind of filtering in our app where we populate request data and sent it via ajax request to get data from server. Data from server includes rows and numberOfPages value. After that we must populate data grid with that data and set it to jqgrid so I must use jsonstring or local with datastr. My aim was to implement onPagingEvent so that it will call javascript function to get data and recreate jqgrid with new data. I know it is an anti-pattern, but unfortunately this seems like an only way currently. Do you have any suggestions? I will look into updatepager,maybe I missed something – Damir Ciganović-Janković Apr 27 '16 at 11:05
  • 1
    You should implement such scenario only if the total number of rows which needed to display are really large (at least >10000). [The demo](http://www.ok-soft-gmbh.com/jqGrid/OK/performane-13-4000-20-free-jqgrid.htm) demonstrates the performance of *local* paging sorting and filtering of the grid with 4000 rows, 13 columns and 20 rows/page. [Another demo](http://www.ok-soft-gmbh.com/jqGrid/OK/performane-13-40000-20-free-jqgrid.htm) use 40000 rows and still work quick enough in Chrome. Typical round-trip to the web server could take *more time* as local paging. Think about that. – Oleg Apr 27 '16 at 11:11
  • 1
    [the old answer](http://stackoverflow.com/a/9047197/315935) provide an example of the usage `updatepager`. I forget to mention that the behavior of jqGrid could depend on version of jqGrid which you use and from the fork used. I develop [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork, which I can recommend you. It have many enhancements described in README to every published version and in [the wiki](https://github.com/free-jqgrid/jqGrid/wiki). – Oleg Apr 27 '16 at 11:15
  • Unfortunately, we can not transfer all our data to client side, not because of jqgrid, but becase of backend, db and web connection speed to our production servers. Thank you very much for your effort, I will look more into links you provided. – Damir Ciganović-Janković Apr 27 '16 at 11:20

1 Answers1

1

In general the usage of updatepager is very easy. You need just set page records and lastpage options of jqGrid and then call updatepager as

this.updatepager(false, true);

if the code is executing inside of another jqGrid callback or

$("#grid")[0].updatepager(false, true);

It's important to mention that updatepager don't reload the grid. It just set the values in the pager and enables/disables the pager buttons.

It's very important to combine the manual setting of pager values with implementing of onPaging callback. See the old answer for an example of the usage of updatepager.

Be carefully in the usage of onPaging callback, which options are changed multiple times over different versions of jqGrid. You can read in the wiki article more about the problems.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798