0

Existe alguma forma fácil de alterar o css de um datatables? No meu caso, eu gostaria de alterar a cor da paginação dele, gostaria de colocar um azul mais escuro. Acredito que ele esteja pegando alguma classe primary do bootstrap pelo tom de azul, mas não tenho certeza.

inserir a descrição da imagem aqui

Segue abaixo o meu código javascript

$ ("#tabela_mensagens").DataTable
    ({
        responsive: true,
        pagingType: "full_numbers",
        pageLength: 50,
        language:
        {
            url: "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Portuguese-Brasil.json"
        },
        ajax:
        {
            url: "../ajax/mensagens.php",
            dataSrc: "mensagens",
            data:
            {
                acao : "buscar"
            }
        },
        order: [[ 2, "asc" ]],
        columns:
        [
            // 0
            {
                render: function (data, type, full, meta)
                {
                    var html = "<button title='Opções desta mensagem' id='botao_agrupador' type='button' class='btn btn-sm btn-dark dropdown' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' style='background-color: #114287;'> <i class='fas fa-cogs'> </i> </button>" +
                        "<div class='dropdown-menu' aria-labelledby='botao_agrupador'>" +

                            // editar
                            "<a class='dropdown-item' data-toggle='modal' href='#modal_formulario_mensagens_pre_definidas' data-backdrop='static' data-id_mensagem_pre_definida='" + full.id_mensagem_pre_definida + "' data-numero_mensagem_pre_definida='" + full.numero + "' data-descricao_mensagem_pre_definida='" + full.descricao + "' data-sigla_mensagem_pre_definida='" + full.sigla + "'> <i class='fa fa-edit'> </i> Editar </a>" +

                            // apagar
                            "<a class='dropdown-item' data-toggle='modal' href='#modal_apagar_registro' data-backdrop='static' data-id='" + full.id_mensagem_pre_definida + "' data-descricao='" + full.descricao + "' data-acao='mensagens_pre_definidas'> <i class='fa fa-trash'> </i> Apagar </a>" +
                    "</div>";

                    return (html);
                }
            },
            // 1
            {data: "id_mensagem_pre_definida"},
            // 2
            {data: "numero"},
            // 3
            {data: "descricao"},
            // 4
            {data: "sigla"},
            // 5
            {data: "data_cadastro"}
        ],
        initComplete: function ()
        {
            oculta_modal_carregando ();
        }
    });

1 Resposta 1

0

Na verdade não é bem a primary, pois ele não usa bg-primary no elemento. O que ele está fazendo é que o link que tenha a classe .active no pai fica com fundo azul

inserir a descrição da imagem aqui

Então basta trocar ali para a cor que vc quiser tipo

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: navy;
    border-color: navy;
}

Vai resultar nisso

inserir a descrição da imagem aqui

4
  • Muitíssimo obrigado, era exatamente o que eu precisava, achava que eu pudesse adicionar algum código css dentro do próprio javascript do datatables, mas não encontrei nada a respeito disso. 31/01/2020 às 13:16
  • @MateusMattieloNickhorn legal que resolveu ai. Se vc acredita que o problema foi resolvido considere marcar a resposta como aceita, é só clicar nesse ícone ✔️ abaixo das setinhas ao lado da resposta. Valeu a força e sucesso ai! []´s
    – hugocsl
    31/01/2020 às 13:40
  • 1
    Não sabia disso, considere feito 7/02/2020 às 14:05
  • @MateusMattieloNickhorn valeu a força meu caro!
    – hugocsl
    7/02/2020 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .