Paging problem

[imbaroMember]

the page size is 100.

in every page i want to return only 100 rows (no cache).

the situation now is that for the second page i need to return 200 rows, so it shows the 101-200 rows.
in the third page i need to return 300 rows, so it shows the 201-300 rows.

i don’t want to work like this, i want to return only 100 rows for each page.

what do i need to do?

thanks, ofer.

[Peter StoevKeymaster]

Hi imbaro,

You need to return for the second page rows from 101 to 200, for the third page 201 to 300. See this sample: virtualdata.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[imbaroMember]

i saw this and the php paging server and they didn’t work.

here is my example that showes it…

lala

#grid3
{
font-size: 10pt;
height: 300px;
width:100%;
}

html, body
{
width: 98%;
height: 98%;
margin: 0 1%;
padding: 10px 0 0 0;
}

$(document).ready(function () {

var TH_DP_ID =
[
123,765,234,86,798,3456,3456,345,6,3,45,8,867,09,8,27,643,25,2,54,67,58,47
];

var TH_SUB_DP_ID =
[
63,2,5,6,8,4,1,53,5,34,75,86,,367,346,686,278723,5,74,56235,85,54567,2,358568,243
];

var TH_LAST_UPDATE_ROLE =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var OA_SUB_TYPE =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];

var generatedata = function (startindex, endindex) {
var data = {};

for (var i = startindex; i < endindex; i++) {
var row = {};

row["TH_OBJECT_ID"] = i;
row["TH_DP_ID"] = TH_DP_ID[Math.floor(Math.random() * TH_DP_ID.length)];
row["TH_SUB_DP_ID"] = TH_SUB_DP_ID[Math.floor(Math.random() * TH_SUB_DP_ID.length)];
row["TH_LAST_UPDATE_ROLE"] = TH_LAST_UPDATE_ROLE[Math.floor(Math.random() * TH_LAST_UPDATE_ROLE.length)];
row["OA_SUB_TYPE"] = OA_SUB_TYPE[Math.floor(Math.random() * OA_SUB_TYPE.length)];;

data[i] = row;
}
return data;
}

var ws = new WebSocket("ws://tirawin2012/remotedeltapoc/RemoteService.svc");
var startLoad;
var blnIsDelta;

ws.onopen = function () {
startLoad = $.now();
ws.send("{\"take\":100,\"skip\":0,\"page\":1,\"pageSize\":100}");
}

ws.onclose = function () {
wsStarted = false;
}

ws.onerror = function (e) {
alert(e.data);
}

var theme = getDemoTheme();

var columns = [
{ text: 'code', dataField: 'TH_OBJECT_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'dpid', dataField: 'TH_DP_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'subdp', dataField: 'TH_SUB_DP_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'updater', dataField: 'TH_LAST_UPDATE_ROLE', width: 200, align: 'right', cellsalign: 'right' },
{ text: 'subkind', dataField: 'OA_SUB_TYPE', align: 'right', cellsalign: 'right', minwidth: 200 },
];

var MySource =
{
datatype :'array',
async: false,
cache: false,
Root: "rows",
totalrecords: 0,
localdata: {}
};

var dataadapter = new $.jqx.dataAdapter(MySource);

var blnIsFirstTime = true;
var blnIsSentRequest = false;
var intStart = 0;
var intEnd = 100;

var rendergridrows = function (params) {

intStart = params.startindex;
intEnd = params.endindex;

var pageSize = params.endindex – params.startindex;

if (blnIsFirstTime) {
blnIsFirstTime = false;
}
else {
if (!blnIsSentRequest) {
ws.send("{\"take\":" + pageSize + ",\"skip\":" + (intStart + 1) + ",\"page\":" + ((intStart) / pageSize) + ",\"pageSize\":" + pageSize + "}");
blnIsSentRequest = true;
blnIsFirstTime = true;
}
else {
blnIsSentRequest = false
}
}
return dataadapter.records;
}

$("#grid3").jqxGrid(
{
source: dataadapter,
theme: theme,
virtualmode: true,
pageable: true,
rendergridrows: rendergridrows,
pagesizeoptions: [10,50,100],
pagesize: 100,
columns: columns,
cache: false,
loadonce:false,
});

ws.onmessage = function (e) {

var data = generatedata(intStart, intEnd);

MySource.totalrecords = evalData.TotalAmount;
MySource.localdata = data;

dataadapter.setSource(MySource);

$("#grid3").jqxGrid('updatebounddata');
}

});

[Peter StoevKeymaster]

Hi imbaro,

In the code below, please take a look at the rendergridrows implementation. On every page change, the function is called by jqxGrid. It has 2 params, start index and end index. The startindex is the index of the first row to be rendered. The endindex is the index of the last row to be rendered. For page 1, the start index is 0, the end index is 10, for page 2 the start index is 10, the end index is 20. For page 1 is returned an Array with indexes

i = 0 ...... < 10

, for page 2 is returned an Array with indexes

i = 10 ..... < 20.

.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            // generate sample data.
            var generatedata = function (startindex, endindex) {
                var data = {};
                for (var i = startindex; i < endindex; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["id"] = i;
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                return data;
            }
            var source =
            {
                datatype: "array",
                localdata: {},
                totalrecords: 1000000
            };
            // load virtual data.
            var rendergridrows = function (params) {
                var data = generatedata(params.startindex, params.endindex);
                return data;
            }
            var totalcolumnrenderer = function (row, column, cellvalue) {
                var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                autoheight: true,
                source: dataAdapter,
                theme: theme,
                virtualmode: true,
                pageable: true,
                rendergridrows: rendergridrows,
                columns: [
                    { text: 'Id', datafield: 'id', width: 50 },
                    { text: 'First Name', datafield: 'firstname', width: 100 },
                    { text: 'Last Name', datafield: 'lastname', width: 100 },
                    { text: 'Product', datafield: 'productname', width: 180 },
                    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                    { text: 'Unit Price', datafield: 'price', width: 70, cellsalign: 'right', cellsformat: 'c2' },
                    { text: 'Total', datafield: 'total', cellsrenderer: totalcolumnrenderer, width: 100, cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[imbaroMember]

I saw the ‘virtualdata’ example many many, many times.

the problem that i have, is because I use WebSocket,
i want to update the grid when the web socket message is arrived.

in my example, i do exactly(!!!) the same thing in the sarver paging example.
but it doesn’t work, how can it be?

thanks, ofer.

[Peter StoevKeymaster]

Hi imbaro,

In the server paging sample, the requests to the server are done through jqxDataAdapter. jqxDataAdapter sends the requests to the server and also passes a data object to the server which contains information about the Grid’s state like pagenum, pagesize, etc. In the code which you posted, the Grid is bound to a local data source.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[imbaroMember]

thanks, that helped me understand the problem.

in the server paging example the work is with
data adapter who has source.
and you the grid source holds the data adapter.

(var dataadapter = new $.jqx.dataAdapter(source);)

so far i did the same.

because i work with web socket i can’t sent the adapter, so i need to update the data
when i receive the message from the web socket, and then render the rows.

what i did is when changing the page, i call the web socket and return nothing,
and when the message is received, i update the data adapter source and call the ‘updatebounddata’
to render the rows. this solution doesn’t work.

how can i make it work when using web socket

this is what i do then the message is received:

MySource.localdata = data;

dataadapter.setSource(MySource);

$(“#grid3”).jqxGrid(‘updatebounddata’);

ofer.

[Peter StoevKeymaster]

hi imbaro,

As you actually bind the Grid to local data, the virtual paging sample I posted should be helpful. There the “rendergridrows” returns an Array which first index is equal to the startindex parameter of the “rendergridrows” function adn the last index is equal to the endindex parameter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[davidfungfParticipant]

Hi Imbaro,

I am evaluating the product with WebSocket integration for my project. Did you solve the above problem yet?

[Author]

Posts