jQuery DataTable не работает с ListVew ASP.NET

Question

Я пытаюсь научиться использовать списочные представления вместо повторителей все время с таблицами данных Jquery для большей функциональности, но мне трудно пытаться связать его с 0 значениями в базе данных

Вот мой код

<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>

и в коде я связываю его с datatable, даже если он пустой из базы данных, должно появиться сообщение jquery, как на ретрансляторе

private void BindArtigos(int id)
{
    lstArtigos.DataSource = Requisicao.GetAll(id); 
    lstArtigos.DataBind();
}

Также нет проблем с плагином Jquery, потому что у меня был ретранслятор до написания списка и он работал нормально

EDIT: Добавлены пропущенные столбцы в заголовке таблицы, все еще ничего не отображается и нет ошибок в консоли

Answer 1

 <td>
            <asp:Label ID="lblIdArtigo" Text="<%# Eval("IdArtigo") %>"></asp:Label></td>

заменить эту строку на

 <td>
            <asp:Label ID="lblIdArtigo" Text='<%# Eval("IdArtigo") %>'></asp:Label></td>

и проверьте, показывает ли он данные

проверить эту статью

https://www.c-sharpcorner.com/UploadFile/9de7db/listview-control-in-Asp-Net/

Answer 2

Проблема в том, что в теле таблицы больше ячеек, чем в thead. Они должны быть одинаковыми.

<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>