Virtual Paging problem

[hardcodeMember]

Hello,
Sometimes it takes a second person to know the error in your code even if you know what you are doing but may not find the error holding you back. Kindly take a look at this code and point out my error please.

Am trying to get virtual paging but it loads the first 20 records which is the page size and tells me 20 of 20 and gets stack at page 1. I know am doing something wrong but cannot really identify it. Please help me out with it. I need to get it done because am currently have 800 rows and grows at a speed of 150-200 rows per day. if i dont get it done… the client machines might draine out entire network bandwidth

Am using the latest widget 2.4.2.
I will be grateful

My php code:

<?php
require_once("conn.php");
$query = 'select SQL_CALC_FOUND_ROWS DATE_FORMAT(t.loadingDate, "%d/%c/%Y") as loadingDate, t.BRVNumber, t.OMC, t.loadingDepot, t.productLoaded, t.tripNumber, t.roadExpenses, t.kilometers, t.remark, DATE_FORMAT(t.returnDate,"%d/%c/%Y") as returnDate, t.topUp, t.meterLosses, t.customer, t.wayBillNumber, t.destination, t.quantityShipped,  t.whoFirstCreated, t.whoLastEdited, t.fuelQuantityGiven, t.BVO  
from trip t ';
$pagesize = $_GET['pagesize'];
$pagenum = $_GET['pagenum'];
$start = $pagesize * $pagenum;
$result = mysql_query('select * from trip',$connection);
$totalRows = mysql_num_rows($result);
if (isset($_GET['populate'])){
	  $query .=' order by t.sortTime desc LIMIT '. $start .','. $pagesize;
}
$result = mysql_query($query,$connection);
	   if($result){
			while($record = mysql_fetch_array($result,MYSQL_ASSOC)){
				$trip[] = array(
				'loadingDate' => trim($record['loadingDate']),
				'BRVNumber' => trim($record['BRVNumber']),
				'OMC' => trim(ucwords(strtolower($record['OMC']))),
				'loadingDepot' =>trim(ucwords(strtolower($record['loadingDepot']))),
				'productLoaded' =>trim(ucwords($record['productLoaded'])),
				'tripNumber' => trim($record['tripNumber']),
				'roadExpenses' => trim($record['roadExpenses']),
				'kilometers' => trim($record['kilometers']),
				'remark' => trim($record['remark']),
				'returnDate' => trim($record['returnDate']),
				'topUp' => trim($record['topUp']),
				'meterLosses' => trim($record['meterLosses']),
				'customer' => trim(ucwords(strtolower($record['customer']))),
				'wayBillNumber' => trim($record['wayBillNumber']),
				'destination' => trim(ucwords(strtolower($record['destination']))),
				'quantityShipped' =>trim($record['quantityShipped']),
				'whoFirstCreated' => trim(ucwords(strtolower($record['whoFirstCreated']))),
				'whoLastEdited' => trim(ucwords(strtolower($record['whoLastEdited']))),
				'fuelQuantityGiven' => trim($record['fuelQuantityGiven']),
				'BVO' => trim(ucwords(strtolower($record['BVO'])))
				);
			}
			
			$data[] = array(
				'TotalRows' => $totalRows,
				'Rows' => $trip
			);
			
			header("Content-type: application/json"); 
			echo json_encode($data);
		}
?>
My front end code
/*The grid begins here*/
		var url = "../php/grid.php?populate=true";
		var preserveSource;
       	var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'tripNumber' },
                    { name: 'BRVNumber'},
                    { name: 'loadingDate'},
                    { name: 'loadingDepot'},
                    { name: 'OMC'},
                    { name: 'productLoaded'},
		    { name: 'roadExpenses'},
		    { name: 'kilometers'},
		    { name: 'wayBillNumber'},
		    { name: 'customer'},
		    { name: 'destination'},
		    { name: 'quantityShipped', type: 'float'},
		    { name: 'remark'},
		    { name: 'returnDate'},
		    { name: 'topUp'},
		    { name: 'meterLosses'},
		    { name: 'whoFirstCreated'},
		    { name: 'whoLastEdited'},
		    { name: 'fuelQuantityGiven'},
		    { name: 'BVO'}
					
                ],
                id: 'wayBillNumber',
                url: url,
		root: 'Rows',
		beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                },
		cache: false
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
			
		var columnrenderer = function (value) {
                return '<div style="text-align: left; margin-top: 2px; margin-left:5px;">' + value + '</div>';
            }
			
            $("#tripGrid").jqxGrid(
            {
			  	width: '100%',
				autoheight: true,
                source: dataAdapter,
				sortable:true,
				editable: true,
				pageable: true,
				pagesize:20,
				altrows:true,
				pagesizeoptions:['20', '40', '60'],
				selectionmode: 'singlerow',
                columnsresize: true,
				columnsheight:50,
				virtualmode:true,
                theme: theme,
				rendergridrows: function(obj){
					return obj.data
				},
                columns: [
				  { text: 'BVO', dataField: 'BVO', width: 150, editable:false},
                  { text: 'Trip<br/>Number', columntype: 'textbox',dataField: 'tripNumber', width: 80,renderer: columnrenderer, editable:false},
				  { text: 'Waybill<br/>Number', dataField: 'wayBillNumber', width: 100, renderer: columnrenderer, editable:false,  columntype: 'textbox'},
                  { text: 'BRV<br/>Number', columntype: 'textbox', dataField: 'BRVNumber', width: 90, renderer: columnrenderer, editable:false},
                  { text: 'Loading<br/>Date',columntype:'datetimeinput', dataField: 'loadingDate', width: 85,renderer: columnrenderer, cellsformat:'dd/MM/yyyy', editable:false},
                  { text: 'Loading<br/>Depot', dataField: 'loadingDepot', width: 70,renderer: columnrenderer, editable:false},
                  { text: 'OMC', dataField: 'OMC', width: 100, editable:false},
                  { text: 'Product<br/>Loaded', dataField: 'productLoaded',width: 70,renderer: columnrenderer, editable:false},
				  { text: 'Kilometers', dataField: 'kilometers', width: 80, editable:false},
				  { text: 'Customer', dataField: 'customer', width: 120, editable:false},
				  { text: 'Destination', dataField: 'destination', width: 110, editable:false},
				  { text: 'Quantity', dataField: 'quantityShipped', width: 80, editable:false, cellsformat: 'f1'},
				  { text: 'Fuel<br/>Given', dataField: 'fuelQuantityGiven', width: 50,renderer: columnrenderer, editable:false, cellsformat: 'f1',},
				  { text: 'Road<br/>Exp', dataField: 'roadExpenses', width: 50, renderer: columnrenderer, editable:false},
				  { text: 'Return<br/>Date', columntype:'datetimeinput', dataField: 'returnDate', width: 85, renderer: columnrenderer, editable:true, cellsformat:'dd/MM/yyyy'},
				  { text: 'TopUp', dataField: 'topUp', width: 50, editable:true},
				  { text: 'Meter<br/>Losses', dataField: 'meterLosses', width: 55, renderer: columnrenderer, editable:true},
				  { text: 'Remarks', dataField: 'remark', width: 70, editable:true},
				  { text: 'Created By', dataField: 'whoFirstCreated', width: 100, editable:false},
				  { text: 'Last<br/>Edited By', dataField: 'whoLastEdited', width: 100,renderer: columnrenderer, editable:false}
                ]
            });
		/*grid ends*/
	

[Peter StoevKeymaster]

Hi hardcode,

For server paging, see this help topic: php-server-side-grid-paging.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hardcodeMember]

Hello,
I have been there and I have exactly what have been specified yet it does not work…
example is if you

rendergridrows: function(){
     return dataadapter.records;
}

the grid will never load but that is the example give. however if you use

rendergridrows: function(obj){
	return obj.data
}

the grid will load but load only the first page and stop…

[hardcodeMember]

Oh peter you left me to my faith but gladly I have found out why my virtual paging stuff was not working..
I want to share it with the world anyway.

Undoubtedly we all know by now that Jawidget grid uses ajax and by default all jquery ajax calls have async set to true.
The grid source object also have async property set to true. that is async:true

async: By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. When the binding is "asynchronous", the data binding operation occurs in parallel and the order of completion is not guaranteed.

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm

It means that everything on the page will fully be loaded to the client machine before the ajax call is completed but the grid must load with the whole page and by then the grid have processed all properties already before the ajax call is returned which should contain the TotalRows value in json.(sometimes they make it seems as if all these are processed in parallel). Since the grid have been processed it means that even if you set source.totalrecords = data[0].TotalRows; as shown the various examples it will not work and the source.totalrecords property will contain no value making your virtual paging not to function as in my case( but the grid will display only the first page which in this case will be the value of your pagesize property)

All I did was set the source object async property to false (async:false) and it worked. This can escape all of us because the various examples provided did not show all this in it. setting source object async property to false just tells javascript that please wait till ajax calls are returned before you continue interpreting the rest of the codes otherwise the codes will be processed before the ajax call is returned.

This is what I found out when I used firebug and other DOM developer tools from mozilla… but I might wrong as am expert and if there are any misinterpretations I hope I can be corrected by the moderator for future references

Thanks

[Author]

Posts