Pagination in grid with out remote computing

[r.selvaganapathi]

hi all,
I want to make the grid with pagination .But the pagination should be handled in client side.
For example I have 40 records.20 records only are showed at a time.When i press the pagination
button,it should go to the next page with out server side computing..First time it self I want to load all
the datas.But I want to restrict the datas according to pagination..Is it possible?

[Animal]

What's the point? Why not just scroll?

[trbs]

this has been covered in several other threads on the forum, search for PagingMemoryGrid

[gricceri]

hi all,
I want to make the grid with pagination .But the pagination should be handled in client side.
For example I have 40 records.20 records only are showed at a time.When i press the pagination
button,it should go to the next page with out server side computing..First time it self I want to load all
the datas.But I want to restrict the datas according to pagination..Is it possible?

Hi, I'm not sure if this is the best way to address this issue, anyway I post it.

I wrote a PagedStore class that extend the Store class and override the original loadRecords method. I slightly modified it to trim the records array.
Anyway this method doesn't work with sort.
Another way could be ( even if I'm not sure about performance), load all the this.data collection, apply sort, get the records array with this.data.getRange, clear the data and reload it ( very dirty ).

Ext.data.PagedStore = function(config){
		
		Ext.data.PagedStore.superclass.constructor.call(this, config);   
};



Ext.extend(Ext.data.PagedStore, Ext.data.Store, {
	
	loadRecords : function(o, options, success){
       
	if(!o || success === false){
            if(success !== false){
                this.fireEvent("load", this, [], options);
            }
            if(options.callback){
                options.callback.call(options.scope || this, [], options, false);
            }
            return;
        }
				
	options.params = options.params || {};				
				
	var r = o.records;
	if(typeof options.params.start != "undefined" && typeof options.params.limit != "undefined" ) {
	   r = r.slice (options.params.start, options.params.start+options.params.limit)
	}
				
        var t = o.totalRecords || r.length;
        for(var i = 0, len = r.length; i < len; i++){
            r[i].join(this);
        }
				
        if(!options || options.add !== true){
            this.data.clear();
            this.data.addAll(r);
            this.totalLength = t;
            this.applySort();
            this.fireEvent("datachanged", this);
        }else{
            this.totalLength = Math.max(t, this.data.length+r.length);
            this.data.addAll(r);
        }
        this.fireEvent("load", this, r, options);
        if(options.callback){
            options.callback.call(options.scope || this, r, options, true);
        }
    }
	
});

[gricceri]

This works with sorting too:

Ext.data.PagedStore = function(config){		
		Ext.data.PagedStore.superclass.constructor.call(this, config);   
		this.allData = this.data.clone();
};

Ext.extend(Ext.data.PagedStore, Ext.data.Store, {
	
	loadRecords : function(o, options, success){
       
				if(!o || success === false){
            if(success !== false){
                this.fireEvent("load", this, [], options);
            }
            if(options.callback){
                options.callback.call(options.scope || this, [], options, false);
            }
            return;
        }
				
				options.params = options.params || {};				
				
				var r = o.records;							
        var t = o.totalRecords || r.length;  
                
				this.backParams	=	options.params;	      
        
        for(var i = 0, len = r.length; i < len; i++){
            r[i].join(this);
        }
        
        this.allData.clear();
				this.allData.addAll(r);
				
        if(!options || options.add !== true){
            this.applySort();     
            this.totalLength = t;
            this.fireEvent("datachanged", this);
        }else{
            this.totalLength = Math.max(t, this.data.length+r.length);
            this.data.addAll(r);
        }
        this.fireEvent("load", this, r, options);
        if(options.callback){
            options.callback.call(options.scope || this, r, options, true);
        }
    },
    
    trimRecords: function(data, params){
			if(typeof params.start != "undefined" && typeof params.limit != "undefined" ) {										
				r = data.getRange ( params.start, params.start+params.limit );							
			}			
			return r;
    },
    
    applySort : function(){			
			
			if(this.sortInfo && !this.remoteSort){
				var s = this.sortInfo, f = s.field;
				var st = this.fields.get(f).sortType;
				var fn = function(r1, r2){
						var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
						return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
				};        						
								
				this.allData.sort(s.direction, fn)				
				var r = this.trimRecords ( this.allData, this.backParams );
				this.data.clear();
				this.data.addAll(r);
								
				if(this.snapshot && this.snapshot != this.data){
						this.snapshot.sort(s.direction, fn);
				}
			} else {				
				var r = this.trimRecords ( this.allData, this.backParams );
				this.data.clear();
				this.data.addAll(r);				
			}
		} 
	
});

[kavi]

hi,
I have a grid with pagination, where pagination works fine, but the data is not getting sorted properly. I want the entire data to be sorted, but in my grid the data which is displayed in each page is only getting sorted... Is it possible to sort the entire data, at the client side before displaying it in the paging grid?

Thanks

[mjlecomte]

hi,
I have a grid with pagination, where pagination works fine, but the data is not getting sorted properly. I want the entire data to be sorted, but in my grid the data which is displayed in each page is only getting sorted... Is it possible to sort the entire data, at the client side before displaying it in the paging grid?

Thanks

Do you realize you are posting in an old version of ext forum?

Check the FAQ on grids in my signature for your question. Basically, while you are paging the grid only has that page worth of data that it knows about. If you want to use paging and sort based on all data you need remoteSort: true and then the sorting is up to you to handle server side. That is the more 'common' way it is done. You can also use paging memory proxy extension to do more client side. you did not post your code, so I don't know which one you are trying to do.