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
sp_Feed Topic RSS sp_TopicIcon
Client side table sorting, filtering but server side pagination
25/08/2014
08:55
Avatar
Mallia
New Member
Members
Forum Posts: 2
Member Since:
25/08/2014
sp_UserOfflineSmall Offline

I'm trying to build a table using jqgrid which does sorting and filtering on the clientside, i.e. use AJAX to retrieve a JSON object , and paging of the data with server interaction. Is this possible, if yes could you please help me on this?

If i use datatype:'json' with loadonce:false option then the server is responsible for sorting, paging and optionally searching/filtering of the data. In the case every request to the server contains important input parameters which default values are:page,rows,sidx and sord. There are other parameters _search, nd and some other, but there are not so important in your case.

If i user datatype: 'json' with loadonce:true option then client side filtering and sorting is working, but pagination interaction to the server is not working.

 

As per my requirement, i need to fetch the records from server based on the pagination and sorting with filtering on the client side.

 

Need help?

25/08/2014
17:44
Avatar
tony
Sofia, Bulgaria
Moderator
Members

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

Hello,

 

Use onPaging event to change the datatype. Do not forget to set it again to local in the gridComplete event.

 

See docs for these events.

 

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.

27/08/2014
08:36
Avatar
Mallia
New Member
Members
Forum Posts: 2
Member Since:
25/08/2014
sp_UserOfflineSmall Offline

Hi Tony,

 

Thanks for replying. Now pagination is working but client side filtering and refreshing in not working for me. Could you please help me on this,Here is my code for ur reference.

 

jQuery("#produtionordergrid").jqGrid(
            {
                
                datatype : "json",
                url : "/service/production/order/status",    
                colNames : ['Id', 'Model', 'Version', 'Purchaser', 'Project', 'PO', 'Quantity', 'Status'],
                colModel : [
                {
                    name : 'productionOrderId', index : 'productionOrderId',
                        formatter : function(cellvalue, options, rowObject) {
                        return rowObject["productionOrderId"];
                    }
                },
                {
                    name : 'productCode', index : 'productCode',
                    formatter : function(cellvalue, options, rowObject) {
                        return rowObject["productCode"];
                    }
                },
                {
                    name : 'version', index : 'version', width : 100
                },
                {
                    name : 'purchaserOrgName', index : 'purchaserOrgName',
                    formatter : function(cellvalue, options, rowObject) {
                        return rowObject["purchaserOrgName"];
                    }
                },
                {
                    name : 'projectName', index : 'projectName',
                    formatter : function(cellvalue, options, rowObject) {
                        return rowObject["projectName"];
                    }
                },
                {
                    name : 'po', index : 'po'
                },
                {
                    name : 'quantity', index : 'quantity',
                    formatter : function(cellvalue, options, rowObject) {
                        return rowObject["quantity"];
                    }
                },                
                {
                    name : 'productionOrderStatus',
                    index : 'productionOrderStatus'
                }
                ],
                shrinkToFit: true,
                height : '100%',
                autowidth:true,
                viewrecords: true,
                loadonce: false, 
                sortable: true,
                sortname: 'productionOrderId',
                pager: "#produtionorderpager",
                rowNum: 100,
                rowList: [100,200, 500],
                multiselect:true,
                //jsonReader: { repeatitems : false, id: "productionOrderId" },                
                ignoreCase: true,
                onSelectRow: function(id){
                    selectRow();
                },
                onSelectAll: function(aRowids, status){
                    selectRow();
                },
                onPaging: function () {
                    $("#produtionordergrid").setGridParam({datatype:"json"});
                },
                gridComplete: function(){                    
                    $("#produtionordergrid").setGridParam({datatype:"local"});
                }
            });
        
            $('#produtionordergrid').jqGrid('navGrid', '#produtionorderpager', {
                search: true, searchtext: "Search",  edit: false, add: false, del: false, refresh: true, refreshtext:"Refresh" },{}, {}, {},    {
                    beforeShowSearch: function($form) {
                        $('#searchmodfbox_produtionordergrid').width("auto");
                        return true;
                    },
                    showQuery: false, sopt: ['eq', 'ne', 'cn', 'nc', 'bw', 'ew'], defaultSearch: 'cn'           
            }).navButtonAdd('#produtionorderpager', {
                caption: "Export to Excel",
                buttonicon: "ui-icon-disk",
                onClickButton: function () {
                    exportProductionOrders('excel');
                }
            });

Thanks

Mallia

29/08/2014
10:39
Avatar
tony
Sofia, Bulgaria
Moderator
Members

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

Hello,

Humm - it seems that I tell you this is wrong way.

Try with

loadonce: true

and do not use

gridComplete to put the data type local - i.e disable this event.

The trick should be that if loadonce is true - it put automatically datatype local after loading the data.

The other code do not need to be changed.

Also it is a good idea to use key:true in one column of colModel.

 

Please let me know on the result. If this does not help I will try to prepare a example.

 

Kind 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.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
49 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

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

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information