Datatable bootstrap Options

Question

I have a table, I want it to have a scrollX, when it reaches a maximum size limit. the problem is that it is giving reboot error. Then I researched the saw, that the problem was that I was starting my table more than once. then I want a help of vcs, as I do so that these scrips below, stay in just one table initialization?

<table style="font-size:12px;" id="tableClientes" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Pessoa</th>
                        <th>Cód</th>
                        <th>Cadastro</th>
                        <th>Razão Social</th>
                        <th>Nome Fantasia</th>
                        <th>C.N.P.J</th>
                        <th>Insc. Estadual</th>
                        <th>Telefones</th>
                        <th>Sistemas</th>
                        <th>Contador</th>
                        <th>Consultor</th>
                        <th>Email</th>
                        <!---->
                        <th>Responsável</th>
                        <th>Celular</th>
                        <th>WhatsApp</th>
                        <th>N° Pcs</th>
                        <th>Servidor</th>
                        <th>Zona</th>

                        <th>Status</th>
                        <th>#</th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model != null)
                    {
                        foreach (var item in Model)
                        {
                            <tr>
                                <td>@Html.DisplayFor(modelItem => item.TipoPessoa)</td>
                                <td>@Html.DisplayFor(modelItem => item.Id)</td>
                                <td style="width:5%">@item.DataCadastro.ToString("dd/MM/yyyy")</td>
                                <td>@Html.DisplayFor(modelItem => item.RazaoSocial)</td>
                                <td>@Html.DisplayFor(modelItem => item.NomeFantasia)</td>
                                <td><span id="cnpj">@Html.DisplayFor(modelItem => item.Cnpj)</span></td>
                                <td>@Html.DisplayFor(modelItem => item.InscricaoEstadual)</td>
                                <td width="10%">@Html.DisplayFor(modelItem => item.TelefoneA)</td>
                                <td>
                                    @foreach (var sistema in item.TipoDeSistemas)
                                    {
                                        <p class="sistema" id="topp">@sistema.Descricao</p>
                                    }
                                </td>

                                @if (item.IdContador != null)
                                {
                                    <td>@Html.DisplayFor(modelItem => item.Contador.NomeFantasia)</td>
                                }
                                else
                                {
                                    <td>Nenhum Contado Cadastrado</td>
                                }
                                @if (item.IdParceiroComercial != null)
                                {
                                    <td>@Html.DisplayFor(modelItem => item.ParceiroComercial.NomeFantasia)</td>
                                }
                                else
                                {
                                    <td>Nenhum Consultor Cadastrado</td>
                                }
                                <td>@Html.DisplayFor(modelItem => item.Email)</td>

                                <td>@Html.DisplayFor(modelItem => item.Responsavel)</td>
                                <td>@Html.DisplayFor(modelItem => item.Celular)</td>
                                <td>@Html.DisplayFor(modelItem => item.WhatsApp)</td>
                                <td>@Html.DisplayFor(modelItem => item.NumeroDePcs)</td>
                                <td>@Html.DisplayFor(modelItem => item.Servidor)</td>
                                <td>@Html.DisplayFor(modelItem => item.Zona)</td>

                                @if (item.StatusCliente == Smc.Dominio.Model.StatusCliente.Bloqueado || item.StatusCliente == Smc.Dominio.Model.StatusCliente.Cancelado || item.StatusCliente == Smc.Dominio.Model.StatusCliente.Inativo)
                                {
                                    <td style="color:#ff0e0f;text-align:center">@Html.DisplayFor(modelItem => item.StatusCliente)</td>
                                }
                                else
                                {
                                    <td style="color:#00ff21;text-align:center">@Html.DisplayFor(modelItem => item.StatusCliente)</td>
                                }


                                <th style="width:5%; text-align:center">
                                    <a href="@Url.Action("Editar","ClienteEmpresa",new { id=item.Id })" class="load"><i class="fa fa-eye text-success"></i></a>
                                </th>
                            </tr>
                        }
                    }
                    else
                    {
                        <tr>
                            <td colspan="11">Nenhum Dado Cadastrado</td>
                        </tr>
                    }
                </tbody>

            </table>

these here are the scripts I’m using. This one to hide some columns:

<script>
    $('#tableClientes').dataTable({
        "columnDefs": [
            { "visible": false, "targets": 0 },
            { "visible": false, "targets": 1 },
            { "visible": false, "targets": 2 },
            { "visible": false, "targets": 3 },
            { "visible": false, "targets": 9 },
            { "visible": false, "targets": 10 },
            { "visible": false, "targets": 11 },
            { "visible": false, "targets": 12 },
            { "visible": false, "targets": 13 },
            { "visible": false, "targets": 14 },
            { "visible": false, "targets": 15 },
            { "visible": false, "targets": 16 },
            { "visible": false, "targets": 17 },
        ]
    });

</script>

That other one for the buttons.

<script>
    $(document).ready(function () {
        var table = $('#tableClientes').DataTable();

        new $.fn.dataTable.Buttons(table, {
            buttons: [
                {
                    text: 'Visibilidade',
                    extend: 'colvis', fixedColumns: {
                        leftColumns: 2
                    }
                },
            ]
        });
        table.buttons(0, null).container().prependTo(
            table.table().container()
        );

        table.destroy();
    });

</script>

And this one, this is what I was trying to use for Scrollx, but only from the error, when I use it, but when the other codes above work perfectly, I would like someone to show me, how I could do these two scripts, and just a initialization of my table.

<script>
    $(document).ready(function () {
        $('#tableClientes').DataTable({
            "scrollY": false,
            "scrollX": true
        });
    });
</script> 

Answer 1

Try to use the retrieve of Datatable

<script>
    $(document).ready(function () {
        $('#tableClientes').DataTable({
            retrieve: true,
            "scrollY": false,
            "scrollX": true
        });
    });
</script> 

There is even an example of on the plugin page very similar to yours: https://datatables.net/reference/option/retrieve