First of all I recommend you to read this and this old answer which describe how the toppager works. If you use toppager:true jqGrid option the additional pager toolbar will be created above the searching toolbar. If you use cloneToTop:true option of the navigator all standard navigation buttons will be added in the both toolbars. Because the name of the toppager will be constructed based on the fix rule from the id of the grid: "list_toppager" for the grid id="list" (in your case "customer_grid_toppager") you can use the same navButtonAdd method which you use to add the button to the top navigation bar like to the bottom navigation bar. You should just use another id of the pager ("#customer_grid_toppager" instead of "#customer_grid_pager" in your case).
I modified the demo from the answer for you to the following demo, which do what you need:
The corresponding code follows:
var mygrid = $("#list"),
pagerSelector = "#pager",
mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
],
myAddButton = function(options) {
mygrid.jqGrid('navButtonAdd',pagerSelector,options);
mygrid.jqGrid('navButtonAdd','#'+mygrid[0].id+"_toppager",options);
};
mygrid.jqGrid({
datatype: 'local',
data: mydata,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id',width:70,sorttype:'int',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'invdate',index:'invdate',width:80,align:'center',sorttype:'date',
formatter:'date',formatoptions:{srcformat:'Y-m-d', newformat:'d-M-Y'},
srcfmt:'d-M-Y', datefmt:'d-M-Y',
searchoptions: {
sopt:['eq','ne','lt','le','gt','ge'],
dataInit:function(elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
//showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},100);
}
}},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
height: '100%',
width: 720,
toppager: true,
gridview: true,
pager: pagerSelector,
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
caption: 'Add buttons to both top and bottom toolbars'
});
mygrid.jqGrid('navGrid',pagerSelector,
{cloneToTop:true,edit:false,add:false,del:false,search:true});
mygrid.jqGrid('filterToolbar',
{stringResult:true, searchOnEnter:true, defaultSearch:'cn'});
myAddButton ({
caption:"Add Customer",
title:"Add Customer",
buttonicon :'ui-icon-plus',
onClickButton:function(){
alert("Add Customer");
}
});
myAddButton ({
caption:"Clear",
title:"Clear Search",
buttonicon:'ui-icon-refresh',
onClickButton:function(){
mygrid[0].clearToolbar();
}
});
myAddButton ({
caption:"Close",
title:"Close Search",
buttonicon:'ui-icon-close',
onClickButton:function(){
alert("Close Search");
}
});
