Jquery datatable in listview is not working

Question

Here is my code.

the output is "No data available in table". I really appreciate and thanks it in advance. I tried to put datatable code in Layout template of listview as well.

   <table id="example" class="display">
    <thead>
        <tr>
            all columns 
        </tr>
    </thead>
    <tfoot>
        <tr>
           all columns
        </tr>
    </tfoot>
    <tbody>

        <asp:ListView ID="lstfinance" runat="server">
            <LayoutTemplate>
                <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>Charde Marshall</td>
                    <td>Regional Director</td>
                    <td>San Francisco</td>
                    <td>36</td>
                    <td>2008/10/16</td>
                    <td>$470,600</td>

                </tr>
            </ItemTemplate>
        </asp:ListView>
    </tbody>
</table>
<script>
    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>

Answer 1

Your code is not working because it is not data bound, so it is empty. Here is a solution that will help you until its databound

so in code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        lstfinance.DataBind();
    }

And in the content page:

<table id="example" class="display">
    <thead>
        <tr>
           <th>Name</th>
           <th>Position</th>
            <th>City</th>
            <th>Age</th>
            <th>Start</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
           <th>Name</th>
           <th>Position</th>
            <th>City</th>
            <th>Age</th>
            <th>Start</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>

        <asp:ListView ID="lstfinance" runat="server">
            <LayoutTemplate>
                <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
            </LayoutTemplate>


            <EmptyDataTemplate>
                  <tr>
                    <td>Charde Marshall</td>
                    <td>Regional Director</td>
                    <td>San Francisco</td>
                    <td>36</td>
                    <td>2008/10/16</td>
                    <td>$470,600</td>
                </tr>
            </EmptyDataTemplate>


            <ItemTemplate>
                  <tr>
                    <td>Charde Marshall</td>
                    <td>Regional Director</td>
                    <td>San Francisco</td>
                    <td>36</td>
                    <td>2008/10/16</td>
                    <td>$470,600</td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
    </tbody>
</table>