ScrollX using aspRepeater

carolcruz

When I use asp Repeater, the second iteration doesnt come with the table properties like scrollX.
I already tried this solution with no success.
Please, help me!

          var table = $('#dadosCadastrais02').DataTable({
             searching: false,
             info: false,
             scrollX: true,
             "scrollX": true,
             paging: false,
             ordering: false,

         });
     });

The Asp.Net Code:

       <asp:Repeater ID="rptValidadorD02" runat="server"  >
                     <HeaderTemplate>
                             <table id="dadosCadastrais02" class="table table-striped table-bordered" style="width:100%" >
                 <h5>DADOS CADASTRAIS</h5>
        <thead>
        <tr>
            <th>Status Validação</th>
            <th>Tipo de Registro</th>
            <th>Seqüencial</th>
            <th>Tipo da pessoa</th>
            <th>Tipo do proponente</th>
            <th>CPF/CNPJ</th>
            <th>Tipo CPF</th>
            <th>Nacionalidade</th>
            <th>Nome</th>
        </tr>
    </thead> 

  <tbody>   </HeaderTemplate><ItemTemplate> 
       <tr>
            <td><%# DataBinder.Eval(Container.DataItem,"status02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipoderegistro02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"sequencial02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipodapessoa02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipodoproponente02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"cpfCnpj02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipocpf02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"nacionalidade02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"nome02") %></td>

        </tr>
     </ItemTemplate> 
    <FooterTemplate>                            
    </tbody>
 </table></FooterTemplate>


                        </asp:Repeater>

colin

It looks like your </HeaderTemplate> is inside the <tbody> - I'm not familiar with ASP but that looks like bad HTML formatting to me. Ditto the <FooterTemplate> is within the </tbody>,

Colin

carolcruz

Hi @colin that´s is the correct structure.
We need to do it this way because <tbody> can´t repeat.

See that: https://stackoverflow.com/questions/38131185/bootstrap-datatable-javascript-doesnt-work-in-asp-net-repeater

allan

Can you show us what your rendered HTML looks like please?

Allan

carolcruz

@allan here it is.
I couldn´t attach it here.

Pay attention in "Dados Cadastrais" section.
The first one has ScrollX property ok. The second one didn´t pickup any JS config.

allan

Oh I see - you're HTML isn't valid as you'll have two table elements with the same id. An id must be unique in the document.

Remove the id="dadosCadastrais02" and you could initialise the DataTable using:

$('table.table').DataTable({

If you have other tables on the page which you don't want to be DataTables, then add a class to the tables you do want to enhance and select that instead.

Allan