Mount Datatables with Repeater

Question

Mount Datatables with Repeater

Asked 10 years, 3 months ago

Viewed 492 times

4

I’m riding a DataTables jQuery with Peater ASP.NET C#. What am I doing wrong?

I’ve been using the code.

<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="rptMeusDados" runat="server">
                <HeaderTemplate>
                    <table id="example" class="table table-striped table-bordered dataTable" role="grid">
                        <thead>
                            <tr>
                                <th>IDCAL</th>
                                <th>IDVerificacao</th>
                                <th>Pergunta</th>
                                <th>IDVerificacaoCliente</th>
                                <th>Alterar</th>
                            </tr>
                        </thead>
                </HeaderTemplate>
                <ItemTemplate>
                    <tbody>
                        <tr>
                            <td><%#DataBinder.Eval(Container.DataItem, "IDCAL")%></td>
                            <td><%#DataBinder.Eval(Container.DataItem, "IDVerificacao")%></td>
                            <td><%#DataBinder.Eval(Container.DataItem, "Pergunta")%></td>
                            <td><%#DataBinder.Eval(Container.DataItem, "IDVerificacaoCliente")%></td>
                            <td>
                                <asp:LinkButton ID="LinkButton1" runat="server"> linkButton</asp:LinkButton></td>
                        </tr>
                    </tbody>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </form>
    <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/js/jquery.js"></script>
    <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/js/jquery-ui.js"></script>
    <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#example').DataTable(
                         {
                             "columnDefs": [
                         {
                             "targets": [4],
                             "orderable": false,
                             "searchable": false,
                             "sortable": false
                         }
                             ],
                             "lengthMenu": [[10, 20, 50, -1], [10, 25, 50, "Tudo"]],
                             "language": {
                                 "zeroRecords": 'Nada foi encontrado',
                                 "search": 'Buscar:',
                                 "processing": 'Processando...',
                                 "paginate": {
                                     "next": 'Próxima',
                                     "previous": 'Anterior'
                                 },
                                 "lengthMenu": '_MENU_ linhas por página.',
                                 "info": 'Página _PAGE_ de _PAGES_',
                                 "infoFiltered": '(Filtrando a parti de entradas totais _MAX_)'
                             }



                         });

        });
    </script>
</body>
</html>

Any idea how to fix this?

2 answers

1

James Thank you so much for the reply,

My problem wasn’t syntax,

I found that the new visual studio was in a lot of error, being still in the testing phase. More discover that the code below works perfectly.

Follows the code.

<asp:Repeater ID="rptMeusDados" runat="server">
        <HeaderTemplate>
            <table id="example" class="cell-border">
                <thead>
                    <tr style="background-color: #748455;">
                        <th>
                            CalculoPrazo
                        </th>
                        <th>
                            Prazo
                        </th>
                        <th>
                            IDAcao
                        </th>
                        <th>
                            IDVerificacao
                        </th>
                        <th>
                            IDCAL
                        </th>
                        <th>
                            IDCALCliente
                        </th>
                        <th>
                            Descricao
                        </th>
                        <th>
                            Acao
                        </th>
                        <th>
                            IDVerificacaoCliente
                        </th>
                        <th>
                            OcultarReagendamento
                        </th>
                        <th>
                            StatusVerificacao
                        </th>
                        <th>
                            Pergunta
                        </th>
                        <th>
                        </th>
                        <td>
                        </td>
                    </tr>
                </thead>
        </HeaderTemplate>
        <ItemTemplate>
            <tr style="background: #FFFFFF;">
                <td>
                    <asp:Label ID="lbGrupoPrazo" runat="server" Text='<%# Bind("CalculoPrazo") %>'></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lbPrazo" runat="server" Text='<%# Eval("Prazo") %>' />
                </td>
                <td>
                    <asp:Label ID="lbIDAcao" runat="server" Text='<%# Eval("IDAcao") %>' Visible="false" />
                </td>
                <td>
                    <asp:Label ID="lbIDVerificacao" runat="server" Text='<%# Eval("IDVerificacao") %>'
                        Visible="false" />
                </td>
                <td>
                    <asp:Label ID="lbIDCAL" runat="server" Text='<%# Eval("IDCAL") %>' Visible="false" />
                </td>
                <td>
                    <asp:Label ID="lbIDCALCliente" runat="server" Text='<%# Eval("IDCALCliente") %>'
                        Visible="false" />
                </td>
                <td>
                    <asp:Label ID="lbCalCliente" runat="server" Text='<%# Eval("Descricao") %>' />
                </td>
                <td>
                    <asp:Label ID="lbAcao" runat="server" Text='<%# Eval("Acao") %>' Visible="false" />
                </td>
                <td>
                    <asp:Label ID="lbIDVerificacaoCliente" runat="server" Text='<%# Eval("IDVerificacaoCliente") %>'
                        Visible="false" />
                </td>
                <td>
                    <asp:Label ID="lbOcultarReagendamento" runat="server" Text='<%# Eval("OcultarReagendamento") %>'
                        Visible="false" />
                </td>
                <td>
                    <asp:Label ID="lbStatusVerificacao" runat="server" Text='<%# Bind("StatusVerificacao") %>'></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lbVerificacao" runat="server" Text='<%# Eval("Pergunta") %>' />
                </td>
                <td>
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="lbAlterar_Click">[Alterar]</asp:LinkButton>
                </td>
                <td>
                    <asp:LinkButton ID="LinkButton2" runat="server" OnClick="lbConclui_Click" Style="float: left">[Concluir]</asp:LinkButton>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
</div>
</form>
<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="js/modal.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#example').dataTable({
            "lengthMenu": [[10, 20, 50, -1], [10, 25, 50, "Tudo"]],
            "language": {
                "zeroRecords": 'Nada foi encontrado',
                "search": 'Buscar:',
                "processing": 'Processando...',
                "paginate": {
                    "next": 'Próxima',
                    "previous": 'Anterior'
                },
                "lengthMenu": '_MENU_ linhas por página.',
                "info": 'Página _PAGE_ de _PAGES_',
                "infoFiltered": '(Filtrado a parti de _MAX_ entradas totais)',
                "infoEmpty": "Mostrando 0 de 0 de 0 entradas."
            },
            "columnDefs": [
            {
                "targets": [12, 13],
                "orderable": false,
                "searchable": false
            },
            {
                "targets": [0, 2, 3, 4, 5, 7, 8, 9],
                "visible": false
            }
            ]
        });
    });
</script>

Browser other questions tagged jquery asp.net

You are not signed in. Login or sign up in order to post.

by Tiago César Oliveira • **2,855** points · Answer 1 · 2014-07-16T12:45:01+00:00

You are very attached to the component syntax. This can be solved with a simple link.

Instead of

<td>
    <asp:LinkButton ID="LinkButton1" runat="server"> linkButton</asp:LinkButton>
</td>

Use:

<td>
    <a href="edita.aspx?id=<%#DataBinder.Eval(Container.DataItem, "IDCAL")%>">Editar</a>
</td>

In that case, I’m guessing IDCAL is the ID by which you will search for the item to be edited, on this supposed page edita.aspx.