Pager not showing in jqGrid

Question

I am using jqGrid.Here is index.html :

    <table id="grid">
        <tr>
            <td></td>
        </tr>
    </table><br/><br/>
    <div id="#pager5"></div>

Here is .js file:

jQuery("#grid").jqGrid({
datatype: "local",
colNames: $scope.columns,
colModel: $scope.colModel,
onSelectRow: function(id){
    if(id && id!==lastsel2){
     jQuery('#grid').jqGrid('restoreRow',lastsel2); 
     jQuery('#grid').jqGrid('editRow',id,true); 
     lastsel2=id; 
    }
},

pager:'#pager5',
caption: "Sample grid"
});

//Here variables are the name of colModel
// $scope.vara = "abcd";
//console.log($scope.selected_folder.projects);
var mydata = [];
for(i=0;i<$scope.selected_folder.projects.length;i++)
{
        mydata.push({project:$scope.selected_folder.projects[i],1:i,2:"abcd"});
}
console.log(mydata);
for(var i=0;i<=mydata.length;i++) {
    jQuery("#grid").jqGrid('addRowData',i+1,mydata[i]);
//  jQuery("#grid").jqGrid('editRow',i+1);
}

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

Table is working fine with sorting , editing but I am not getting pager on the below of grid.How should I solve this?

Answer 1

The id of tag of your pager in html is "#pager5".

You should remove the # from the pager ID in the HTML.

<table id="grid">
 <tr>
        <td></td>
</tr>
</table><br/><br/>
<div id="pager5"></div>