jQuery datatable pagination not working with mvc view - asp.net-mvc

Question

I'm working on an MVC application. The table data is returned as a view from the controller. After binding the rows in the razor view, I'm initializing the datatable. The no. of rows returned is 50.
The issue is, the datatable displays all the 50 records and hence there is no pagination. I would like it to show only 10 records per page and then paginate.
Also, I do not want to get the data page by page. The total count, which is 50 in this case, is decided by the end user. That's the main reason, I choose datatables as it provides sorting, search & pagination with no coding.
So, does the pagination feature work if the data is bound to DOM and then initialized. If not, what is the best way to do it.
Here is the code:
#model ResultOutput
<table class="tblKeyMetrics" role="grid">
<thead>
<tr role="row">
<th class="">Value</th>
<th class="">Impressions</th>
</tr>
</thead>
#if (Model.KeyMetrics != null && Model.KeyMetrics.Count > 0)
{
<tbody>
for (int index = 0; index < Model.KeyMetrics.Count; index++)
{
KeyMetrics metric = Model.KeyMetrics[index];
<tr role="row">
<td>#metric.value</td>
<td>#metric.impressions</td>
</tr>
}
</tbody>
}
else
{
<tbody>
<tr class="row">
<td colspan="3">
No results found.
</td>
</tr>
</tbody>
}
</table>
<script>
$(document).ready(function () {
InitializeDataTable($(".tblKeyMetrics"));
});
function InitializeDataTable(tbl) {
if (!$.fn.DataTable.isDataTable($(tbl))) {
$(tbl).DataTable({
pageLength: 10,
iDisplayLength: 10,
"paging": true
});
}
}
</script>
using jquery.dataTables.min.js v1.10.16 with dataTables.bootstrap.min v3