Create paging in HTML table - html

Question

I have Html code that generates a table that contains a lot of records.
Here is the code:
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
This code is contained in razor partial view page.
My question is how can I create paging in table that described above?

Answer 1

As per your comment i m showing complete example of datatable here :
Jquery and CSS References :-
Links :-
http://code.jquery.com/jquery-1.11.1.min.js
http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
Your Partial View :-
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table id="mydatatable">
<thead>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
<thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
<tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#mydatatable').dataTable();
});
</script>
Last but not the least don't forget to add references of required jquery files on your page.

Answer 2

//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
/////////////////////////////////////
<table id="myTable">
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>