Display newly added row at first position in jQuery DataTable in ASP.Net MVC

I am working on Asp.Net MVC application. I am using jquery datatables.net to show records in form of Grid.

When user Add a new record (from Insert View) and click on save button, the newly added row is displayed at the end of Jquery datatables.net (in Index view)

Every time, newly added record is displayed at the end of the datatables.net (in the last page) because of which user is unable to understand whether the new row has been added or not unless user clicks the last paging.

Please let me know how to display newly added row at 1st position/1st row in Jquery datatables.net??

MappingWell Controller -- JQuery Datatables Bind code:

    public JsonResult BindAndFilterGridData(string study, string scenario, string project)
    {
	try
	{
	     var data = (from mw in _repository.GetAllMappingWells().ToList()
			join hwf in _repository.GetAllFDPWell().ToList() on mw.FdpWellId equals hwf.FdpWellId
			join hwp in _repository.GetAllPearlWell().ToList() on mw.PearlWellId equals hwp.PearlWellId
			join hfs in _repository.GetScenarioDDL().ToList() on new { hwf.StudyId, hwf.ScenarioId } equals new { hfs.StudyId, hfs.ScenarioId }
			select new { mw.Id, mw.MappingId, hfs.StudyName, hfs.CombinedName, hwf.WellName, mw.Aggregation, hwp.ProjectName, pearlWell = hwp.WellName }
			).Distinct().ToList();

	    return new JsonResult(data);
	}
	catch (Exception)
	{
		throw;
	}
    }

Index.cshtml:

<a class="btn dxButton float-right" asp-area="" asp-controller="MappingWell" asp-action="Well">Add New</a>
<table id="DT_grdMappingWell" class="display table table-bordered table-striped table-hover" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>MappingId</th>
            <th>Study</th>
            <th>Scenario</th>
            <th>Fpd Well</th>
            <th>Aggregation</th>
            <th>Project</th>
            <th>Pearl Well</th>
            <th>Edit</th>
        </tr>
    </thead>
</table>
<input type="hidden" id="hfId" value="" />
  
@section Scripts{
    <script type="text/javascript">
        var gridDataOperation;
        var grdTable;
  
        $(document).ready(function () {
            GetGridData("", "", "");
            bindGrid(gridDataOperation);
        })
  
        //--grid filter code
        function GetGridData(study, scenario, project) {
            if (window.location.href.match(/(\d+)$/g) != null) {
              var id = window.location.href.match(/(\d+)$/g)[0];
              $('#hfId').val(id);
            }
            var actionUrl = "@Url.Action("BindAndFilterGridData", "MappingWell")";
            $.ajax({
                url: actionUrl,
                type: 'GET',
                dataType: 'json',
                async: false,
                cache: false,
                data: { study: study, scenario: scenario, project: project },
                success: function (responseData) {
                    gridDataOperation = responseData;
                    console.log(responseData);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                },
                beforeSend: function (jqXHR, settings) {
                },
                complete: function (jqXHR, textStatus) {
                },
            });
        }
  
        function bindGrid(gridData) {
            grdTable = $('#DT_grdMappingWell').DataTable({
                data: gridData,
                order: [[0, "desc"]],
                columns: [
                    { title: "Id", data: 'id', "autoWidth": true },
                    { title: "MappingId", data: 'mappingId', "autoWidth": true },
                    { title: "Study", data: 'studyName', "autoWidth": true },
                    { title: "Scenario", data: 'combinedName', "autoWidth": true },
                    { title: "Fdp Well", data: 'wellName', "autoWidth": true },
                    { title: "Aggregation", data: 'aggregation', "autoWidth": true },
                    { title: "Project", data: 'projectName', "autoWidth": true },
                    { title: "Pearl Well", data: 'pearlWell', "autoWidth": true }
                ],
                columnDefs: [
                    {
                        //hiding the Primary key of the table and also unsearchable.
                        targets: [0],
                        visible: false,
                        searchable: false
                    },
                    {
                        //hiding the mapping_id and also unsearchable.
                        targets: [1],
                        visible: false,
                        searchable: false
                    },
                    {
                        targets: [8],
                        width: "20",
                        orderable: false,
                        render: function (data, type, row) {
                            return '<a href = "@Url.Action("Update", "MappingWell")?id=' + row.id + '&mappingId=' + row.mappingId + '"><span style="cursor:pointer;">Edit</span></a> &nbsp;';
                        }
                    },                
                ],
                "createdRow": function (row, data, dataIndex) {
                     if (data.CustomerId == $('#hfId').val()) {
                     $('#hfId').val('');
                     $(row).css('background-color', '#00FF00');
                  }
                }
            });
        } 
    </script>
}

Thank you so much