Author Topic: Virtual scrolling  (Read 4316 times)

Rimokas

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 32
    • View Profile
Virtual scrolling
« on: November 10, 2015, 05:37:09 pm »
Hi,

I'm newbie in this forum.

Can't to find info, how to do remote grid with virtual scrolling ( don't showing pager ).

Here it's mine sources :

Code: [Select]
   <script class="ppjs">
   
      $( function ()
      {
         var wdt = $( window ).width()  - 20;
         var hgt = $( window ).height() - 20;
         var colM =
         [
             { title: "Opr.NR",               width: 100, dataIndx: "op_nr"          },           
             { title: "Pavadinimas liet.",    width: 200, dataIndx: "pav_lt"         },
             ...
         ];
           
         var dataModel = {
             location: "remote",           
             dataType: "JSON",
             method  : "GET",
             url     : "opr_rem.php",
             getData : function( dataJSON )
             {               
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };               
             }
         }
         
         var grid1 = $( "div#grid_php" ).pqGrid(
         {
            width      : wdt,
            height     : hgt,
            dataModel  : dataModel,
            colModel   : colM,
            freezeCols : 1,
            pageModel  : { type: "remote", rPP: 500, strRpp: "{0}" },
            sortable   : false,
            wrap       : false, hwrap: false,   
            resizable  : false,
            scrollModel: { autoFit: true }
         });

Php file :
Code: [Select]

    require_once '../conf.php';
    $dbh = getDatabaseHandle();
   
    $cpg = $_REQUEST[ "pq_curpage" ];
    $rpp = $_REQUEST[ "pq_rpp"     ];
   
    $sql    = "Select count(*) from opr";
    $dsn    = 'mysql:host='.DB_HOSTNAME.';dbname='.DB_NAME;
    $optn   = array( PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8', );
    $dbh    = new PDO( $dsn, DB_USERNAME, DB_PASSWORD, $optn );
    $stmt   = $dbh->query( $sql );   
    $totRec = $stmt->fetchColumn();
    $skip   = ( $rpp * ( $cpg - 1 ) );

    if ( $skip >= $totRec )
    {       
        $cpg  = ceil( $totRec / $rpp );
        $skip = ( $rpp * ( $cpg - 1 ) );
    }
   
    $sql  = "select op_nr, pav_lt ...  from opr limit " . $skip . " , " . $rpp;
    $stmt = $dbh->query( $sql );   
    $rows = $stmt->fetchAll( PDO::FETCH_ASSOC );
    $sb   = "{ \"totalRecords\":" . $totRec . ",\"curPage\":" . $cpg . ",\"data\":" . json_encode( $rows ) . "}";
    echo $sb;


Grid is working fine, but with pager. How to do it without pager ? Or hide pager ?

Thanks in advance !

Rimokas

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 32
    • View Profile
Re: Virtual scrolling
« Reply #1 on: November 12, 2015, 01:15:59 pm »
Maybe it's very stupid question - no any comment ...  :o . But I'm newbie , so please , help ...   :-\

Or virtual scrolling is only for "Pro" version ?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Virtual scrolling
« Reply #2 on: November 13, 2015, 02:37:01 pm »
Your question makes sense and it's possible to fetch remote data ( big data ) with virtual scrolling without pager.

It's similar to the infinite scrolling demo and it can be implemented with help of beforeTableView event, dataModel.postData & dataModel.getData callbacks.

Currently this is the demo of virtual scrolling for Pro: http://paramquery.com/pro/demos/virtual_scroll
« Last Edit: November 13, 2015, 07:10:09 pm by paramquery »