Jqgrid showing page 1 of 0 on empty

Question

I have a question, when the grid is empty why does it show Page 1 of 0 can't it be Page 1 of 1 or something more reasonable?

My code

var xml=client.responseText;
         var xmlDoc = $.parseXML(xml); 
         var $xml = $(xml);

         xml=xml.replace(/<productId>1/g, "<productId>"+productMap['1']);
         xml=xml.replace(/<productId>2/g, "<productId>"+productMap['2']);
         xml=xml.replace(/<productId>3/g, "<productId>"+productMap['3']);


            $('#configDiv').empty();
            $('#configDiv').html(  '<div id="configDetailsGrid" width="100%"><table id="list1" width="100%"></table><div id="gridpager"></div></div>');

            //var grid = jQuery("#list1");
            //var iconAlert;

            var getColumnIndexByName = function (grid, columnName) {
                var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
                for (; i < l; i += 1) {
                    if (cm[i].name === columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            },
            grid = jQuery("#list1"),
            iconAlert = '<span class="ui-state-error" style="border:0"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span></span>';
            grid.jqGrid({

              datastr : xml,
              datatype: 'xmlstring',
              //datatype: 'clientside',
              colNames:['cfgId','Name', 'Host','Operating System', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By','',''],
              colModel:[
                  {name:'cfgId',index:'cfgId', width:90, align:"left", hidden:true},
                  //{name:'updateDate',index:'updateDate', width:12, align:'center', /*formatter: oldConfigurationWarning*/ },
                  {name:'cfgName',index:'cfgName', width:70, align:"left", formatter: 'showlink', formatoptions: {baseLinkUrl: '#'} },
                  {name:'hostname',index:'hostname', width:70, align:"left"},
                  {name:'osname',index:'osname', width:90, align:"left"},
                  {name:'cfgDesc',index:'cfgDesc', width:90, align:"left"},
                  {name:'productId',index:'productId', width:40, align:"left"},
                  {name:'cfgType',index:'cfgType', width:50, align:"left"},
                  {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"left"},
                  {name:'emailAddress',index:'emailAddress', width:120, align:"left"},
                  {name:'absolutePath',index:'absolutePath', width:90, align:"left", hidden:true},
                  {name:'fileName',index:'fileName', width:90, align:"left", hidden:true}
              ],
              pager : '#gridpager',
              rowNum:1000,
              rowList:[10,50,100],
              scrollOffset:0,
              height: 'auto',
              emptyrecords: 'No configurations loaded',
              autowidth:true,
              viewrecords: true,
              gridview: true,
              multiselect: true,
              xmlReader: {
                  root : "list",
                  row: "Response",
                  userdata: "userdata",
                  repeatitems: false
              },

              loadComplete: function () {
                    var count = grid.jqGrid('getGridParam');
                    var ts = grid[0];
                    if (ts.p.reccount === 0) {
                        grid.hide();
                        emptyMsgDiv.show();
                    } else {
                        grid.show();
                        emptyMsgDiv.hide();
                    }

                    //for showlink and icon alert having date difference more than 90 days
                    var iRow, row, trClasses, $cell,
                    icfgName = getColumnIndexByName(grid, 'cfgName'),
                    iupdateDate = getColumnIndexByName(grid, 'updateDate'),
                    mygrid = grid[0],
                    rows = mygrid.rows,
                    cRows = rows.length,
                    myLink = function (e) {
                        var $td = $(e.target).closest('td'),
                            text = $td.text(),
                            $tr = $td.closest('tr'),
                            rowid = $tr[0].id;
                            goToViewAllPage(rowid);
                    };
                for (iRow = 0; iRow < cRows; iRow += 1) {
                    row = rows[iRow]; // row.id is the rowid
                    trClasses = row.className.split(' ');
                    if ($.inArray('jqgrow', trClasses) > 0) {
                        // the row is a standard row (only if subGrid:true are used)
                        var cellvalue1,firstDate,secondDate;
                        $cell = $(row.cells[icfgName]);
                        cellvalue1=$(row.cells[iupdateDate]).text();
                        firstDate = new Date();
                        //console.info(cellvalue1+", "+cellvalue1.length);
                        //var cellvalue1="08-18-2011 11:49:01";
                        if(cellvalue1.length>25)
                        {
                            secondDate=new Date();
                            //secondDate = secondDate.substring(0, secondDate.length-3);

                            if(diffOf2Dates(firstDate,secondDate,true)>=expireCondition)
                            {
                                $cell.prepend(iconAlert);
                            }
                            $cell.click(myLink);
                        }
                        else
                        {

                            secondDate = cellvalue1.substring(0, cellvalue1.length-6);
                            if(diffOf2Dates(firstDate,secondDate,false)>=expireCondition)
                            {
                                $cell.prepend(iconAlert);
                            }
                            $cell.click(myLink);
                        }
                    }
                }

                },
              onSelectRow: function(id,status){

                  }
            });
            grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});

            var myGrid = $("#list1");
            $("#cb_"+myGrid[0].id).hide();

            // place div with empty message insde of bdiv
            emptyMsgDiv.insertAfter(grid.parent());

            //$("#list1").setGridParam({rowNum:10});
            //$("#list1").trigger("reloadGrid");

            $("#list1").setGridParam({rowNum:10}).trigger("reloadGrid");
            $("#list1").sortGrid('updateDate', false, 'desc');

My Xmldata (when empty)

<Response>
<isSuccess>true</isSuccess>
<operation>viewall</operation>
<message>No configurations loaded</message>
</Response>

Update

I updated accordingly but no still no luck, I still get the same old Page 1 of 0

 xmlReader: {
                  /*root : "list",
                  row: "Response",*/
                  root:"Response",
                  row:"list",
                  userdata: "userdata",
                  repeatitems: false
              },

my jquery.jqGrid.min.js file changes

if(locdata) {
            ts.p.records = gl;
            //Change after 1 of 0 (Oleg)ts.p.lastpage = Math.ceil(gl/ rn);
            ts.p.lastpage = Math.max(ts.p.page,Math.ceil(gl/ rn)); //line no 1181
}

my response

<Response>
  <isSuccess>true</isSuccess>
  <operation>viewall</operation>
  <message>No configurations loaded</message>
</Response>

Update, something usefull

If we reload the grid it solves the problem too

jQuery("#list1").setGridParam({rowNum:10}).trigger("reloadGrid");

Hage

The result depends on the input data which you use and from the datatype which you use. Could you post test XML data which are in the datastr? If you would use json or jsonstring as the input you would be implement any behavior which you need. – Downspout

@Oleg: input type is xml, its the same input from this location – Hage

I remember the answer, but I don't understand why you use 'xml' instead of 'json'. jqGrid have very flexible possibilities for JSON data and relatively restricted for XML data. Moreover the size of XML data is larger as JSON and processing of XML data is slower on both sides. In case of your problem you can implement page and total properties from jsonReader as function (method). So you can return any value based on any data. xmlReader has no such possibility. – Downspout

@Oleg: am i doing anything wrong? or is it the pagination always displays 1 of 0when grid is empty? Also this is an old project in which only for this grid i am using xml rest uses json, the response format in this case cannot be changed, is there any other way? – Hage

You should include in your question the XML data which you use as "empty" XML which display 1 of 0. – Downspout

@Oleg: I included my xml data when data grid is empty – Hage

Answer 1

I don't see that the XML data corresponds to xmlReader which you use. Probably you should switch the values of root and row properties:

xmlReader: {
    root : "list",
    row: "Response",
    userdata: "userdata",
    repeatitems: false
}

Additionally the input XML data contain no page, total and records properties. In case of usage of any other datatype as 'xml' or 'xmlstring' you can define page, total and records as functions inside of jsonReader. The xmlReader parameter don't support it.

Currently you don't define page, total and records properties. So the default values are used: page: "rows>page", total: "rows>total", records: "rows>records".

The bug which I described in the answer and in the bug report is still not fixed in the code of jqGrid 4.2.0. So your current data will display "1 of NaN" before you apply the fix.

After all you can consider to change the line 1193 of the jqGrid code

ts.p.lastpage = Math.ceil(gl/ rn);

to have other value in the lastpage.

UPDATED: I suggest that you modify the line ts.p.lastpage = Math.ceil(gl/ rn); of the jqGrid code to ts.p.lastpage = Math.max(ts.p.page,Math.ceil(gl/ rn));.

In the case if your input data will contain no <page> element or if it contains <Response><page>1</page>... you will see 1 of 1. If your XML data will contain <Response><page>0</page>... you will see 0 of 0.

Downspout

I tried ts.p.lastpage=10000; just to test, but it still does not show me 10000 in Page 1 of 0 also after i interchange root : "Response", row: "list", part, but no luck – Hage

@AbhishekSimon: I suggest that you modify the line ts.p.lastpage = Math.ceil(gl/ rn) of jqGrid source code to ts.p.lastpage = Math.max(ts.p.page,Math.ceil(gl/ rn)). – Downspout

I don't get it, where am i going wrong? In the case if your input data will contain no <page> element or if it contains <Response><page>1</page>... you will see 1 of 1 I did exactly what you said. I've updated my question – Hage

@AbhishekSimon: Look at the examples: page 0 of 0, page 1 of 1 where are different only the value inside of <page>...</page> – Downspout

I guess i'll have to change my response to have <page>1</page><total>1</total><records>0</records> Thanks :) – Hage

@AbhishekSimon: You are welcome! I think in the next time I will post more changes in trirand forum about the subject which we discuss here. – Downspout

Hi Oleg, long time, If I have <list><Response><page>1</page><total>1</total><records>0</records></Response></list> as my empty response in xml, and since i have defined row: "Response", it will not return 0 from getGridParam("records") and so it will not display emptyrecords: 'No configurations loaded', I changed my jqgrid lib line no 1193 to your specific line. Now it shows correct page numbers, but the message No configurations loaded is no longer coming, it shows an empty row. – Hage

@AbhishekSimon: The problem which you described can be solved only by debugging. One have to have JavaScript code which defines jqGrid, to use jquery.jqGrid.src.js, to have the corresponding input XML and go through the code of jqGrid in debugger. So just reading of your comment I can't answer on your question. – Downspout

@AbhishekSimon: You are welcome! You see yourself, that some small changing of the format of input data can change the usage of emptyrecords. So without the exact tescase one can't answer on your question. – Downspout

Hi again, Sorry to bother you on this qn again. I need help with this question I used your example page 1 of 1 (even the response format) and it works, but will it be possible to also display No Configuration loaded inside the grid, kind of like the one screenshot shown in this question? It seems the emptyrecords is not functioning – Hage

@AbhishekSimon: Look at the demo from the answer. Probably it's what you need. – Downspout

Fantastic, thanks. Even I was looking at some answer which had somewhat similar solution with my tweeks, but your's is better. :) – Hage

@AbhishekSimon: You are welcome! By the way if some answer was helpful you should not forget to vote up it. Voting is the most important criteria in searching and sorting. Low voted answers will be very difficult to find. So voting is mostly not the way to get somebody additional reputation points, the feature is mostly to help other to find helpful answers on the stackoverflow. You have right to vote up about 30 questions or answers per day (see here). So please use your right more frequently. – Downspout

Answer 2

I can't see any positive effect to Oleg's latest update and the use of max(), because in my use context, the code doesn't go through this part. However, there is another instance of ts.p.lastpage = ... in the source code.

ts.p.lastpage = lp === undefined? 1 : lp;

to be replaced with:

ts.p.lastpage = lp === undefined || lp === 0 ? 1 : lp;

That worked for me.

Additament