Paging page size to show all records

[echerniParticipant]

Hi,

I’ve implemented a grid with server side paging and sorting as your on-line examples and it works fine. The pagesizeoptions setting has the default values 10, 20, 30. I was wondering, how can I add an “All” value to the pagesizeoptions so that the grid retrieves all rows?

Any ideas?

Thanks for your support!

E.

[DimitarParticipant]

Hello E.,

Only numeric values can be added to the pagesizeoptions. You may, however, be able to achieve this by creating a custom pager.

Best Regards,
Dimitar

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

[echerniParticipant]

Hello Dimitar,

Thanks for your help! I couldn’t achieve what I wanted with a custom pager. But, searching for other users posts I found a way using the following code:

// initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                //height: 300,
                autoheight: true,
                source: dataAdapter,
                theme: 'classic',
                columnsresize: true,
                filterable: true,
                //showfilterrow: true,
                //autoshowfiltericon: true,
                pageable: true,
                sortable: true,
                virtualmode: true,
                rendergridrows: function(obj)
                {
                      return obj.data;     
                },
                columns: [
                      { text: 'Fecha', datafield: 'f_evento', cellsformat: 'dd-MM-yyyy', width: '8%', align: 'center' },
                      { text: 'DNI', datafield: 'id_usu_s', width: '8%', align: 'center' }                     
                  ],
                ready: function () {
                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                    alert(rowscount);
                     $('#jqxgrid').jqxGrid({ pagesizeoptions: ['10', '20', rowscount]});
                }
            });

Using ready: function () I get the total records and update the pagesizeoptions.

This works well, but I notice that on the grid initialization or when page size is changed, three AJAX calls are made to the server. I guess there is something wrong. Any ideas on how to fix this?

Thanks again.

E.

[DimitarParticipant]

Hi E.,

This code is insufficient for us to determine why multiple calls are made. Please provide us with your source definition and data adapter, too.

Best Regards,
Dimitar

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

[echerniParticipant]

Hi Dimitar,

Sorry, here is the complete code for source and grid.

var source =
            {
                 datatype: "json",
                 datafields: [
		     { name: 'id', type: 'int'},
                     { name: 'f_evento', type: 'date', format: "yyyy-MM-dd"},
                     { name: 'id_usu_s', type: 'int'}                     
                ],
		id: 'id',
                url: "<?php echo $dirpath.'/qsystem/'; ?>ajax-calificaciones-staff.php",
		cache: false,
		data: {lang:"<?php echo $translate; ?>"},
                sortcolumn: 'f_evento',
                sortdirection: 'desc',
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
			var data = "insert=true&" + $.param(rowdata);
			$.ajax({
                            dataType: 'json',
                            url: "<?php echo $dirpath.'/qsystem/'; ?>ajax-calificaciones-staff.php",
                            data: data,
			    cache: false,
                            success: function (data, status, xhr) {
				// insert command is executed.
				commit(true, data);
                                $('#jqxgrid').jqxGrid('updatebounddata');
			    },
			    error: function(jqXHR, textStatus, errorThrown)
				{
					commit(false);
				}
			    });							
			    },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
            		   var data = "delete=true&" + $.param({id: rowid});
		           $.ajax({
                            dataType: 'json',
                            url: "<?php echo $dirpath.'/qsystem/'; ?>ajax-calificaciones-staff.php",
			    cache: false,
                            data: data,
                            success: function (data, status, xhr) {
				// delete command is executed.
				commit(true);
                               $('#jqxgrid').jqxGrid('updatebounddata');
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}
				});							
	        },
                updaterow: function (rowid, rowdata, commit) {
			   // synchronize with the server - send update command
            		   var data = "update=true&" + $.param(rowdata);
                           data = data + "&id=" + rowid;
			    $.ajax({
                            dataType: 'json',
                            url: "<?php echo $dirpath.'/qsystem/'; ?>ajax-calificaciones-staff.php",
			    //cache: false,
                            type: 'POST',
                            data: data,
                            success: function (data, status, xhr) {
				// update command is executed.
				commit(true);
                              $('#jqxgrid').jqxGrid('updatebounddata');
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}							
			    });		
                },
                root: 'Rows',
                beforeprocessing: function(data)
                {       
                    if (data != null)
                    {
                        source.totalrecords = data[0].TotalRows;
                    }
                },
                filter: function()
                {
                    // update the grid and send a request to the server.
                    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                },
                sort: function()
                {
                    // update the grid and send a request to the server.
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                }
            };

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

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                //height: 300,
                autoheight: true,
                source: dataAdapter,
                theme: 'classic',
                columnsresize: true,
                filterable: true,
                //showfilterrow: true,
                //autoshowfiltericon: true,
                pageable: true,                
                sortable: true,
                virtualmode: true,
                rendergridrows: function(obj)
                {
                      return obj.data;     
                },
                columns: [
                      { text: 'Fecha', datafield: 'f_evento', cellsformat: 'dd-MM-yyyy', width: '8%', align: 'center' },
                      { text: 'DNI', datafield: 'id_usu_s', width: '8%', align: 'center' }                      
                  ],
                ready: function () {
                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;                   
                     $('#jqxgrid').jqxGrid({ pagesizeoptions: ['10', '20', rowscount]});
                }
            });

Hope this helps. The idea behind all this is to get the total number of rows before the grid is initialized. Then use that value as a page size option so a user can display all rows on the grid.

Thanks once again!

E.

[DimitarParticipant]

Hi E.,

The multiple calls occur because you are using virtual mode and that means each time the grid is re-rendered (such as when the pagesizeoptions are changed), the rendergridrows callback function will be invoked, resulting in a server call. Thus, this is not an erroneous behaviour but is due to the specific implementation.

Best Regards,
Dimitar

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

[Author]

Posts