facundop facundop - 1 month ago 13
Java Question

How to force JQGrid to show a fixed number of rows, and fill it with empty ones if necessary

I'm required to load data and always show 5 rows per page, even if I need to fill them with empty rows.
After doing some research on StackOverflow, I was able to find a little snippet that adds empty rows but it works only when the total rows are smaller than the pagesize (in my case, totalrows < 5). If my data contains more than 5 rows (for instance, 11 rows) my third page will show 5 rows (1 with data and 4 empty rows just like I want) but my first two pages will show 9 rows (5 with data and 4 empty rows).

How do I fix this? I have the following code so far:

$(document).ready(function() {
$.subscribe('gridEstudiosComplete', function() {
var selRowIds = new Array();
selRowIds = $('#gridEstudios').jqGrid("getDataIDs");
var records = jQuery("#gridEstudios").jqGrid('getGridParam', 'records');
var pagesize = jQuery("#gridEstudios").jqGrid('getGridParam', 'rowNum');
// if records < pagesize I add empty rows until I have 5 (this works ok) else I have to calculate how many empty rows I have to add to the last page (it doesn't work ok, I added pictures below)
if (records < pagesize) {
for (i = records - pagesize; i < pagesize; i++) {
$("#gridEstudios").addRowData(records + i, {});
}
} else if (records > pagesize && records % pagesize != 0) {
rowsToAdd = pagesize - (records % pagesize);
while (rowsToAdd > 0) {
$("#gridEstudios").addRowData(records + 1, {});
records = records + 1;
rowsToAdd = rowsToAdd - 1;
}
}
});


This doesnt work ok when I have more than 5 records to show:
This doesnt work ok when I have more than 5 records to show




Unlike previous pages, the last one works as required:
Unlike previous pages, the last one works as required

Answer

Below i have retrieved "curpage" (Current Page) and "totalpages" (Total # of Pages) from the grid's postData object, then added as a condition in the elseif so that you would only add rows to the last page

$( document ).ready(function() {
     $.subscribe('gridEstudiosComplete', function() {
            var selRowIds=new Array();
            selRowIds=$('#gridEstudios').jqGrid("getDataIDs");
            var records = jQuery("#gridEstudios").jqGrid('getGridParam', 'records');
            var pagesize = jQuery("#gridEstudios").jqGrid('getGridParam', 'rowNum');
            var postdata = jQuery("#gridEstudios").jqGrid('getGridParam', 'postData');
            var curpage = postdata.page
            var totalpages = postdata.total
            // if records < pagesize I add empty rows until I have 5 (this works ok) else I have to calculate how many empty rows I have to add to the last page (it doesn't work ok, I added pictures below)
            if (records < pagesize) {
                for (i = records - pagesize; i < pagesize; i++) {
                    $("#gridEstudios").addRowData(records + i, {});
                }
            } else if (records > pagesize && records % pagesize != 0 && curpage == totalpages) {
                rowsToAdd = pagesize - (records % pagesize);
                while(rowsToAdd > 0) {
                    $("#gridEstudios").addRowData(records + 1, {});
                    records = records + 1;
                    rowsToAdd = rowsToAdd - 1;
                }
            }
    });