0

Estoy usando el plugin datatable de jquery

Nota: no hace falta ver todo el marcado HTML, agregue varias files a mi tabla con el objetivo de mostrar mas de un numero de pagina.

Solo estoy usando la funcionalidad de ordenado y filtro, por mi cuenta estoy estilizando el datatable, los link de paginacion, la tabla y los filtros.

El problema que tengo es que cuando hago click en un link de paginacion, los estilos que he agregado a los links de paginacion desaparecen.

He intentado usar !important para que mis estilos ganen en especificidad pero no funciona y deseo estilizar yo el datatable.

Aquí esta mi código, si hacen click en un enlace de paginacion o en los encabezados de las columnas, los estilos de mis enlaces de paginacion desaparecen.

¿Como puedo hacer que mis estilos puedan seguir aplicándose incluso cuando se da la situacion en la que se hace click en los enlaces de paginacion o en los encabezados de columna?

      body {
            display: flex;
            margin: 0;
            padding: 0;
            padding-left: 1rem;
            padding-right: 1rem;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #ffffff;
            font-family: san-serif;
        }

        .table-box {
            width: 890px;
            height: 400px;
            overflow-y: scroll;
            box-shadow: 0 10px 100px rgba(0, 0, 0, 0.5);
            margin-left: auto;
            margin-right: auto;
        }

        table {
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #005277;
            border-collapse: collapse;
        }

        tr th:nth-child(1) {
            backround-color: pink;
        }

        th {
            background-color: #1e305b;
            color: white;
        }

        th,
        td {
            padding: 10px;
        }

        thead {
            position: sticky;
            top: 0;
        }

        .news-section {
            display: grid;
            grid-template-rows: ""
        }

        .filter-controls-wrapper {
            margin-bottom: 16px;
            display: flex;
            justify-content: flex-end;
        }


        input[type="search"] {
            border: 1px solid transparent;
            border-radius: 2rem;
            padding-bottom: 5px;
            padding-left: 16px;
            padding-right: 16px;
            padding-top: 16px;
            padding-bottom: 16px;
            transition: 0.2s border-color ease-in-out;
        }

        * {
            font-family: 'Source Sans Pro', sans-serif;
        }

        label {
            font-size: 24px;
        }

        input[type="search"]:focus {
            border-color: navy;

        }


        /*PAgination here*/
        .label-page {
            width: 80px ;
            height: 25px ;
            margin: 0 10px ;
            border-radius: 999px ;
            background: crimson ;
            cursor: pointer;
            box-shadow:
                0 5px 5px -5px rgba(crimson, 0.15),
                0 10px 10px -5px rgba(crimson, 0.15),
                0 15px 15px -5px rgba(crimson, 0.15),
                0 20px 20px -5px rgba(crimson, 0.15) ;
            transition: 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            padding: 10px;
        }

        [id*="toggle-"]:hover{
            width: 120px;
        }

        .dataTables_paginate {
            margin-top: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dataTables_paginate span{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    <table id="news">
        <thead>
            <tr>
                <th>Titulo</th>
                <th>Opciones</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>
                    <a href="#"><span class="fa fa-edit"></span></a>
                    <a href="#"><span class="fa fa-eye-slash"></span></a>
                    <a href="#"><span class="fa fa-trash"></span></a>
                </td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>
                    <a href="#"><span class="fa fa-edit"></span></a>
                    <a href="#"><span class="fa fa-eye-slash"></span></a>
                    <a href="#"><span class="fa fa-trash"></span></a>
                </td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>55</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>6</td>
            </tr>

            <tr>
                <td>Tiger Nixon</td>
                <td>2</td>
            </tr>
        
        </tbody>
    </table>



<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
    <script>
        $(document).ready(function () {
            $.fn.DataTable.ext.pager.numbers_length = 5
            $('#news').DataTable({
                rowReorder: true,
                dom: '<<"filter-controls-wrapper"f><"table-box" t><"pagination-wrapper"p>>'
              
            });
            
            let paginationElements = document.querySelectorAll("#news_paginate > span .paginate_button");

            paginationElements.forEach(function (value, key, nodeList) {
                value.setAttribute("class", "label-page")
                value.setAttribute("id","toggle-" + key)
               
            })
            // window.filterControls.appendChild(window.filterOptions);
            // window.paginationControl.appendChild(window.paginationOptions);
        });
    </script>

2 respuestas 2

1

Parece que al repintarse la tabla los elementos HTML de la paginación pierden los identificadores (clase o id). En tu código estos identificadores se crean en el document.ready, aquí exactamente:

$(document).ready(function () {
        $.fn.DataTable.ext.pager.numbers_length = 5
        $('#news').DataTable({
            // ...              
        });

Prueba a añadir estos identificadores cada vez que la tabla se repinte. En la documentación de dataTable (DataTable event documentation) puedes encontrar el evento draw. Dale un intento:

$('#myTable').on( 'draw.dt', function () {
    alert( 'Table redrawn' );
} );
1

El problema es que al ejecutarse el evento order de DataTables este sobre escribe los cambios que tu realizaste por medio de CSS ya que aplica un nuevo pintado a la tabla al invocarse el evento order, es posible que esto ocurra con otros eventos como por ejemplo el evento search el cual también ejecuta un nuevo pintado sobre la tabla.

La solución a este problema es utilizar el método drawCallback que tal como lo podrás imaginar ejecuta una función después de que el evento draw se dispara, en este punto agregue el ciclo que tienes para la paginación para que este agregue el CSS a la misma después de ejecutarse el evento draw.

Nota: Es Probable que debas agregar más CSS en este evento según tus necesidades.

body {
            display: flex;
            margin: 0;
            padding: 0;
            padding-left: 1rem;
            padding-right: 1rem;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #ffffff;
            font-family: san-serif;
        }

        .table-box {
            width: 890px;
            height: 400px;
            overflow-y: scroll;
            box-shadow: 0 10px 100px rgba(0, 0, 0, 0.5);
            margin-left: auto;
            margin-right: auto;
        }

        table {
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #005277;
            border-collapse: collapse;
        }

        tr th:nth-child(1) {
            backround-color: pink;
        }

        th {
            background-color: #1e305b;
            color: white;
        }

        th,
        td {
            padding: 10px;
        }

        thead {
            position: sticky;
            top: 0;
        }

        .news-section {
            display: grid;
            grid-template-rows: ""
        }

        .filter-controls-wrapper {
            margin-bottom: 16px;
            display: flex;
            justify-content: flex-end;
        }


        input[type="search"] {
            border: 1px solid transparent;
            border-radius: 2rem;
            padding-bottom: 5px;
            padding-left: 16px;
            padding-right: 16px;
            padding-top: 16px;
            padding-bottom: 16px;
            transition: 0.2s border-color ease-in-out;
        }

        * {
            font-family: 'Source Sans Pro', sans-serif;
        }

        label {
            font-size: 24px;
        }

        input[type="search"]:focus {
            border-color: navy;

        }


        /*PAgination here*/
        .label-page {
            width: 80px ;
            height: 25px ;
            margin: 0 10px ;
            border-radius: 999px ;
            background: crimson ;
            cursor: pointer;
            box-shadow:
                0 5px 5px -5px rgba(crimson, 0.15),
                0 10px 10px -5px rgba(crimson, 0.15),
                0 15px 15px -5px rgba(crimson, 0.15),
                0 20px 20px -5px rgba(crimson, 0.15) ;
            transition: 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            padding: 10px;
        }

        [id*="toggle-"]:hover{
            width: 120px;
        }

        .dataTables_paginate {
            margin-top: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dataTables_paginate span{
            display: flex;
            justify-content: center;
            align-items: center;
        }
<table id="news">
  <thead>
    <tr>
      <th>Titulo</th>
      <th>Opciones</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>
        <a href="#"><span class="fa fa-edit"></span></a>
        <a href="#"><span class="fa fa-eye-slash"></span></a>
        <a href="#"><span class="fa fa-trash"></span></a>
      </td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>
        <a href="#"><span class="fa fa-edit"></span></a>
        <a href="#"><span class="fa fa-eye-slash"></span></a>
        <a href="#"><span class="fa fa-trash"></span></a>
      </td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>41</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>55</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>6</td>
    </tr>

    <tr>
      <td>Tiger Nixon</td>
      <td>2</td>
    </tr>

  </tbody>
</table>



<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<script>
  $(document).ready(function() {
    $.fn.DataTable.ext.pager.numbers_length = 5
    $('#news').DataTable({
      rowReorder: true,
      dom: '<<"filter-controls-wrapper"f><"table-box" t><"pagination-wrapper"p>>',
      "drawCallback": function(settings) {
        let paginationElements = document.querySelectorAll("#news_paginate > span .paginate_button");

        paginationElements.forEach(function(value, key, nodeList) {
          value.setAttribute("class", "label-page")
          value.setAttribute("id", "toggle-" + key)

        })
      }

    });

    let paginationElements = document.querySelectorAll("#news_paginate > span .paginate_button");

    paginationElements.forEach(function(value, key, nodeList) {
      value.setAttribute("class", "label-page")
      value.setAttribute("id", "toggle-" + key)

    })


    // window.filterControls.appendChild(window.filterOptions);
    // window.paginationControl.appendChild(window.paginationOptions);
  });

</script>

Saludos

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.