0

quiero hacer cambios sobre las etiquetas "Show" , "Entries" y "Search" y no se como hacerlo. Por favor me podrían ayudar para saber como cambiar en el archivo CSS el color de esas etiquetas, el texto y si es posible poner de fondo un color de fondo de toda esa fila? Estoy usando para el diseño de la tabla: https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js

Print de las etiquetas que quiero cambiar el color

$(document).ready(function() {

  $('#userList').DataTable();
});
body {
  background: url(http://xxxxxxxxx/images/fondo.jpg) no-repeat center center fixed;
  background-size: cover;
}

table tbody {
  color: black;
  background-color: white;
}
<!-- FRAMEWORK BOOTSTRAP para el estilo de la pagina-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Los iconos tipo Solid de Fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<!-- Nuestro css-->
<link rel="stylesheet" type="text/css" href="../static/css/user-form.css" th:href="@{../static/css/user-form.css}">

<!-- DATA TABLE -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"> -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">


</head>

<body>
  <br>
  <div class="table-responsive">
    <table id="userList" class="table table-bordered table-hover table-striped table-condensed">
      <thead class="thead-light">
        <tr>
          <th scope="col"># Venta</th>
          <th scope="col">Fecha</th>
          <th scope="col">Producto</th>
          <th scope="col">Cantidad</th>
          <th scope="col">Precio unitario</th>
          <th scope="col">Total</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>10/10/2021 10:10:10</td>
          <td>Empanadas Arabes por Docena</td>
          <td>2</td>
          <td>$ 600</td>
          <td>$ 1200</td>
          <td>
            <a href="#"><i class="fas fa-edit"></i></a>
          </td>
        </tr>
        <tr>
          <th scope="row">1</th>
          <td>10/10/2021 10:10:10</td>
          <td>Chipas 1Kilo</td>
          <td>3</td>
          <td>$ 650</td>
          <td>$ 1950</td>
          <td>
            <a href="#"><i class="fas fa-edit"></i></a>
          </td>
          <tr>
            <th scope="row">2</th>
            <td>12/10/2021 10:10:10</td>
            <td>Chipas 1Kilo</td>
            <td>2</td>
            <td>$ 650</td>
            <td>$ 1300</td>
            <td>
              <a href="#"><i class="fas fa-edit"></i></a>
            </td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>21/10/2021 10:10:10</td>
            <td>Emp. Arabe</td>
            <td>1</td>
            <td>$ 600</td>
            <td>$ 600</td>
            <td>
              <a href="#"><i class="fas fa-edit"></i></a>
            </td>
          </tr>
      </tbody>
    </table>
  </div>

Agrego el codigo completo para mayor comprensión del caso, por favor si pueden revisarlo estaria muy agradecido para poder modificar las etiquetas que les comente en la imagen.

4
  • 3
    Añade tu codigo aqui por favor, para que podamos ayudarte.
    – Lilibeth
    Commented el 24 sept. 2021 a las 13:41
  • @LilibethQ perdon la omisión del codigo. Ahi lo agregue a la consulta. Igualmente es muy básico, probé con varias formas, pero la verdad que no se me ocurrió ninguna valida. Aclaro que soy novato en programación de paginas WEB. Muchas gracias por cualquier ayuda o documentación que me pueda servir con este tema. Salu2.
    – Aiuda
    Commented el 24 sept. 2021 a las 18:57
  • 1
    falta informacion, no puedo reproducir tu codigo
    – Lilibeth
    Commented el 24 sept. 2021 a las 19:09
  • Buen día @LilibethQ agregue el código completo para que se puede reproducir. Desde ya muchas gracias por la colaboración!
    – Aiuda
    Commented el 26 sept. 2021 a las 15:15

2 respuestas 2

0

Guarda un archivo en tu carpeta

dataTables.js https://drive.google.com/file/d/165iY7VGSlTyvB2ErlPG3W6GEesdH9rtR/view?usp=sharing

Crea la conexión con el archivo en tu HTML

   <script src="dataTable.js"></script>

Lo que hice fue tomar el código js que estabas utilizando lo descargue y busqué el texto Entries (que se ubica en la linea 3339) y añadí

        sLengthMenu: "<p style='background-color:blue'>Show _MENU_ entries</p>",

añadí un un tag p con le añadí un style como en HTML. así que ahi puedes añadir las características css que necesites mientras esté dentro de la etiqueta.

Por otra parte, a pocas líneas puedes conseguir el texto de SEARCH para añadirle las características que necesites.

        sSearch: "<p style='background-color:blue'>Search:</p>",
1
  • 1
    Muchas gracias! Pude personalizar la pagina con tu ayuda! Saludos!
    – Aiuda
    Commented el 27 sept. 2021 a las 18:27
0

Para cambiar el idioma bastaría con añadir la propiedad language a tu datatable.

$('#userList').DataTable({
    "language": {
      "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
    }
  });

En caso de que quieras cambiar el texto y no te sirva con la traducción puedes revisar la documentación de datatables que viene con varios ejemplos: https://datatables.net/examples/basic_init/language.html

Y por último si quieres cambiar los estilos con el css te recomiendo que revises las clases que añade por detrás el datatables desde el navegador, pegues esas clases en tu css y añadas a tus nuevas propiedades el !important;

1
  • Gracias Jaime. Tengo en cuenta tu sugerencia para personalizar la tabla. Saludos!
    – Aiuda
    Commented el 27 sept. 2021 a las 18:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.