All components dhtmlxGrid Loading from big datasets Paginal Output:dynamic loading

Paginal Output:dynamic loading

dhtmlxGrid supports paginal output. You can use it together with dynamical loading or separately.
In the sample below number of rows per page is set to 30 and number of pages per group is set to auto (null) - based on rows in the first portion loaded from server

Autoloading delivers 300 more records each time when previous 300 ones were consumed. Number of total records is 2000.

</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Paginal Output:dynamic loading</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myGrid;
		function doOnLoad(){
			myGrid = new dhtmlXGridObject('gridbox');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.setHeader("Column A, Column B");
			myGrid.setInitWidths("100,*");
			myGrid.setColAlign("right,left");
			myGrid.setColTypes("ro,ed");
			myGrid.enablePaging(true,30,null,"pagingArea",true,"recinfoArea");
			myGrid.init();
			myGrid.setPagingSkin("bricks");
			myGrid.load("php/dynscroll.php");
		}
	</script>
</head>
<body onLoad="doOnLoad()">
	<h1>Paginal Output:dynamic loading</h1>
	<p>
		dhtmlxGrid supports paginal output. You can use it together with dynamical loading or separately.<br>
		In the sample below number of rows per page is set to 30 and number of pages per group is set to auto (null) - based on rows in the first portion loaded from server<br>
		<br>
		<strong>Autoloading</strong> delivers 300 more records each time when previous 300  ones were consumed. Number of total records is 2000.
	</p>
	<table width="600">
		<tr>
			<td id="recinfoArea"></td>
		</tr>
		<tr>
			<td>
				<div id="gridbox" style="width:100%; height:400px; background-color:white;overflow:hidden"></div>
			</td>
		</tr>
		<tr>
			<td id="pagingArea"></td>
		</tr>
	</table>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.