I have set paginantion using jquery and c# but i have face a issue not render number .

This is my code
@{
var prevDisabled = Model.IsFirstPage() ? "disabled" : "";
var nextDisabled = Model.IsLastPage() ? "disabled" : "";
}
<div class="blog-agination">
<div id="page-numbering" class="simple-pagination">
<ul>
<li class="active">
<a href="#" class="btn current prev @prevDisabled" id="prev" data-Id="@(Model.PageNumber-1)">«</a>
</li>
<li class="active">
<a href="" class="current">@Model.PageNumber</a>
</li>
<li class="">
<a href="#" class="btn current next @nextDisabled" id="next" data-Id="@(Model.PageNumber+1)">»</a>
</li>
</ul>
</div>
</div>
</section>
<script type="text/javascript">
$('#prev').click(function (event) {
event.preventDefault();
var id = $(this).attr('data-Id');
$.ajax({
url: "/Utility/Blog?pageId=" + id,
type: "POST",
dataType: "html",
traditional: true,
contentType: "application/json; charset=utf-8",
success: function (data) {
$(".blog-layout-content").html("");
$(".blog-layout-content").html(data);
},
});
});
$('#next').click(function (event) {
event.preventDefault();
var id = $(this).attr('data-Id');
$.ajax({
url: "/Utility/Blog?pageId=" + id,
type: "POST",
dataType: "html",
traditional: true,
contentType: "application/json; charset=utf-8",
success: function (data) {
$(".blog-layout-content").html("");
$(".blog-layout-content").html(data);
},
});
});
</script>
This is my result .I have click next button then change number 1 to 2 to 3 to 4 etc.
I want to render this

-This is genrate using plugin .