Php remote database & virtual scrolling

[Rimokas]

Hi,

I'm newbie with ParamQuery.
I need a virtual scrolling of a big database set from php side database. I found this example : https://paramquery.com/demos/virtual_scroll .
After some changes ( adopt to mine needs ), I run this sample - but can't to see data in browser - attached image  - red square in the bottom , php return data, but I'm seeing "undefined" ...

Here is mine js :

Code: [Select]

<script>

    $(function () {
        var pqVS = {
            rpp: 100, //records per page.
            init: function () {
                this.totalRecords = 0;
                this.requestPage = 1; //begins from 1.
                this.data = [];
            }
        };
        pqVS.init();

        var obj = {
            scrollModel: {
                autoFit: true
            },
            numberCell: { width: 60 },
            title: "Virtual Scrolling",           
            resizable: true,
            filterModel: { header: true, type: 'remote', menuIcon: true },           
            sortModel: { type: 'remote', sorter: [{ dataIndx: 'company', dir: 'up'}] },
            beforeSort: function (evt) {
                if (evt.originalEvent) {//only if sorting done through header cell click.
                    pqVS.init();
                }
            },
            beforeFilter: function(){
                pqVS.init();
            },
            beforeTableView: function (evt, ui) {

                var initV = ui.initV,
                    finalV = ui.finalV,
                    data = pqVS.data,
                    rpp = pqVS.rpp,
                    requestPage;

                if (initV != null) {
                    if (data[initV] && data[initV].pq_empty) {
                        requestPage = Math.floor(initV / rpp) + 1;
                    }
                    else if (data[finalV] && data[finalV].pq_empty) {
                        requestPage = Math.floor(finalV / rpp) + 1;
                    }

                    if (requestPage >= 1) {
                        if (pqVS.requestPage != requestPage) {
                                                   
                            pqVS.requestPage = requestPage;

                            //initiate remote request.                       
                            this.refreshDataAndView();
                        }
                    }
                }
            }
        };
        obj.colModel = [
            { title: "Order ID", width: 100, dataIndx: "ord_id" },           
            { title: "Product Id", width: 190, dataIndx: "item_id" },
            { title: "Product Name", width: 250, dataIndx: "item_name" },
            { title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },           
            { title: "Order Date", width: 100, dataIndx: "ord_date"},
            { title: "Order Week", width: 100, dataIndx: "ord_week"},
            { title: "Return Date", width: 100, dataIndx: "ret_date" },
            { title: "Return Week", width: 100, dataIndx: "ret_week" },
            { title: "Fact Date", width: 100, dataIndx: "fact_date" },
            { title: "Fact Week", width: 100, dataIndx: "fact_week" },
        ];
       
        obj.dataModel = {
            dataType: "JSON",
            location: "remote",
            url: "remote.php",
            postData: function () {
                return {
                    pq_curpage: pqVS.requestPage,
                    pq_rpp: pqVS.rpp
                };
            },
            getData: function (response) {

                var data = response.data,
                    totalRecords = response.totalRecords,
                    len = data.length,
                    curPage = response.curPage,
                    pq_data = pqVS.data,
                    init = (curPage - 1) * pqVS.rpp;

                if (!pqVS.totalRecords) {                   
                    //first time initialize the rows.
                    for (var i = len; i < totalRecords; i++) {
                        pq_data[i + init] = { pq_empty: true };
                    }
                    pqVS.totalRecords = totalRecords;
                }
                for (var i = 0; i < len; i++) {
                    pq_data[i + init] = data[i];
                    pq_data[i + init].pq_empty = false;
                }
                return { data: pq_data }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //alert(errorThrown);
            }
        };

        $("#grid_infinite").pqGrid(obj);
    });

</script>   

That is mine first question ...

What I'm doing bad ?

[Rimokas]

As I can understand - problem is remote.php file ...
I used from Pro evoliution sample "php\database\remote.php" and here exist only "data" return.

Code: [Select]

    require_once '../conf.php';

    $dbh = getDatabaseHandle();
               
    $sql = "select orders.ord_id, orders.item_id,items.item_name_lt as item_name, orders.ord_qnt, orders.ord_date, orders.ord_week,
    orders.ret_date, orders.ret_week, orders.fact_date, orders.fact_week from orders
    left join items on items.item_id = orders.item_id and items.db = orders.db and items.item_type_id='prod'
    where orders.db = 'ut'";

    $stmt = $dbh->prepare($sql);
    $stmt->execute();
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo "{\"data\":". json_encode( $rows ) ." }";

Where I can get fully functional php sample - with posted args and with fully return ?

index js :

Code: [Select]

                var data = response.data,
                    totalRecords = response.totalRecords,
                    len = data.length,
                    curPage = response.curPage,
                    pq_data = pqVS.data,
                    init = (curPage - 1) * pqVS.rpp;

I must to return also "totalRecords", "response.curPage" as I can see ...
Please, can you share with fully working sample for php database ...

Thanks ...

[paramvir]

Remote PHP script is in this example: https://paramquery.com/pro/demos/paging

You may need to adapt it as per your requirements.

[Rimokas]

Wow ... It's now working fine! 

Thanks!