jQuery UI Widgets Forums Grid action back, I lose the paging

This topic contains 7 replies, has 3 voices, and was last updated by  Dimitar 10 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • action back, I lose the paging #48662

    giansard
    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

    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/

    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/

    action back, I lose the paging #48713

    giansard
    Participant

    Thanks a lot Dimitar and Peter

    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

    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/

    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!

    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/

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

You must be logged in to reply to this topic.