add,edit,search,page button in below JQgrid MVC4

Question

I use the Following way of method to bind the data in JQGrid.It working Fine.

My question is,The buttons like add,edit,page,search... in bottom of the grid(which is highlighted in the ReferImage) does not show.

How to insert add,edit,search,page button in below JQgrid??

Add Script Files Like the following Order,

    <link href="~/Content/Content/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
    <link href="~/JQGrid/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="~/JQGrid/js/jquery-1.11.0.min.js"></script>
    <script src="~/JQGrid/js/i18n/grid.locale-en.js"></script>
    <script src="~/JQGrid/js/jquery.jqGrid.min.js"></script>
    <script src="~/JQGrid/js/jquery.jqGrid.src.js"></script>

JqGrid Script

<script type="text/javascript">
    $(document).ready(function () { 
    $(function () {
        jQuery("#persontable").jqGrid({
            url: '/Home/passjson',
            datatype: "json",
            mtype: 'GET',
            colNames: ['FirstName', 'LastName', 'LevelOfEducation','Company'],
            colModel: [
                        { name: 'FirstName', index: 'FirstName', width: 100, align: 'left' },
                        { name: 'LastName', index: 'LastName', width: 110, align: 'left' },
                        { name: 'LevelOfEducation', index: 'LevelOfEducation', width: 110, align: 'left' },
                        { name: 'Company', index: 'Company', width: 110, align: 'left' }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            sort: 'FirstName',
            viewrecords: true,
            gridview: true,
            loadonce: true,
            toolbar: [true, 'bottom'],
            multiselect: true,
            pager: "#jQGridPager",
            cellEdit: false,
            rowNumbers: true,
            viewrecords: true
        });

        $('#persontable').jqGrid('navGrid', '#jQGridPager',
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            searchtext: "Search",
            addtext: "Add",
            edittext: "Edit",
            deltext: "Delete",
            refreshtext: "Refresh",
            position: 'left'
        });

    });
    });
</script>   
<table id="persontable" ></table>

Refer Image

Answer 1

First of all you should use either jquery.jqGrid.min.js or jquery.jqGrid.src.js but not both together.

You problem seems me very easy. You use the option pager: "#jQGridPager" of jqGrid and you call navGrid with parameter '#jQGridPager', but you don't defined empty <div> with id="jQGridPager". So I suppose that you should just append

<table id="persontable"></table>

with

<div id="jQGridPager"></div>

By the way the option sort: 'FirstName' is not exist. Probably you mean sortname: 'FirstName'.