jQuery DataTable not working with ListVew 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

VDWWD · Accepted Answer · 2019-01-05 15:01:58Z

2

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>

answered Jan 5, 2019 at 15:01

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jackal Over a year ago

I did fix this but it didn't change anything though

VDWWD Over a year ago

Then you have another issue, because if I try your code and add 2 th cells I get a DataTable (using the latest cdn versions)

Jackal Over a year ago

what do you bind the list with?

Jackal Over a year ago

I think i will just stick with repeater, i can't figure out what is wrong, even tried use cdn version

VDWWD Over a year ago

I binded just some random data.

Shubham · Accepted Answer · 2019-01-07 04:44:56Z

0

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

answered Jan 7, 2019 at 4:44

Shubham

3493 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery DataTable not working with ListVew ASP.NET

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related