jQuery UI Widgets › Forums › Grid › Grid AJAX Paging
This topic contains 10 replies, has 2 voices, and was last updated by Nadezhda 9 years, 6 months ago.
-
AuthorGrid AJAX Paging Posts
-
Hi,ninjas!
I have a problem with my grid(ajax+paging).
This is my init:
ListInterface = { init: function(params, jsonData) { var url = JSON.stringify(jsonData); var source = { datatype: "json", pagesize: params['itemsCount'], datafields: [ { name: 'ID', type: 'int' }, { name: 'IteDbdDate', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'Modified', type: 'string' }, { name: 'ModerationStatus', type: 'int' } ], id: 'ID', localdata: url, pager: function (pagenum, pagesize, oldpagenum) { alert(1); // callback called when a page or page size is changed. } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxWidget_"+params['elementGuid']).jqxGrid( { width: 900, source: dataAdapter, selectionmode: 'multiplerowsextended', sortable: true, pageable: true, autoheight: true, columnsresize: true, filtermode: 'excel', pagermode: 'simple', columns: [ { text: 'Название', datafield: 'Title' , width: 150, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { return '<span class="ite-open-dialog" ><a>' + value + '</a></span>'; } }, { text: 'ИД', datafield: 'ID', width: 100, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { return '<span class="ite-protocol-id" >' + value + '</span>'; } }, { text: 'Дата', datafield: 'IteDbdDate', width: 150, cellsformat: 'D' }, { text: 'Изменен', datafield: 'Modified', width: 200 } ] }); $('#jqxWidget_' + params['elementGuid']).on('rowdoubleclick', function (event) { var args = event.args; // row's bound index. var boundIndex = args.rowindex; // row's visible index. var visibleIndex = args.visibleindex; // right click. var rightclick = args.rightclick; // original event. var ev = args.originalEvent; console.log($(this).find('div[id*= "row' + visibleIndex + '"]').find(".ite-protocol-id").text()); }); $('#jqxWidget_' + params['elementGuid']).on("pagechanged", function(event) { }); }
I getting data from Web Services in JSON. So if I select 1 item in request in the jqxgrid didnt active the next page.
I try set ‘totalrecords’ in source, but it didnt work.
Can u please help me found the right properties for count of page?
Thanks!
Hello Reksy,
Please, refer to the following forum topic which contains more information about total records count: http://www.jqwidgets.com/community/topic/total-record-count/. I hope it would be helpful to you.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thank you!
This example help me to understand : http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm
Hi,again, I faced with new question.
Where I should do ajax request(for new data) when paging in grid? In beforeprocessing or in ready function in data adapter or someone else?
Thanks!
Hi Reksy,
You may look at Server side paging demos(PHP Integration and ASP .NET MVC), where it is shown how to use ajax.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thank you! But where I can find it? (Shying-_-)
Hi Reksy,
Excuse me, I have missed to add links to our demos. Please, take a look at the following demo pages: PHP Integration and ASP .NET MVC. You can also refer to http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-paging.htm and http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-paging.htm.
I hope these resources are helpful to you.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thank you!
I looked this examples, but I didn find any example how to download grid data via Ajax for next/prev/last/first paging;
In my case I can get information only via ajax (not php or arp.net).
Right now my init looks like this
var source = { datatype: "json", pagesize: params['itemsCount'], datafields: [ { name: 'ID', type: 'int' }, { name: 'IteDbdDate', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'Modified', type: 'string' }, { name: 'ModerationStatus', type: 'int' } ], id: 'ID', localdata: obj, root: 'listData', cache: false, beforeprocessing: function(data) { if (data != null) { this.totalrecords = data[0].totalCount; } } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxWidget_"+params['elementGuid']).jqxGrid( { width: 602, source: dataAdapter, selectionmode: 'multiplerowsextended', sortable: true, pageable: true, autoheight: true, columnsresize: true, virtualmode: true, theme: "custom", rendergridrows: function (obj) { return obj.data; }, filtermode: 'excel', pagermode: 'simple', columns: [ { text: 'Название', datafield: 'Title', width: 150, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { return '<span class="ite-open-dialog" ><a>' + value + '</a></span>'; } }, { text: 'ИД', datafield: 'ID', width: 100, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { return '<span class="ite-protocol-id" >' + value + '</span>'; } }, { text: 'Дата', datafield: 'IteDbdDate', width: 150, cellsformat: 'D' }, { text: 'Изменен', datafield: 'Modified', width: 200 } ]
How i should update data?
Hope for your help!
Hi Reksy,
Could you, please, check if your code will work if you put ‘pagesize’ property in grid initialization code instead of source.
For paging in Virtual mode, take a look at the jqxGrid’s Virtual Data sample and the Server Paging samples in the PHP Integration demos.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi, again!
Yeap, it work with pagesize in grid.
And paging problems:
I cant put enpointurl in url parametr or process it on server side like http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-paging.htm because my response look like this:GetListData: function (webUrl, listTitle, fnSuccess, params) { var endpointUrl = webUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items?$skiptoken=Paged=TRUE&p_ID=" + (params['startItemId'] - 1) + '&$filter=OData__ModerationStatus eq ' + params['Status']+ ' &$top=' + params['itemsCount']; //var endpointUrl = webUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items?$filter=OData__ModerationStatus eq " + params['Status']; params['current'] = endpointUrl; return ListData.executeRequest(endpointUrl, 'GET',null,null, fnSuccess,params); }
Rest Api its web services, I can only sent ajax request like this.=((
Is there a way?
Hi Reksy,
If I understand you correctly, you need to add extra HTTP variable. Please, look at the following help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.