Hi,
Can't understand what I'm missing ...
Did grid with remote virtual scrolling - it works very fine. Almost identical to this sample :
https://paramquery.com/demos/virtual_scroll Now added filtering. If to fill value for filtering, I'm seeing that all is working - it return from php data.
But ... the view in datagrid changes for returned lines ( let say that return 17 lines, grid conteiner is in full widtht/height ) and leaves old lines after new data lines ...
If to click for sorting, then renew data and then it view correct ...
What is bad ?
Mine js :
for ( var u in kortos )
{
var grd_id = kortos[ u ].grido_id // grido ID
var pqVS =
{
rpp: ( kortos[ u ].limitas * 1 ),
init: function ()
{
this.totalRecords = 0;
this.requestPage = 1;
this.data = [];
}
}
pqVS.init()
var grd_obj =
{
width : '98%',
height : '96%',
virtualX : true,
virtualY : true,
resizable : true,
reactive : true,
scrollModel : { autoFit: false },
flex : { one: true },
numberCell : { show: false },
showHeader : true,
columnBorders : true,
rowBorders : true,
selectionModel : { type: 'cell' },
stripeRows : true,
sortable : true,
sortModel : { type: 'remote', single: false, sorter: [], space: true, multiKey: null },
beforeSort : function( evt ){ if ( evt.originalEvent ){ pqVS.init(); } },
filterModel : { type: 'remote', on: true, header: true },
beforeTableView: function( evt, ui )
{
var initV = ui.initV,
finalV = ui.finalV,
data = pqVS.data,
rpp = pqVS.rpp,
tot = pqVS.totalRecords,
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;
this.refreshDataAndView();
}
}
}
}
}
grd_obj.colModel = gridai[ grd_id ].grido_conf.columns
grd_obj.dataModel =
{
dataType : "JSON",
location : "remote",
url : 'phpf/prg_crud.php',
recIndx : 'irs_id',
postData : function()
{
var pst = {}
pst[ "pq_curpage" ] = pqVS.requestPage
pst[ "pq_rpp" ] = pqVS.rpp
pst[ "cmd" ] = 'get'
pst[ "pnk" ] = pusl_prm
pst[ "grd" ] = grd_id
return pst;
},
getData : function( response )
{
if ( response.status !== 'error' )
{
var data = response.data,
totalRecords = response.totalRecords,
curPage = response.curPage,
len = data.length,
pq_data = pqVS.data,
init = ( curPage - 1 ) * pqVS.rpp;
if ( !pqVS.totalRecords )
{
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 }
}
else
setTimeout( () => { walert( response.message, 'php' ) }, 100 )
},
error: function( jqXHR, textStatus, errorThrown )
{
//alert(errorThrown);
}
}
$( "#konteineris" ).pqGrid( grd_obj );
}
grids columns ( from dev console - columns created in php side ) :
0:
align: "left"
columnDrag: true
dataIndx: "ord_id"
filter: {crules: Array(1), listeners: Array(1)}
hidden: false
resizable: true
sortable: true
title: "Užsakymo ID"
width: "127"
[[Prototype]]: Object
1: {dataIndx: 'item_id', title: 'Modelis', width: '127', hidden: false, columnDrag: true, …}
2: {dataIndx: 'prekes_pvd', title: 'Pavadinimas', width: '127', hidden: false, columnDrag: true, …}
3: {dataIndx: 'ord_model', title: 'Nav modelis', width: '100', hidden: false, columnDrag: true, …}
4: {dataIndx: 'ord_qnt', title: 'Kiekis', width: '62', hidden: false, columnDrag: true, …}
5: {dataIndx: 'ord_color', title: 'Spalva', width: '65', hidden: false, columnDrag: true, …}
6: {dataIndx: 'ord_date', title: 'Užsak.data', width: '93', hidden: false, columnDrag: true, …}
7: {dataIndx: 'ord_week', title: 'Užsak.sav.', width: '90', hidden: false, columnDrag: true, …}
8: {dataIndx: 'ret_date', title: 'Graž.data', width: '80', hidden: false, columnDrag: true, …}
9: {dataIndx: 'ret_week', title: 'Grąž.sav.', width: '90', hidden: false, columnDrag: true, …}
10: {dataIndx: 'fact_date', title: 'Fakt.data', width: '99', hidden: false, columnDrag: true, …}
11: {dataIndx: 'fact_week', title: 'Fakt.sav.', width: '90', hidden: false, columnDrag: true, …}
12: {dataIndx: 'mint_fact', title: 'Minut.', width: '100', hidden: false, columnDrag: true, …}
13: {dataIndx: 'sew_sum', title: 'Suma', width: '100', hidden: false, columnDrag: true, …}
Thanks in advance ...
