jQuery EasyUI DataGrid - Using Virtual Scroll View to Display Large Amounts of Data
The virtual scrolling feature of the DataGrid can be used to display a large number of records without pagination. When scrolling the vertical scrollbar, the DataGrid performs an AJAX request to load and refresh the existing records. The entire refresh process is smooth without flickering. In this tutorial, we will create a DataGrid and apply the virtual scrolling feature to load data from the server.
Creating the DataGrid
To apply the virtual scrolling feature to the DataGrid, the 'view' property should be set to 'scrollview'. Users should download the scrollview extension from the DataGrid and reference the scrollview file in the page header.
<script type="text/javascript" src="https://www.tutorialpro.org/try/jeasyui/datagrid-detailview.js"></script>
<table id="tt" class="easyui-datagrid" style="width:700px;height:300px"
title="DataGrid - VirtualScrollView"
data-options="view:scrollview,rownumbers:true,singleSelect:true,
url:'datagrid27_getdata.php',autoRowHeight:false,pageSize:50">
<thead>
<tr>
<th field="inv" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</table>
Note that we do not need to use the pagination property, but the pageSize property is required. This way, when performing an AJAX request, the DataGrid will fetch the specified number of records from the server.
Server-Side Code
datagrid27_getdata.php
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 50;
$items = array();
date_default_timezone_set('UTC');
for($i=1; $i<=$rows; $i++){
$index = $i+($page-1)*$rows;
$amount = rand(50,100);
$price = rand(10000,20000)/100;
$items[] = array(
'inv' => sprintf("INV%04d",$index),
'date' => date('Y-m-d',time()+24*3600*$i),
'name' => 'Name' . $index,
'note' => 'Note' . $index,
'amount' => $amount,
'price' => sprintf('%01.2f',$price),
'cost' => sprintf('%01.2f',$amount*$price)
);
}
$result = array();
$result['total'] = 8000;
$result['rows'] = $items;
echo json_encode($result);