In the Paging footer, aren't the Page [1 ] of 0 supposed to say "Page [0 ] of 0" if no record is found?

Question

I noticed if there's no records to be returned then shouldn't the Paging footer say "0 of 0" instead of "1 of 0"??

Also, shouldn't the Paging textbox be disabled as well.

This is the JSON response I sent back to jqGrid

{ "total":0, "page":0, "records":0, "rows":[] }

I'm using jqGrid version 4.5.0

Thanks...

P.S. Source Code below...

        $('#'+jqgridSpreadsheetId).jqGrid({
            url: '../websrvc/JqGrid.ashx',
            datatype: 'json',
            mtype: 'POST',
            postData: { WhichJqgridTemplate: '<%=JqqridTools.Template.MyInventory%>', WhichAction: '<%=JqqridTools.Action.Display%>', WebpageQuickQuoteSalePrice: '<%=postQuickQuoteSalePrice%>' },
            colNames: ['Id', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory', 'Hidden-Inventory-Tracker-Location-Id', 'Inventory Tracker Location', 'Links'],  //Display Text in Column Header...
            colModel: [
                       //In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
                       //formatter doc --> "http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter&s[]=cell&s[]=formatter"...
                       //formatter hyperlink --> Stackoverflow posting was said to use formatter's function declaration instead of formatter's "showlink" followed by "formatoptions"...
                       //                    --> (Old Link) - http://stackoverflow.com/questions/5010761/linking-from-a-column-value-in-jqgrid-to-a-new-page-using-get...
                       //                    --> (New Link) - http://stackoverflow.com/questions/14529358/jqgrid-need-hyperlink-need-to-capture-value-through-jquery/14537512#14537512...
                       //                    --> (New Link) - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter...
                       //                    --> Reasons are --> 1) far simpiler to use formatter for reading/writing and 2) much quicker and better performance...
                       { name: 'Id', index: 'Id', sorttype: 'int', width: 0, align: 'left', hidden: true, hidedlg: true },  //"hidedlg" is use to hide the hidden column in "Column Chooser"...
                       { name: 'StockNumber', index: 'StockNumber', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Vin', index: 'Vin', sorttype: 'text', width: 140, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Year', index: 'Year', sorttype: 'int', width: 50, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Make', index: 'Make', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Model', index: 'Model', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Trim', index: 'Trim', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Mileage', index: 'Mileage', sorttype: 'int', width: 60, align: 'center', formatter: 'number', formatoptions: {decimalSeparator:'',thousandsSeparator:',',decimalPlaces:0,defaultValue:'0'} },
                       { name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: {decimalSeparator:'.',thousandsSeparator:',',decimalPlaces:2,defaultValue:'0.00',prefix:'$',suffix:''} },
                       { name: 'StockDate', index: 'StockDate', sorttype: 'date', width: 90, align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },  //"formatter" and "formatoptions" is required for date sorting to works properly...
                       { name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', width: 65, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } },
                       { name: 'InventoryTrackerLocationId', index: 'InventoryTrackerLocationId', sorttype: 'int', width: 0, align: 'left', hidden: true, hidedlg: true },  //"hidedlg" is use to hide the hidden column in "Column Chooser"...
                       { name: 'InventoryTrackerLocation', index: 'InventoryTrackerLocation', sorttype: 'text', width: 120, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       //Links is not present in json data from the website, so we customize it here...
                       { name: 'Links', index: 'Links', sorttype: 'text', width: 80, align: 'center', formatter: function (cellValue, options, rowObject) { return "<span style='text-decoration:underline;cursor:pointer;'>Links</span>" }, search: false }  //"search" is use to hide the field in search dialog...
            ],
            beforeSelectRow: function (rowid, e) {
                //http://stackoverflow.com/questions/16592547/how-to-have-custom-formatter-built-in-function-to-call-a-non-jqgrid-seperate-fun
                //http://stackoverflow.com/questions/16592547/how-to-have-custom-formatter-built-in-function-to-call-a-non-jqgrid-seperate-fun
                //http://stackoverflow.com/questions/14529358/jqgrid-need-hyperlink-need-to-capture-value-through-jquery/14537512#14537512
                //http://stackoverflow.com/questions/13761222/how-to-fire-loadcomplete-after-new-row-is-added-in-jqgrid/13765086#13765086
                //To attached javascript function to a clickable "Links" cell...
                if (this.p.colModel[$.jgrid.getCellIndex($(e.target).closest("td")[0])].name === jqgridColumnNameLinks) {
                    jqgridPopupDialogLinkOptions(
                        $(this).getCell(rowid, jqgridColumnIdStockNumber),                //Use $(this) instead for less overhead - It's what Oleg at jqGrid said....
                        $(this).getCell(rowid, jqgridColumnIdVin),                        //Use $(this) instead for less overhead - It's what Oleg at jqGrid said....
                        $(this).getCell(rowid, jqgridColumnIdInventoryTrackerLocationId)  //Use $(this) instead for less overhead - It's what Oleg at jqGrid said....
                    );
                    return false;
                }
            },
            pager: '#'+jqgridPagerId,
            rowNum: 10,
            rowList: [5, 10, 20, 50],  //Drop-down selection in footer - To show how many rows per page...
            //This "sortname"/"sortorder" tag must be specified for "getGridParam"'s 'datatype'/'sortname'/'sortorder' (column sorting) to work.  (Some kind of jqGrid bug or feature which we need to hack to do a workaround with)...
            <%if(postQuickQuoteSalePrice.Length > 0) {%>
            sortname: 'TotalCost', sortorder: 'desc',  //When coming from Quick-Quote webpage...
            <%} else {%>
            sortname: 'StockDate', sortorder: 'desc',  //When coming from any webpages, especially the Product webpage...
            <%}%>
            viewrecords: true,
            //gridview: true,
            //imgpath: '',
            caption: 'My Inventory',
            width: 1022,
            shrinkToFit: false,
            height: 400,
            sortable: true,  /* This allows both 1) Moving columns sideway to other location fields and 2) for jqGrid Column Chooser Plugin / JQuery Multiselect Plugin to work... */
            grouping: true,  /* This allows row data to be group into row grouping... */
            loadonce: true,  //In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
            emptyrecords: "No records to display",
            loadError: function (xhr, st, err) {
                alert("An error had occurred, please try again or notify webmaster of this error");
            },
            loadComplete: function () {
                //http://stackoverflow.com/questions/16639339/how-do-i-get-a-column-to-be-sort-in-descending-order-upon-loading...                   
                //=========================================================================================
                // the code will be executed only at the first loading because jqGrid
                // changes datatype to "local" after the first loading if we use
                // loadonce option. We use setTimeout to allows jqGrid to make the first
                // loading till the end and reload it AFTER that
                //=========================================================================================
                var $self = $(this);  //This is needed as seperate objects to seperate itself from the binding jqGrid or $(this) objects for it to work.  It wouldn't work if binded to itself...
                if ($self.jqGrid('getGridParam', 'datatype') === 'json') {  //This the value when loading webpage then the value of "datatype" option will become "local" afterward...
                    //$self.getGridParam({ sortname: 'TotalCost', sortorder: 'desc' });  //When coming from Quick-Quote webpage...
                    //$self.getGridParam({ sortname: 'StockDate', sortorder: 'desc' });  //When coming from any webpages, especially the Product webpage...
                    //$(this).triggerHandler('reloadGrid', [{ sortname: 'Year', sortorder: 'desc' }]);
                    setTimeout(function () {
                        //$('#' + jqgridSpreadsheetId).triggerHandler('reloadGrid', [{ sortname: 'Year', sortorder: 'desc' }]);
                        $self.triggerHandler("reloadGrid");
                    }, 50);
                }
                //=========================================================================================
                jqgridSummarySpreadsheetDisplay();
            }
        });

Here's the snapshot using Firefox firebug. As you can see the json result is what you asked me to do, use "page":"0" instead of "page":0 . The jqGrid in the webpage showed 1 instead of 0.

enter image description here

Oleg · Accepted Answer · 2013-05-23T11:54:24.450

3

I think the problem is in the line of jqGrid source code

ts.p.page = $.jgrid.getAccessor(data,dReader.page) || ts.p.page || 0;

You should change integer value of page to the string value:

{ "total":0, "page":"0", "records":0, "rows":[] }

or

{ "total":"0", "page":"0", "records":"0", "rows":[] }

which mostly exact corresponds to the format described in the documentation.

UPDATED: The demo reproduce your problem and another demo uses the fixed JSON data ("page":"0" instead of "page":0). How you can see the fix work.

UPDATED 2: I see now that the problem is in usage of loadonce: true. To fix the problem one can use

localReader: {
    page: function (obj) {
        return obj.page !== undefined ? obj.page : "0";
    }
}

see one more demo.

UPDATED 3: I posted the full request which would fix the problems. The fix is already merged (see here) to the main code of jqGrid on the github.

edited May 23 '13 at 11:54

answered May 21 '13 at 20:59

Oleg

220,925
34
403
798

I tried your suggestion and it had no effect on the jqGrid. I posted the source code above. – fletchsod May 22 '13 at 13:55
@fletchsod: My suggestion was to change your *server code* so that it returns `page` as **string**. You posted grid with 16 columns many callbacks etc. All this is not important to reproduce the problem you can just save `{ "total":"0", "page":"0", "records":"0", "rows":[] }` in file and use the file as `url` for simple grid with one column. You will see on [the demo](http://www.ok-soft-gmbh.com/jqGrid/empty.htm) that all work correctly. If I change `"page":"0"` to `"page":0` like you have I will have "Page 1 of 0" – Oleg May 22 '13 at 16:36
It's what I just did as suggested. Okay, I'm attaching photo snapshot to show what the firebug had received from the webserver and the webpage show no new changes. :-/ This is why I post the source code to see if there's something wrong w/ it or not. – fletchsod May 22 '13 at 22:34
@fletchsod: I understand now the problem. See **UPDATED 2**. – Oleg May 22 '13 at 22:46
Ah! That works now. I'm still learning. :-) Thanks very much for your help. I now have 2 quick questions. 1) Is there a reason why when I typed in "@Oleg:" and it didn't show up? and 2) I'll be working on Column Header Grouping soon, see it at http://jsfiddle.net/tpeczek/vRtKS/ for a demo. I got that in place on the development source code. It does looks ugly and I'm going to try to beautify it better. My question is have you come across this "Column Header Grouping" requests from other developers before? Also, do you have better suggestion or How-To that I can do on my own? – fletchsod May 22 '13 at 23:47
@fletchsod: First see **UPDATED 3** part. About @Oleg see [here](http://meta.stackexchange.com/a/43020/147495). I am not sure that I understand your question about "Column Header Grouping". What is your goal exactly? What you want implement? Additionally I would recommend you to take a look in [the answer](http://stackoverflow.com/a/10196208/315935) which shows how one can use `start` event to improve visibility of dragged element. I hope it could get you implementation idea which you could use for your requirements. For example you should set font of dragged column header etc. – Oleg May 23 '13 at 11:08
Oleg: That's wonderful about the GitHub check-in. Thanks for all of your help. As for the "Column Header Grouping", I'll try to post it on StackOverflow sometime today or tomorrow. jqGrid at this time does not support the built-in dragging of the Header Column to a special box, when dropped would do the column grouping of the rows. It would be easier if I post the source code and go from there. Back in year 2007, we used GridEx component which support this and it became popular for our customers because it is adjustable to what they want. – fletchsod May 23 '13 at 13:29
@fletchsod: You are welcome! I'll look in new question when you post it. – Oleg May 23 '13 at 13:39

In the Paging footer, aren't the Page [1 ] of 0 supposed to say "Page [0 ] of 0" if no record is found?

1 Answers1

Linked