Initial Pagenum and Pagesize

[rondcMember]

I am working with your examaple on Server-Side Paging with jQuery Grid, but having issue with pagenum and pagesize. I get an error from these variables. From your code: (from data.php)
// create the query.
$pagenum = $_GET[‘pagenum’];
$pagesize = $_GET[‘pagesize’];
$start = $pagenum * $pagesize;
$query = “SELECT SQL_CALC_FOUND_ROWS * FROM customers LIMIT $start, $pagesize”;

My question is where do I preset these values in order that the code maintains these values throughout for data pagination. Thanks.

[Peter StoevKeymaster]

Hi Ron,

The ‘pagesize’ and ‘pagenum’ variables are automatically sent to the server when you bind the Grid using a source object defined as below:

            var source =
            {
                datatype: "json",
                datafields: [
					 { name: 'CompanyName' },
					 { name: 'ContactName' },
					 { name: 'ContactTitle' },
					 { name: 'Address' },
					 { name: 'City' },
					 { name: 'Country' }
                ],
                url: 'data.php',
                root: 'Rows',
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                }
            };

The initial ‘pagesize’ is 10, the initial ‘pagenum’ is equal to 0. By default, you should not have to set these properties explicitly. If you need to do so, please send us a code which reproduces the error. You can also take a look at the updated ‘Server Side Paging’ topic here: jquery-grid-php-server-side-processing.htm. However, if you want to check whether a property is set or not, you can use a code like this:

if (isset($_GET['pagenum']))
{
}

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rondcMember]

Peter, thank you for that. I am using the exact same code from your Paging Using MySql and Php example. But nothing is displayed. I did verify via DEBUG that the arrays are being populated from the db but still nothing is displayed, just a blank page. I am at a loss, I do appreciate your help. Here’s my code:

[DATA.PHP] —————————————————————————————————–
$row[‘Student Name’],
‘ACT-SAT’ => $row[‘ACT-SAT’],
‘GPA’ => $row[‘GPA’],
‘TRANSFER GPA’ => $row[‘TRANSFER GPA’],
‘BIOL100’ => $row[‘BIOL100’],
‘HPED’ => $row[‘HPED’]
);
}
$data[] = array(
‘TotalRows’ => $total_rows,
‘Rows’ => $customers
);
echo json_encode($data);
?>

[NURSEDB.HTM] —————————————————————————————————–

$(document).ready(function () {
// prepare the data
var theme = ‘classic’;

var source =
{
datatype: “json”,
datafields: [
{ name: ‘Student Name’},
{ name: ‘ACT-SAT’},
{ name: ‘GPA’},
{ name: ‘TRANSFER GPA’},
{ name: ‘BIOL100’},
{ name: ‘HPED’}
],
url: ‘data.php’,
root: ‘Rows’,
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;
}
processdata: function(data)
{
data.pagesize = 25;
}
};

var dataadapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 600,
source: dataadapter,
theme: theme,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function()
{
return dataadapter.records;
},
columns: [
{ text: ‘Student Name’, datafield: ‘Student Name’, width: 250 },
{ text: ‘ACT-SAT’, datafield: ‘ACT-SAT’, width: 200 },
{ text: ‘GPA’, datafield: ‘GPA’, width: 200 },
{ text: ‘TRANSFER GPA’, datafield: ‘TRANSFER GPA’, width: 180 },
{ text: ‘BIOL100’, datafield: ‘BIOL100’, width: 100 },
{ text: ‘HPED’, datafield: ‘HPED’, width: 140 }
]
});
});

[Peter StoevKeymaster]

Hi Ron,

I noted that there’s a missing ‘,’ symbol in your source object’s initialization after the beforeprocessing function. This can lead to a blank page as its a syntax issue.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi Ron,

In addition to my previous post. To set the initial page size, you need to set the Grid’s pagesize property.

For example:

// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
	width: 600,
	source: dataadapter,
	theme: theme,
	autoheight: true,
	pageable: true,
	pagesize: 25,
	virtualmode: true,
	rendergridrows: function()
	{
		return dataadapter.records;
	},
	columns: 
	[
		{ text: 'Student Name', datafield: 'Student Name', width: 250 },
		{ text: 'ACT-SAT', datafield: 'ACT-SAT', width: 200 },
		{ text: 'GPA', datafield: 'GPA', width: 200 },
		{ text: 'TRANSFER GPA', datafield: 'TRANSFER GPA', width: 180 },
		{ text: 'BIOL100', datafield: 'BIOL100', width: 100 },
		{ text: 'HPED', datafield: 'HPED', width: 140 }
	]
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi Ron,

I hope that its working on your side now, after adding the ‘,’ symbol before the processdata function. If, not please tell let me know and I will prepare an online demo with the implementation.

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Piers MollerParticipant]

Hi Peter,
Even if you set the pagesize to 25, the pagesizeoptions drop-down still show the default value of 20.
Is that a bug?

Thanks.

[Peter StoevKeymaster]

Hi Piers Moller

No it is not. If it’s not part of the pagesizeoptions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[robinParticipant]

I am having this same issue. pagenum and pagesize isn’t getting sent by the grid. Instead of using index.html, I am using index.php so not sure if that is the problem.

[adminKeymaster]

Hi robin,

You may look at: https://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?light. The pagesize and pagenum are included in the data request.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts