EasyUI Forum

Hi there,

I have a problem of slow rendering into datagrid. I have approximately 20.000 data to be shown in data grid. I would like to show the data 150 rows at a time, and when I go to 151 rows, it will load the data from the database again. I have taken look in example in datagrid virtual scrolling and I believe this will help me. But, when I tried the virtual scrolling, I have a problem. The datagrid will load all 20.000 data first and then display 150 rows into the grid. If it will still load all the data, the performance of the grid is more less the same. Anyone can point out the problem that I am having?

Here is the following code.

view:
        <table id="tt" style="width:700px;height:300px"
            title="DataGrid - VirtualScrollView"
            data-options="view:scrollview,rownumbers:true,singleSelect:true,
                url:'getdata.php',autoRowHeight:false,pageSize:150">
        <thead>
            <tr>
                <th field="ItemCode" width="80">Item Code</th>
                <th field="ItemDesc" width="100">Item Desc</th>
                <th field="unit" width="80">Unit</th>
            </tr>
        </thead>
    </table>

controller:
getdata.php

    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 150;
   
   
    $items = array();
    $result = $this->m_items->join_all();
   
    foreach($result as $row){
    $items[] = array(
           'ItemCode' => $row->ItemCode,
           'ItemDesc' => $row->ItemDesc,
           'unit' => $row->unit
       );
    }
    $output = array();
    $output['total'] = 8000;
    $output['rows'] = $items;
    echo json_encode($output);

Many Thanks before hand,

Regards,

Prawira

The virtual scrollview allows you to load data page by page. Please take a look at this statement:

You retrieve all the rows but you just need to return the current page rows. Please modify your php script to get better performance.

Hi Jarry,

I have modified my code in the model into the following

view:
        <table id="tt" style="width:700px;height:300px"
            title="DataGrid - VirtualScrollView"
            data-options="view:scrollview,rownumbers:true,singleSelect:true,
                url:'getdata.php',autoRowHeight:false,pageSize:150">
        <thead>
            <tr>
                <th field="ItemCode" width="80">Item Code</th>
                <th field="ItemDesc" width="100">Item Desc</th>
                <th field="unit" width="80">Unit</th>
            </tr>
        </thead>
    </table>

controller:
getdata.php

    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 150;
   
    $offset = ($page-1)*$rows;

   
    $items = array();
    $result = $this->m_items->join_all($offset, $rows);
   
    foreach($result as $row){
    $items[] = array(
           'ItemCode' => $row->ItemCode,
           'ItemDesc' => $row->ItemDesc,
           'unit' => $row->unit
       );
    }
    $output = array();
    $output['total'] = 8000;
    $output['rows'] = $items;
    echo json_encode($output);

model:
   
  function join_all($offset, $rows){
 
  $this->db->select('am_item.ItemCode, am_item.ItemDesc, am_item.unit');
  $this->db->from($this->table);
  $this->db->limit($rows, $offset);
  return $result;
 }

After I have modified my code as above, the query only returns the first 150 rows from the database. It seems that the $page and $rows from the scrollview does not get parse into the controller. Any one can point out what I have done wrong in the coding?

Regards,

Prawira

Hi there,

Any help for the problem? The problem that I am having at the moment is that the $page and $rows did not give me the updated value when I have scrolled enough to the page size limit. After I observe my code, the $page and $rows always give the same value.

Many Thanks

Regards,

Prawira

Please refer to this example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Virtual%20Scroll%20View

The rows and page parameters are sent to server when you scroll the grid.