jQWidgets Forums

jQuery UI Widgets › Forums › Grid › server side paging – virtual mode

Tagged: 

This topic contains 2 replies, has 3 voices, and was last updated by  supun151515 9 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    server side paging – virtual mode Posts
  • January 12, 2015 at 9:13 pm server side paging – virtual mode #65281

    elbnacht
    Participant

    Can’t see data using the virtual mode. I see all data coming along – seems no problem.
    If I turn off “virtual mode”, than it works, but I don’t get next pages. 

    
<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.metrodark.css" type="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="jquery-validation/dist/jquery.validate.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/messages_de.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/methods_de.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>	
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcalendar.js"></script>
	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.rangeselector.js"></script>
	<style>
		.jqx-notification-container { z-index:9999; }
		.two_column:after {
			display: table;
			content: "";
			clear: both;
		}
		.two_column:before {
			display: table;
			content: "";
		}
		.grid {
			margin-right: 15em
		}
		.chart {
			width: 12em;
		}

	</style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'metrodark';

			// Create a jqxMenu
			$("#jqxMenu").jqxMenu({ width: '120', height: '600', mode: 'vertical', theme: theme});

            $("#jqxMessage").jqxNotification({
                width: 250, position: "top-right", opacity: 0.7,
                autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 20000});

			var getLocalization = function () {
				var localizationobj = {};
				localizationobj.percentSymbol = " %";
				localizationobj.currencySymbol = " €";
				localizationobj.currencySymbolPosition = "after";
				localizationobj.decimalSeparator = ",";
				localizationobj.thousandsSeparator = ".";
				patterns: {d: "d.M.yyyy"}
				return localizationobj;
			}

            var getAdapter = function () {
            // prepare the data
            var data = {};
            var source =
            {
                datatype: "json",
                datafields: [
					 { name: 'Datum', type: 'date'},
					 { name: 'Betrag', type: 'float' }
                ],
                id: 'Datum',
                url: 'entwicklung_connect_01.php',
                root: 'Rows',
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                },
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    var data = "update=true&Datum=" + rowdata.Datum.toISOString() + "&Betrag=" + rowdata.Betrag;
                    $.ajax({
                        dataType: 'json',
                        url: 'entwicklung_connect_01.php',
                        data: data,
						error: function(error_msg){
							$("#jqxMessage").jqxNotification({template: "info"});					
							$("#jqxMessageContent").html(error_msg);
							$("#jqxMessage").jqxNotification("open");
						},
						success: function(success_msg){
							$("#jqxMessage").jqxNotification({template: "error"});					
							$("#jqxMessageContent").html(success_msg);
							$("#jqxMessage").jqxNotification("open");
						}
                    });
                },
                addrow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send add command
                    var data = "add=true";
                    $.ajax({
                        dataType: 'json',
                        url: 'entwicklung_connect_01.php',
                        data: data,
						error: function(error_msg){
							$("#jqxMessage").jqxNotification({template: "info"});					
							$("#jqxMessageContent").html(error_msg);
							$("#jqxMessage").jqxNotification("open");
						},
						success: function(success_msg){
							$("#jqxMessage").jqxNotification({template: "error"});					
							$("#jqxMessageContent").html(success_msg);
							$("#jqxMessage").jqxNotification("open");
						}
                    });
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    var data = "delete=true&Datum=" + rowdata.Datum.toISOString() + "&Betrag=" + rowdata.Betrag;
                    $.ajax({
                        dataType: 'json',
                        url: 'entwicklung_connect_01.php',
                        data: data,
						error: function(error_msg){
							$("#jqxMessage").jqxNotification({template: "info"});					
							$("#jqxMessageContent").html(error_msg);
							$("#jqxMessage").jqxNotification("open");
						},
						success: function(success_msg){
							$("#jqxMessage").jqxNotification({template: "error"});					
							$("#jqxMessageContent").html(success_msg);
							$("#jqxMessage").jqxNotification("open");
						}
                    });
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
			return dataAdapter;
			}

            // initialize jqxGrid
            $("#jqxGrid").jqxGrid( {
                width: 400,
                selectionmode: 'singlecell',
                source: getAdapter(),
                theme: theme,
                editable: true,
                autoheight: true,
				localization: getLocalization(),
                pageable: true,
				pagermode: 'simple',
                pagerButtonsCount: 5,
				pagesize: 20,
                virtualmode: true,
				rendergridrows: function () {
                    return getAdapter().records;
                },
				showstatusbar: true,
				renderstatusbar: function (statusbar) {
				// appends buttons to the status bar.
				var container = $("<div style='overflow: hidden; position: relative; margin: 3px;'></div>");
				var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
				var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
				var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
				var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
				container.append(addButton);
				container.append(deleteButton);
				container.append(reloadButton);
				container.append(searchButton);
				statusbar.append(container);
				addButton.jqxButton({  width: 60, height: 20, theme: theme });
				deleteButton.jqxButton({  width: 65, height: 20, theme: theme });
				reloadButton.jqxButton({  width: 65, height: 20, theme: theme });
				searchButton.jqxButton({  width: 50, height: 20, theme: theme });
				// add new row.
				addButton.click(function (event) {
					$('#jqxGrid').jqxGrid('addrow', null, {});
					$("#jqxGrid").jqxGrid({ source: getAdapter() });
				});
				// delete selected row.
				deleteButton.click(function (event) {
					var selectedrowindex = $("#jqxGrid").jqxGrid('getselectedrowindex');
					var rowscount = $("#jqxGrid").jqxGrid('getdatainformation').rowscount;
					var id = $("#jqxGrid").jqxGrid('getrowid', selectedrowindex);
					$("#jqxGrid").jqxGrid('deleterow', id);
				});
				// reload grid data.
				reloadButton.click(function (event) {
					$("#jqxGrid").jqxGrid({ source: getAdapter() });
				});
				// search for a record.
				searchButton.click(function (event) {
					var offset = $("#jqxGrid").offset();
				});
				},
                columns: [
                      { text: 'Datum', editable: false, datafield: 'Datum', width: 200, cellsAlign: 'center', cellsFormat: 'dd.MM.yyyy' },
                      { text: 'Betrag', datafield: 'Betrag', width: 200, cellsAlign: 'right', cellsFormat: 'c2' }
                  ]
            });

			var sourceChart =
               {
                   datatype: "json",
                   datafields: [
                        { name: 'Datum' },
                        { name: 'Betrag' }
                    ],
                   url: 'entwicklung_werte.php'
               };

			var dataAdapterChart = new $.jqx.dataAdapter(
                	sourceChart, { async: false, autoBind: true, loadError: function (xhr, status, error) { 
						alert('Error loading "' + source.url + '" : ' + error); } 
					});

			var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
			
			var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
				var dataItem = dataAdapter.records[itemIndex];
				return '<div style="text-align:left"><b>Datum: ' + categoryValue.getDate() + '.' + months[categoryValue.getMonth()] + '.' + categoryValue.getFullYear() + '</b><br/>TSI-Wert: ' + dataItem.tsi_wert + '</div>';
			};
            
			// prepare jqxChart settings
			var settings = {
				title: "Gesamtansicht",
				borderLineWidth: 1,
				showBorderLine: true,
				enableAnimations: true,
				enableCrosshairs: true,
				showLegend: true,
				animationDuration: 500,
				padding: { left: 5, top: 5, right: 10, bottom: 5 },
				titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
				source: dataAdapterChart,
				xAxis: {
					dataField: 'Datum',
					type: 'date',
					baseUnit: 'day',
					minValue: new Date(2014, 0, 1),
					maxValue: new Date(2014, 11, 31),
					textRotationAngle: -45,
					formatFunction: function (value) {
						return value.getDate() + '.' + months[value.getMonth()] + '.' + value.getFullYear().toString().substring(2);
					},
					showGridLines: true,
					rangeSelector: {
						size: 80,
						padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
//						minValue: new Date(2014, 0, 1),
						backgroundColor: 'grey',
						baseUnit: 'month',
						formatFunction: function (value) {
							return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
						}
					},
				},
				colorScheme: 'scheme01',
				seriesGroups:[{
					type: 'spline',
					toolTipFormatFunction: toolTipCustomFormatFn,
					valueAxis: {
						unitInterval: 10000,
						minValue: 0,
						maxValue: 120000,
						displayValueAxis: true,
						description: 'Gesamtbetrag'
					},
					series: [
						{ dataField: 'Betrag', displayText: "Betrag"}
						]
					}]
			};
            // setup the chart
            $('#jqxChart').jqxChart(settings);
            
        });
    </script>
</head>
<body class='default' style='background: #222222'>

	<div id='jqxMenu' style='float: left'>
		<?php include("navigation.html"); ?>
	</div>
	<div id='jqxMessage'>
		<div id='jqxMessageContent'>
		</div>	
	</div>
	<div id='jqxGrid' class='two_column grid'>
	</div>
	<div id='jqxChart' class='two_column chart' style='width:850px; height:500px; margin-left: 125px'>
	</div>

</body>
</html>

    Any suggestions?

    January 13, 2015 at 6:43 am server side paging – virtual mode #65292

    Peter Stoev
    Keymaster

    Hi elbnacht,

    For Server Paging, there are things which should be done on the client side and things which are required on the server side. On the server side, you should take into account the params sent by jqxGrid like pagenum, pagesize and return appropriate data. This is all demonstrated in this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?arctic

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    December 13, 2015 at 11:02 am server side paging – virtual mode #79239

    supun151515
    Participant

    Hi Peter,
    Can you post serverpaging_data.php code for the above demo?

    Thank You,
    Supun

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.