JqGrid loading every time on Next click on paging

I bind data in JqGrid on button click and it completed successfully. But when i click on next of pagging, data bind function call again and show same page i.e 1. Not moving to 2nd page. Please help me on this.

 function SearchEmployee() {
    alert('Button Clicked'); 
    $('#grid').jqGrid({
        datatype: function (postdata) {
            var empId = $("#EmployeeId").val();
            var firstName = $("#F_Name").val();
            var lastName = $("#L_Name").val();

            var EmployeeDetailsModel = {
                EmployeeId: empId,
                F_Name: firstName,
                L_Name: lastName
            };
            $.ajax({
                url: "/Common/EmployeeSearchData/",
                type: 'POST',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ objEmpModel: EmployeeDetailsModel }),
                error: function (data, textStatus) {
                    alert('Error loading json');
                },
                success: function (jsondata, st) {
                    if (st == 'success') {
                        //alert('success');
                        alert(JSON.stringify(jsondata));
                        var thegrid = jQuery("#grid")[0];
                        var data = JSON.stringify(jsondata);
                        thegrid.addJSONData(JSON.parse(data));
                    }
                }
            });
        },
        colNames: ['HR ID', 'Employee Id', 'Full Name', 'Designation', 'Location Code'],
        colModel: [
            { key: true, hidden: true, name: 'HRId', index: 'HRId', editable: false },
            { key: false, name: 'EmployeeId', index: 'EmployeeId', editable: false, width: 100 },
            { key: false, name: 'FullName', index: 'FullName', editable: false, width: 100 },
            { key: false, name: 'Designation', index: 'Designation', editable: false, width: 100 },
            { key: false, name: 'LocationCode', index: 'LocationCode', editable: false, width: 100 }
        ],
        pager: $('#pager'),
        viewrecords: true,
        loadonce: true,
        rowNum: 10,
        height: '100%',
        width: '100%',
        autowidth: true
    });
}

I would recommend you never use datatype defined as function if the data could be loaded using jQuery.ajax.

You should do the following:

1. upgrade jqGrid to the latest free jqGrid (4.12.1).
2. replace datatype to datatype: "json"

It's better just that you use the following code inside of SearchEmployee function

$("#grid").jqGrid("GridUnload");
$("#grid").jqGrid({
    datatype: "json",
    url: "/Common/EmployeeSearchData/",
    mtype: "POST",
    ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
    prmNames: { id: "HRId" }, // the name of id property
    serializeGridData: function () {
        return JSON.stringify({
                   objEmpModel: {
                       EmployeeId: $("#EmployeeId").val(),
                       F_Name: $("#F_Name").val(),
                       L_Name: $("#L_Name").val()
                   }
               });
    },
    colNames: ["Employee Id", "Full Name", "Designation", "Location Code"],
    colModel: [
        { name: "EmployeeId" },
        { name: "FullName" },
        { name: "Designation" },
        { name: "LocationCode" }
    ],
    additionalProperties: ["HRId"], // include HRId in local data
    cmTemplate: { width: 100 }, // optional if you want to remove autowidth:true option
    pager: true,
    rowNum: 10,
    viewrecords: true,
    loadonce: true,
    forceClientSorting: true,
    autowidth: true
);