How to set the header of an html table with jquery?

Question

How to set the header of an html table with jquery?

Navigation

#1 by (0 votes)

1

I have the following 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>

the tbody filled it dynamically.

Visually it looks like this:

But as I continue to go down in the table the header is lost and I want that as long as the table goes down the header follows the record so as not to lose it.

javascript jquery html5

asked by JG_GJ 30.11.2018 в 03:09

source

1 answer

Filter by dates in datagridview c # with datetimerpicker and Mysql How can I put a callout in an annotation of the mapview swift 4

score 0 · Answer 1

You can achieve it I applied the following changes:

To leave something fixed use css, using position: fixed that makes the positioning absolute and top: 0 that puts us at the top

Use the window.onscroll event to detect mouse movement

Use the window.pageYOffset property to know the vertical offset

Get the html element of the header using document.getElementById("myHeader") .

get the vertical position of the header using the offsetTop property.

Adds and removes the css class that leaves the fixed header by using elementoweb.classList.add("nombre de la clase"); and eleementoweb.classList.remove("nombre de la clase") respectively.

To improve the appearance, and as in your case you use a table, we duplicate the header but we put it invisible so that the positions of the other table are not untied.

//$('.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>