paging in grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, disable, disabled, first, grid, jqxgrid, last, page, pager, paging

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 10 months ago.

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

Author

paging in grid Posts

November 20, 2013 at 1:31 pm paging in grid #32986

rani

Participant

Hello all,

I want to disable the pager buttons as per the following condition;

1) If it is last page, I want the right button i.e. “Next” to be disabled. As well as, it has to be enabled when the current page is less than last page count.

2) If it is first page, I want the left button i.e. “Previous” to be disabled. As well as, it has to be enabled when the current page is larger than first page count.

plz help me.

regards,
rani

November 21, 2013 at 9:19 am paging in grid #33023

Dimitar

Participant

Hello rani,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                pagermode: "simple",
                autoheight: true,
                columnsresize: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
                  { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
                ],
                ready: function () {
                    var paginginformation = $('#jqxgrid').jqxGrid('getpaginginformation');
                    if (paginginformation.pagenum == 0) {
                        $("#jqxgrid div[title='first']").jqxButton({ disabled: true });
                    };
                }
            });
            $("#jqxgrid").on("pagechanged", function (event) {
                var paginginformation = $('#jqxgrid').jqxGrid('getpaginginformation');
                var pagescount = paginginformation.pagescount;
                var currentPage = event.args.pagenum;
                if (currentPage == 0) {
                    $("#jqxgrid div[title='first']").jqxButton({ disabled: true });
                } else {
                    $("#jqxgrid div[title='first']").jqxButton({ disabled: false });
                };
                if (currentPage == (pagescount - 1)) {
                    $("#jqxgrid div[title='last']").jqxButton({ disabled: true });
                } else {
                    $("#jqxgrid div[title='last']").jqxButton({ disabled: false });
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.