Error Using DataTable.js and Entity

Question

When using the jquery DataTable.js plugin with the Entity framework, I'm getting the following error attached. Already testing without the data coming from Entity and worked.

Another problem I'm encountering and when I'm going to use this jquery feature in DataTable.js I need to make the declaration on the daughter pages, when I declare on the parent page the daughters page does not recognize.

Daughter Page

<h2>Lista de Cidades</h2>

<br />
@if (Model.Message != null)
{
    <div class="alert alert-info alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="close">
            <span aria-hidden="true">&times;</span>
        </button>
        @Model.Message
    </div>
}
<a asp-page="Create" class="btn btn-primary">Criar nova Cidade</a>
@if (Model.Cidades.Count() > 0)
{
    <form method="post">
        <div>
            <br />
            <table class="table table-condensed table-hover" id="minhaTabela">
                <tr>
                    <th>
                        @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Nome)
                    </th>
                    <th>
                        @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Estado)
                    </th>

                    <th></th>
                </tr>
                @foreach (var item in Model.Cidades)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(m => item.Nome)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Estado)
                        </td>

                        <td>
                            <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-success">Editar</a>

                            <button asp-page-handler="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm">Excluir</button>
                        </td>
                    </tr>

                }
            </table>
        </div>
    </form>
    <script src="~/lib/jquery/dist/jquery-3.2.1.min.js"></script>

    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#minhaTabela').DataTable({
                "language": {
                    "lengthMenu": "Mostrando _MENU_ registros por página",
                    "zeroRecords": "Nada encontrado",
                    "info": "Mostrando página _PAGE_ de _PAGES_",
                    "infoEmpty": "Nenhum registro disponível",
                    "infoFiltered": "(filtrado de _MAX_ registros no total)"
                }
            });
        });
    </script>

}
else
{
    <p>Nenhuma cidade encontrada.</p>
}

Declaration on parent page:

<environment include="Development">

    <script src="~/lib/jquery/dist/jquery-3.2.1.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/jquery-mask-plugin/src/jquery.mask.js" type="text/javascript" asp-append-version="true"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
   <script src="~/lib/jquery-mask-plugin/src/jquery.mask.js" type="text/javascript" asp-append-version="true"></script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)

What to do in this situation?

Answer 1

 <a asp-page="Create" class="btn btn-primary">Criar nova Cidade</a> @if (Model.Cidades.Count() > 0) { <form method="post"> <div> <br /> <table class="table table-condensed table-hover" id="minhaTabela"> <thead> <tr> <th> @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Nome) </th> <th> @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Estado) </th> <th></th> </tr> <thead> <tbody> @foreach (var item in Model.Cidades) { <tr> <td> @Html.DisplayFor(m => item.Nome) </td> <td> @Html.DisplayFor(m => item.Estado) </td> <td> <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-success">Editar</a> <button asp-page-handler="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm">Excluir</button> </td> </tr> } </tbody> </table> </div> </form> <script src="~/lib/jquery/dist/jquery-3.2.1.min.js"></script> <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> } 

for that error try to set thead and tbody in the html