jQuery DataTable not working with ListVew ASP.NET - asp.net

Question

I'm trying to learn to use listviews instead repeaters all the time with Jquery datatables for more functionality but I'm having a hard time trying to bind it with 0 values in database
Here's my code
<asp:ListView ID="lstArtigos" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table id="tblArtigos" class="table table-bordered dataTable">
<thead class="thead-dark">
<tr>
<th style="width: 20px;">ID</th>
<th style="width: 120px">Ref. Cliente</th>
<th style="width: 100px">Ref. Interna</th>
<th style="width: 100px">Nome</th>
<th style="width: 100px">Estado</th>
<th style="width: 100px">Logística</th>
<th style="width: 100px">Info Logística</th>
<th style="width: 100px">Data Criação</th>
<th style="width: 10px;">Editar</th>
<th style="width: 10px;">Validar</th>
<th style="width: 10px;">Rejeitar</th>
</tr>
</thead>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:Label ID="lblIdArtigo" Text="<%# Eval("IdArtigo") %>"></asp:Label></td>
<td>
<asp:Label ID="lblRefCliente" Text="<%# Eval("ReferenciaCliente") %>"></asp:Label></td>
<td>
<asp:Label ID="lblRefInterna" Text="<%# Eval("ReferenciaInterna") %>"></asp:Label></td>
<td>
<asp:Label ID="lblNome" Text="<%# Eval("Nome") %>"></asp:Label></td>
<td>
<asp:Label ID="lblEstado" Text="<%# Eval("EstadoArtigo") %>"></asp:Label></td>
<td>
<asp:Label ID="lblAprovadoLogistica" Text="<%# Eval("AprovadoLogistica") %>"></asp:Label></td>
<td>
<asp:Label ID="lblInformacaoLogistica" Text="<%# Eval("InformacaoLogistica") %>"></asp:Label></td>
<td>
<asp:Label ID="lblDataCriacao" Text="<%# Eval("DataCriacao") %>"></asp:Label></td>
<td class="text-center">
<asp:ImageButton ImageUrl="/Images/Buttons/edit.png" CssClass="" Width="25" runat="server" />
</td>
<td class="text-center">
<asp:ImageButton ImageUrl="/Images/Buttons/success.png" CssClass="" Width="25" runat="server" />
</td>
<td class="text-center">
<asp:ImageButton ImageUrl="/Images/Buttons/x-button.png" CssClass="" Width="25" runat="server" />
</td>
</ItemTemplate>
</asp:ListView>
and in codebehind I bind it with datatable even if it comes empty from database it should appear the jquery message like it does on repeater
private void BindArtigos(int id)
{
lstArtigos.DataSource = Requisicao.GetAll(id);
lstArtigos.DataBind();
}
Also there is no problem with Jquery plugin cause I had a repeater before writing the listview and was working properly
EDIT:
Added the missing columns on table header, still shows nothing and no errors on console

Answer 1

The problem is that you have more cells in the body of the table that in the thead. They must be the same.
<thead class="thead-dark">
<tr>
<th style="width: 20px;">ID</th>
<th style="width: 120px">Ref. Cliente</th>
<th style="width: 100px">Ref. Interna</th>
<th style="width: 100px">Nome</th>
<th style="width: 100px">Logística</th>
<th style="width: 100px">Estado</th>
<th style="width: 10px;">Editar</th>
<th style="width: 10px;">Validar</th>
<th style="width: 10px;">Rejeitar</th>
//add these
<th># 1</th>
<th># 2</th>
</tr>
</thead>

Answer 2

<td>
<asp:Label ID="lblIdArtigo" Text="<%# Eval("IdArtigo") %>"></asp:Label></td>
replace this line with
<td>
<asp:Label ID="lblIdArtigo" Text='<%# Eval("IdArtigo") %>'></asp:Label></td>
and check if it shows data
check out this article
https://www.c-sharpcorner.com/UploadFile/9de7db/listview-control-in-Asp-Net/