jqgrid: how do I change the layout of the pager? - jqgrid

Question

I'd like to change the layout of the pager, so that the VCR buttons are all grouped together, followed by the Page number input field, then the number of rows drop-down. How would I accomplish this?
Here is the code I'm currently using to display the jqgrid. Its the standard JavaScript code:
$(function(){
$("#" + listName).jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
colNames: columnNames,
colModel: columnModel,
pager: pagerName,
rowNum: displayRows,
rowList: rowList,
sortname: initSortCol,
sortorder: initSortOrder,
viewrecords: true,
multiselect: multiSelect,
gridview: true,
caption: caption,
height: height,
jsonReader: {
root: 'data',
page: 'currentPage',
total: 'totalPages',
records: 'totalRows',
repeatitems: false,
id: dataModelRowId
}
});
jQuery("#" + listName).jqGrid('navGrid','#' + pagerName,{edit:false,add:false,del:false,search:false});

Answer 1

Example of jqgrid with page number, number of records per page.
Code:
$(document).ready(function(){
//jqGrid
$("#librariesList").jqGrid({
url:'<%=request.getContextPath()%>/Admin/getAllLibraries',
datatype: "json",
colNames:['Id','Edit','Type','Created Date', 'Modified Date', 'Url', 'Use Url'],
colModel:[
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false,hidden:true},
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false, formatter: editLink},
{name:'type',index:'type',width:80},
{name:'createdDate',index:'createdDate',width:150},
{name:'modifiedDate',index:'modifiedDate',width:150},
{name:'url',index:'url',width:150},
{name:'useUrl',index:'useUrl',width:50},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'createdDate',
viewrecords: true,
sortorder: "asc",
autowidth:'true',
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .55);
$('#load_librariesList').width("130");
$("#librariesList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{},{closeAfterSearch:true});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editLibrary/"+ rowdata.libraryId + "' class='ui-icon ui-icon-pencil' ></a>";
}
jggrid is displayed like below: