Configure the padding of my DataTable (Bootstrap) headers via JavaScript and CSS

Navigation
0

I need to configure the padding of my DataTable (Bootstrap) headers through JavaScript and CSS because the arrows are getting too close to the header titles and getting cluttered when the columns are scaled. I tried to use JS, but I could not ...  Does anyone know how to help me? 

.align-right {
    text-align: right;
    /*max-width: 80px*/
}

.align-left {
    text-align: left;
    /*max-width: 80px*/
}

.align-center {
    text-align: center;
    /*max-width: 80px*/
}

table.center-header th {
    text-align: center;
}

table.dataTable thead span.sort-icon {
    display: inline-block;
    padding-left: 23px;
    width: 16px;
    height: 16px;
}

<table class="table table-hover table-bordered dataTable table-striped width-full center-header table-responsive" id="bancoGridDataTable">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Id)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PessoaViewModel.PessoaNatureza)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PessoaViewModel.PessoaJuridicaViewModel.RazaoSocial)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PessoaViewModel.PessoaJuridicaViewModel.NomeFantasia)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.CodigoBanco)
                    </th>
                    <th>
                        @Html.DisplayName("Ações")
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PessoaViewModel.PessoaNaturezaDescricao)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PessoaViewModel.PessoaJuridicaViewModel.RazaoSocial)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PessoaViewModel.PessoaJuridicaViewModel.NomeFantasia)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.CodigoBanco)
                    </td>

                    <td style="white-space: nowrap;">
                        <a asp-action="Edit" asp-route-id="@item.Id" title="Editar" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row">
                            <span class="icon-2x wb-edit"></span>
                        </a>
                        <a asp-action="Details" asp-route-id="@item.Id" title="Detalhes" class="btn btn-sm btn-icon btn-pure btn-default on-default footable-row-detail-row">
                            <span class="icon-2x wb-search"></span>
                        </a>
                        <a asp-action="Delete" asp-route-id="@item.Id" title="Excluir" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row">
                            <span class="icon-2x wb-trash"></span>
                        </a>
                        <button type="button" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row" title="Histórico" data-id="@item.Id" data-toggle="modal" data-target="#customerHistory" data-original-title="Histórico">
                            <span class="icon-2x wb-time"></span>
                        </button>

                    </td>
                </tr>
                }
            </tbody>
        </table>

 <script type="text/javascript">
        $('#bancoGridDataTable').DataTable({
            "columnDefs": [
                { className: "align-right", "targets": [4] },
                { className: "align-center", "targets": [5] },
                { className: "align-right", "targets": [0] },
                { className: "table.dataTable thead span.sort-icon", "targets": [0] }
            ],
            language: {
                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar",
                "searchPlaceholder": "Pesquise qualquer coisa",
                "oPaginate": {
                    "sNext": "Próximo",
                    "sPrevious": "Anterior",
                    "sFirst": "Primeiro",
                    "sLast": "Último"
                },
                "oAria": {
                    "sSortAscending": ": Ordenar colunas de forma ascendente",
                    "sSortDescending": ": Ordenar colunas de forma descendente"
                }
            }            
        });
    
asked by anonymous 01.05.2018 / 16:06

0 answers

Problem Composition Strong and Weak How to use a variable that represents the name of a Label to change its value?