{% extends 'gestion/base.html' %}
{% load static %}

{% block contents %}
<h3>Élèves de {{ n }} qui doivent plus de trois livres</h3>
<p>
  Liste imprimée le {{ date }}
</p>
<table class="multi">
  {% for e, d in eleves.items %}
  <tr>
    <td>{{ e.classe.libelle }}</td>
    <td>{{ e.NomPrenomEleve }}</td>
    <td>{{ d }}</td>
  </tr>
  {% endfor %}
</table>

<script>
  /* recopié depuis https://jsfiddle.net/u6359y0w/3/ */
  /* d'après une réponse à https://stackoverflow.com/questions/31782272/css-multi-column-for-tables */
  $.fn.extend({
      multipleColumns: function(numCols) {
          var listTableRows = $('.multi').find('tbody tr'); /* get the list data */
          var numlistTableRows = listTableRows.length;        
          var numItemsPerCol = Math.ceil(numlistTableRows / numCols); /* divide by the number of columns requires */
          var currentColNum = 1,
              currentRowNumber = 1,
              returnHtml = '',
              i = 0;
        
          for (i = 1; i <= numCols; i++) {
              $('.multi').parent().append('<table class="column table-column-' + i + '"><thead>  <tr><th>Classe</th><th>Nom, prénom</th><th>Doit</th></tr></thead></table>');
          }
        
          $.each(listTableRows, function(i, v) {
              if (currentRowNumber <= numItemsPerCol) {                
                  currentRowNumber++;                
              } else {
                  currentColNum++;
                  currentRowNumber = 2;
              }
              $('.table-column-' + currentColNum).append(v);
          });
          $('.multi').remove(); /*clean previous content */
	  
      }
  });
  
  $('.multi').multipleColumns(3);
</script>

{% endblock %}
