1

Tengo la siguiente table:

$('.listado_volumen_negocio > tr').remove();
var listado_volumen_negocio = $('.listado_volumen_negocio');
var response = {
  "data": [{
      "Nivel_Codigo": 1,
      "Nombre": "Juan",
      "VNIndividual": 4,
      "VNRed": 7,
      "Titulo": "10"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    }
  ]
};
$.each(response.data, function(index, value) {
  $('<tr/>')
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nivel_Codigo + "</p>" + "<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nombre + "</p>"))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
    .appendTo(listado_volumen_negocio);
});


function moneda(any) {
  return "$" + any;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card data-table nueva-table freeze-table">
  <table class="table">
    <thead>
      <tr>
        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</thd>
          <th colspan="2">Volumen de negocio</th>
          <th rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
      </tr>
      <tr>
        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</th>
      </tr>
    </thead>
    <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
    </tbody>
  </table>
</div>

el tbody lo lleno dinamicamente.

Visualmente queda de esta forma:

introducir la descripción de la imagen aquí

Pero al seguir bajando en la tabla el encabezado se pierde y quiero que mientras vaya bajando la tabla el encabezado siga el registro para no perderlo.

1 respuesta 1

1

Puedes lograrlo apliqué los siguientes cambios:

  1. Para dejar algo fijo usa css, mediante position: fixed que hace que el posicionamiento sea absoluto y top: 0 que nos pone en la parte superior
  2. Utiliza el evento window.onscroll para detectar el movimiento del ratón
  3. Usa la propiedad window.pageYOffset para saber el desplazamiento vertical
  4. Obten el elemento html del encabezado usando document.getElementById("myHeader").
  5. obten la posición vertical del encabezado mediante la propiedad offsetTop.
  6. Agrega y quita la clase de css que deja el encabezado fijo mediante el uso de elementoweb.classList.add("nombre de la clase"); y eleementoweb.classList.remove("nombre de la clase") respectivamente.
  7. Para mejorar la apariencia, y como en tu caso usas una tabla, duplicamos el encabezado pero lo ponemos invisible para que no se descuadren las posiciones de la demás tabla.

//$('.listado_volumen_negocio > tr').remove();
var listado_volumen_negocio = $('.listado_volumen_negocio');
var response = {
  "data": [{
      "Nivel_Codigo": 1,
      "Nombre": "Juan",
      "VNIndividual": 4,
      "VNRed": 7,
      "Titulo": "10"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    }
  ]
};
$.each(response.data, function(index, value) {
  $('<tr>')
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nivel_Codigo + "</p>" + "<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nombre + "</p>"))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
    .appendTo(listado_volumen_negocio);
});


function moneda(any) {
  return "$" + any;
}



/////////////// header ////////////
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {
  myFunction()
};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");

  } else {
    header.classList.remove("sticky");

  }
}
/* estilo del encabezado */

.header {
  background: #fff;
  color: #000;
}


/* Contenido */

.content {
  padding: 10px;
}


/* esta clase se agrega con js */

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.tdoculto {
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card data-table nueva-table freeze-table">
  <table class="table">
    <thead class="header" id="myHeader">
      <tr>
        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</th>
        <th colspan="2">Volumen de negocio</th>
        <th rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
      </tr>
      <tr>
        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</td>
      </tr>
    </thead>
    <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
      <tr class="tdoculto">
        <td rowspan="2" style="font-size: 11px;">Nombre</td>
        <td colspan="2">Volumen de negocio</td>
        <td rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</td>
      </tr>
      <tr class="tdoculto">
        <td class="nuevo-td" style="font-size: 11px;">Individual</td>
        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</td>
      </tr>
    </tbody>
  </table>
</div>

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.