How to load the datatable td values using ajax success function in mvc

Hi i want to load the data table td values in ajax success function in mvc. I tried to load the datatable td values in ajax success function while changing the year . But its not working.Below i have attached my code.

 

 

@model IEnumerable<MVCproject.Model.Details>

@{

ViewBag.Title = "Summary";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<link href="~/Content/datatables.min.css" rel="stylesheet" />

<script src="~/Scripts/datatables.min.js"></script>

<div class="row" id="">

<div class="col-md-1 col-sm-1 col-xs-12"></div>

<div class="col-md-10 col-sm-10 col-xs-12">

<div class="x_panel vt_shadow">

<div class="col-md-12 col-sm-12 col-xs-12 x_title" style="margin:10px 0px 10px 0px;">

<h2 class="" style="font-size:18px;color:black;text-align:left;"><b>Details<span class="DCDIYresult_year" style="color:black;"></span></b></h2>

<div class="col-md-1 col-sm-1 col-xs-12" style="margin-bottom:2px;float:right;margin-right:12px;">

<a class="btn btn-block" style="color:white;font-size:12px;font-weight:600;background-color:#008000;" href="Index/Dashboard"><i class="fa fa-home"></i>&nbsp;&nbsp;Back</a>

</div>

<div class="col-md-2 col-sm-2 nav navbar-right" style="margin-bottom: 15px;">

<span class="glyphicon glyphicon-resize-full" style="color:#008000;float:right;margin:5px 10px 0px 30px;font-size:19px;" id="btn btn-info btn-lg" data-toggle="modal" data-target="#Modaldetails" onclick="$('#datatable-PopupConstituencyList').css('max-width', '100%');"></span>

</div>

<div class="col-md-2 col-sm-2 nav navbar-right" style="margin-bottom: 15px;">

@Html.DropDownList("OperationddlYear10", Model.First().lstYear, new { @class = "form-control top-filter" })

</div>

</div>

<div class="x_content" id="">

<div class="row" id="details">

<table class="table table-bordered table-striped mb-none" id="datatable-pList">

<thead>

<tr>

<th style="text-align:left">C01</th>

<th style="text-align:left">C02</th>

<th style="text-align:right">C03</th>

<th style="text-align:left">C04</th>

</tr>

</thead>

<tbody>

@if (Model != null)

{

foreach (var item in Model)

{

<tr>

<td style="text-align:left">

@item.C01

</td>

<td style="max-width:200px;text-align:left">

<a href="#" style="text-decoration:underline;color:#008000;text-transform:uppercase;">

@item.C02

</a>

</td>

<td style="text-align:right">

@item.C03

</td>

<td style="text-align:left">

@item.C04

</td>

</tr>

}

}

</tbody>

</table>

</div>

</div>

</div>

</div>

<div class="col-md-1 col-sm-1 col-xs-12"></div>

 

 

<script>

$('#OperationddlYear10').on('change', function () {

$(".DCDIYresult_year").text($('#OperationddlYear10 :selected').text());

var yr= $("#OperationddlYear10").val();

$.ajax({

type: "Post",

url: '@Url.Action("GetData", "Home")',

datatype: "Json",

data: { Year: yr, pval: 1 },

success: function (data) {

$('tbody').html(data);

}

});

});

</script>

 

 

 

 

public JsonResult GetData(int Year=3, int pval=0)

{

try

{

BAL bal = new BAL();

List<Details> model = bal.GetData(Year, pval);

return Json( model , JsonRequestBehavior.AllowGet);

}

catch (Exception ex)

{

Common.AddModel_Log4Net();

throw new Exception(ex.ToString());

}

}

Above is my code.Now i want to load the table values in ajax success function on year change

event but it is not working any one check and help me to resolve this issue .Thanks.