jQuery UI Widgets Forums Grid Grid AJAX Paging

This topic contains 10 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Grid AJAX Paging #70150

    Reksy
    Participant

    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!

    Grid AJAX Paging #70154

    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Grid AJAX Paging #70166

    Reksy
    Participant
    Grid AJAX Paging #70189

    Reksy
    Participant

    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!

    • This reply was modified 9 years, 1 month ago by  Reksy.
    Grid AJAX Paging #70203

    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Grid AJAX Paging #70205

    Reksy
    Participant

    Thank you! But where I can find it? (Shying-_-)

    Grid AJAX Paging #70220

    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Grid AJAX Paging #70287

    Reksy
    Participant

    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!

    Grid AJAX Paging #70292

    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Grid AJAX Paging #70296

    Reksy
    Participant

    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?

    Grid AJAX Paging #70315

    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.