Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
This topic is locked No permission to create posts
sp_Feed Topic RSS sp_TopicIcon
Using Client Side Sorting But Server Side Paging using JQGrid
25/05/2009
11:04
Avatar
sam1980s
Member
Members
Forum Posts: 6
Member Since:
22/05/2009
sp_UserOfflineSmall Offline

Hi,

1. Requirement :
In my project most of grids need to have client side sorting . so lets say i have 10 records on client side when i sort only those 10 records will be sorted.
But I need server side paging.

Solution :
I can achieve this by using loadonce : true in jqgrid. And providing some other server side pager control.

Problem :
1. Can I achive client side sorting and server side paging both using JQGrid.

2. When i set the load once to true the paging gets disabled. I wants to provide some kind of jquery paging also. So when i click on next page it will fetch the next say 10 records from the server.

Regards,

Sam

25/05/2009
12:58
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

The solution is a little tricky.

1. Set your default datatype to json or xml.

2. define loadComplete event like this

loadComplete: function () {

$("#mygrid").setGridParam({datatype:'local'});

}

3. define onPaging event like thiss

onPaging : function(which_button) {

$("#mygrid").setGridParam({datatype:'json'});

}

Enjoy!

Do not forget to set sorttype in colModel in order to sort work correct

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

25/05/2009
13:50
Avatar
sam1980
New Member
Members
Forum Posts: 1
Member Since:
22/05/2009
sp_UserOfflineSmall Offline

Thanks Tony for your help.

I will try this out and let you know if it works.

Regards,

Sam

26/05/2009
01:46
Avatar
sam1980s
Member
Members
Forum Posts: 6
Member Since:
22/05/2009
sp_UserOfflineSmall Offline

Thanks Tony.

This solution worked.

Regards,

Sam

30/06/2009
09:27
Avatar
riverguardian
Member
Members
Forum Posts: 17
Member Since:
30/06/2009
sp_UserOfflineSmall Offline

Would it be possible to elaborate on this? I understand that the loadComplete: function has to be included in the

jQuery("#list2").jqGrid({

section, but I'm not sure about what needs to be modified in the onPaging part. Can someone provide me with an example?

Thanks!

02/07/2009
02:48
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

The on pagging event have the same place - in jqGrid parameters

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

08/09/2009
18:35
Avatar
Jay
Guest
Guests

It seems to me that this should be the default behavior of jqGrid. Why do you want the latency and performance hit of a round trip to the server just to sort data? Perhaps there should be an option to allow server-side sorting for those that need it, but by default, the client should sort.

Also, I tried using Tony's suggestions above (toggling the grid between local and xml) and while they seemed to work, I had major problems. On some of the grid pages (maybe just the last page?), when sorting, the columns would become different sizes than the headers. I also encountered an issue where I clicking on the next button in the pager took me back several pages. But then clicking again would start to advance me in the right direction. I finally had to give up.

10/09/2009
04:11
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Not sure if this will be default. In this case the developers should place additional the sorttype option and etc.

Also it is good that you have to do this with minimal code.

The main concept of jqGrid is not to give ready solutions, but rather possibility to do evrething what you want.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

28/10/2009
09:46
Avatar
pupian
Guest
Guests

this topic solves my problem in my school project.. thank you very much. i wish someday i could be as good as you guys.

18/08/2011
02:45
Avatar
dinesh
Member
Members
Forum Posts: 5
Member Since:
16/08/2011
sp_UserOfflineSmall Offline

tony said:

Hello,

The solution is a little tricky.

1. Set your default datatype to json or xml.

2. define loadComplete event like this

loadComplete: function () {

$("#mygrid").setGridParam({datatype:'local'});

}

3. define onPaging event like thiss

onPaging : function(which_button) {

$("#mygrid").setGridParam({datatype:'json'});

}

Enjoy!

Do not forget to set sorttype in colModel in order to sort work correct

Regards

Tony


Thanks, this works for me!

24/11/2011
09:27
Avatar
kishore
Hyderabad
Member
Members
Forum Posts: 9
Member Since:
12/08/2011
sp_UserOfflineSmall Offline

Hi Tony,

Hope u guys have been rocking for jqgrid.

Here it is, my requirenment is about the client side paging.

Is there a way to do a client side paging when we go for loadonce:true?

thanx in advance, kishore.

30/11/2011
06:16
Avatar
newtonianb
Member
Members
Forum Posts: 3
Member Since:
30/11/2011
sp_UserOfflineSmall Offline

I tried that but it's not working. 4.2.0

The paging works but when I try to sort a field it blanks out the entire grid.

    
$(document).ready(function(){
      $("#mygrid").jqGrid({
        url:'http://localhost/data',
        datatype: 'json',
        mtype: 'GET',
        colNames:['ID', 'User'],
        colModel :[ 
            {name:'id', jsonmap: 'cell.id', sorttype:'int'},
            {name:'user', jsonmap: 'cell.user', sorttype:'text'},            
        ],
        jsonReader: { repeatitems: false },
        pager: '#mypager',
        viewrecords: true,
        rowNum:30,
        rowList:[30,100,1000],
        gridview: true,
        viewrecords: true,
        sortable:true,        
        sortorder: 'desc',        
        height: "100%",
        scrollOffset:0,  
        onSelectRow: function(id){ 
         },          
        altRows     : true,
        altclass    : 'oddRow',
        gridComplete: function() {
            $(".jqgrow:odd").hover(
                function() { $(this).removeClass("oddRow");}, 
                function(event) { $(this).addClass("oddRow");}
            );
        }, 
        onPaging: function() {
            $("#mygrid").setGridParam({datatype:'json'});
            $("#mygrid").trigger("reloadGrid");
            },               
        loadComplete: function () {        	
        	$("#mygrid").setGridParam({datatype:'local'});
        	$("#mygrid").trigger("reloadGrid");
        	}, 	
      }); 
      
      $('#mygrid').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: false });
    });
30/11/2011
13:07
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Everthing is OK IMHO, but you will need to remove the reloading the grid.

It is done automatically.

There is example here:

http://www.trirand.com/jqgridw.....ide_paging

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

30/11/2011
19:11
Avatar
newtonianb
Member
Members
Forum Posts: 3
Member Since:
30/11/2011
sp_UserOfflineSmall Offline

I did this exactly and the paging works but when I try to do the search or the sorting by column field the entire data in the grid dissapears!

30/11/2011
19:22
Avatar
newtonianb
Member
Members
Forum Posts: 3
Member Since:
30/11/2011
sp_UserOfflineSmall Offline

If I do loadonce: true paging no longer works but sorting and searching works

30/11/2011
20:23
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

It is wired. If you use loadonce : true

why do you use these? - this is not needed. Please look what loadonce do.

Actually you do not need to do anything in this case

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

07/12/2011
21:47
Avatar
basil
New Member
Members
Forum Posts: 2
Member Since:
07/12/2011
sp_UserOfflineSmall Offline

Hi,

    I am trying to do clientside sorting and server side paging but I am using

datatype: function(){....}

when I try the method

loadComplete: function(){
        grid.setGridParam({datatype:'local'});
    },

it doesn't seem to work for me.  

Is this because of the original def as a function?

thanks for any help

B

12/12/2011
21:15
Avatar
ericisko
Member
Members
Forum Posts: 5
Member Since:
17/09/2011
sp_UserOfflineSmall Offline

loadComplete/onPaging solution does not seem to work with jqGrid 4.1.2.

Looking at the code, in case of 'datatype: json' (or xml and maybe others), no data is stored on the client side (in ts.p.data) unless 'loadonce: true' is specified. But if you specify 'loadonce: true', paging is disabled.

The 2 scenarios:

datatype: json, loadonce: false

  • paging works (serverside)
  • sorting does not work (after doing sort, grid is empty)

datatype: json, loadonce: true

  • paging is disabled
  • sorting works (clientside)

Erik

13/12/2011
09:29
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Try with gridComplete event instead of loadComplete

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

13/12/2011
16:38
Avatar
ericisko
Member
Members
Forum Posts: 5
Member Since:
17/09/2011
sp_UserOfflineSmall Offline

Hi,

Same thing happens with gridComplete.

When you click on sort column, it will eventually call populate(). populate() will call addLocalData() (since datatype is changed to 'local' in gridComplete). However, addLocalData() will return empty result set as ts.p.data is empty and subsequent call to addJSONData() will result in empty grid.

Even forcing population of ts.p.data in addJSONData() will not work - addLocalData() will change number of pages/records to that of ts.p.data array and that will disable paging - ts.p.data will have only one page of data as paging is on server side.

Erik

This topic is locked No permission to create posts
Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
42 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com, swathi

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information