action back, I lose the paging - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: cookies, filter, grid, jqxgrid, load, loadstate, number, page, pagenum, paging, save, savestate, state

This topic contains 7 replies, has 3 voices, and was last updated by Dimitar 9 years, 7 months ago.

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

Author

action back, I lose the paging Posts

January 30, 2014 at 9:02 am action back, I lose the paging #48662

Participant

Hi
I’ve the follow problem. In jqgrid when click in a link (open same page) and then go back, I lose the paging before (start always page n.1). How can resolve it? Can I have a example?
Thanks

Luca

January 30, 2014 at 9:20 am action back, I lose the paging #48664

Dimitar

Participant

Hello Luca,

This can be achieved by using cookies. Here is an example, based on the demo Initial Page and PageSize:

<!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/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initialPage = $.jqx.cookie.cookie("jqxGrid_jqxWidget");
            if (initialPage) {
                initialPage = parseInt(initialPage);
            } else {
                initialPage = 0;
            };

            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,
                pagenum: initialPage,
                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,

                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                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 }
                ]
            });

            $("#jqxgrid").on("pagechanged", function (event) {
                var args = event.args;
                var pagenum = args.pagenum;
                var pagesize = args.pagesize;

                $.jqx.cookie.cookie("jqxGrid_jqxWidget", pagenum);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 30, 2014 at 3:15 pm action back, I lose the paging #48701

Peter Stoev

Keymaster

Hi Luca,

Actually, We would like to suggest one additional solution. jqxGrid has a feature for maintaining its State. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/saveloadstate.htm?arctic

Best Regards,
Peter Stoev

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

January 30, 2014 at 10:26 pm action back, I lose the paging #48713

giansard

Participant

Thanks a lot Dimitar and Peter

April 15, 2014 at 7:02 am action back, I lose the paging #53085

giansard

Participant

Hi
is it possibile change the code above because I’d like to store the filter too.
Thanks

April 15, 2014 at 11:45 am action back, I lose the paging #53105

Dimitar

Participant

Hi giansard,

The state maintenance functionality, which Peter pointed out, supports filter saving, too, as can be seen in the demo.

Best Regards,
Dimitar

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

April 15, 2014 at 7:05 pm action back, I lose the paging #53137

giansard

Participant

Hi Dimitar
is it possible save the filter using the code that you posted above?
I saw the example of Peter but in that code, there is button.
I’d like (you can read my first post) when i click go back button, get the previous page.
Your code works, but I tried with filter and not works more.
Thanks!

April 16, 2014 at 6:27 am action back, I lose the paging #53159

Dimitar

Participant

Hi giansard,

Here is how to automatically save the grid state before the window goes to another page and load it when the grid has initialized:

<!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.storage.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.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="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/orders.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { 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: 850,
                source: source,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                autoloadstate: false,
                autosavestate: false,
                columnsresize: true,
                columnsreorder: true,
                showfilterrow: true,
                filterable: true,
                ready: function () {
                    $("#jqxgrid").jqxGrid('loadstate');
                },
                columns: [
                  { text: 'Ship Name', filtercondition: 'starts_with', datafield: 'ShipName', width: 250 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 200 },
                  { text: 'Ship Country', datafield: 'ShipCountry' }
                ]
            });

            window.onbeforeunload = function (e) {
                $("#jqxgrid").jqxGrid('savestate');
            };
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <a href="http://www.jqwidgets.com/">Outgoing link</a>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.