jQWidgets Forums

Tagged: Button, datainfo, getdatainformation, grid, jqxgrid, pagenum, pagesize, paginginfo, rowscount

This topic contains 4 replies, has 2 voices, and was last updated by jkapasi 10 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Get row count of current page Posts

November 7, 2014 at 11:56 am Get row count of current page #62381

jkapasi

Participant

Hello,

I have 25 rows splitted in 10 rows per page. Provided a button on click of which it gives me rows count.

On page 1 it gives me 10. On page 2 it gives me 20. On page 3 it returns me 25.
Expected result should be 10 on page 1, 10 on page 2 and 5 rows on page 3.

I tried three method to get rows:
-getrows
-getboundrows
-getdisplayrows

But I am not getting the expected result.

Regards,
Jash Kapasi

November 7, 2014 at 3:20 pm Get row count of current page #62391

Nadezhda

Participant

Hello Jash Kapasi,

Please, find below an example which shows how to get number of rows current page via ‘getpaginginformation’ method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxcheckbox.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.sort.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="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
            $("#jqxbutton").jqxButton({
                theme: 'energyblue',
                width: 250,
                height: 30
            });

            $('#jqxbutton').click(function (event) {
                var paginginformation = $('#jqxgrid').jqxGrid('getpaginginformation');
                alert("Number of rows on current page: " + paginginformation.pagesize);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input type="button" style="margin: 10px;" id="jqxbutton" value="Get number of rows on current page" />
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

November 10, 2014 at 5:19 am Get row count of current page #62432

jkapasi

Participant

Thanks for your response.

I tried your example but it gives me the value of page size as the value selected in the page size dropdown.

I need the count of the rows seen on current page. If the grid has only 2 rows on a particular page when page size is 10, it should return me 2 instead of 10.

Regards,
Jash Kapasi

November 10, 2014 at 8:17 am Get row count of current page #62447

Nadezhda

Participant

Hello Jash Kapasi,

You can use the following code for clicking on button.

$('#jqxbutton').click(function (event) {
  var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
  var paginginfo = datainfo.paginginformation;                
  alert(Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) - (paginginfo.pagenum * paginginfo.pagesize));                
});

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

November 14, 2014 at 6:05 am Get row count of current page #62732

jkapasi

Participant

Thanks for your response.

Regards,
Jash

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.