C'est vraiment une chose délicate d'avoir un en-tête collant sur votre table. J'avais la même exigence mais avec asp: GridView et puis j'ai trouvé qu'il pensait vraiment avoir un en-tête collant sur gridview. Il existe de nombreuses solutions disponibles et il m'a fallu 3 jours pour essayer toutes les solutions mais aucune d'elles ne pouvait satisfaire.
Le problème principal auquel j'ai été confronté avec la plupart de ces solutions était le problème d'alignement. Lorsque vous essayez de faire flotter l'en-tête, l'alignement des cellules d'en-tête et des cellules du corps se déforme.
Avec certaines solutions, j'ai également eu un problème de chevauchement de l'en-tête sur les premières lignes du corps, ce qui fait que les lignes du corps sont cachées derrière l'en-tête flottant.
Alors maintenant, je devais mettre en œuvre ma propre logique pour y parvenir, même si je ne considère pas non plus cela comme une solution parfaite, mais cela pourrait également être utile pour quelqu'un,
Voici l'exemple de tableau.
<div class="table-holder">
<table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
<thead>
<tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
<tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
<tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
<tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
<tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
<tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
<tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
<tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
<tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
<tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
</tbody>
</table>
</div>
Remarque : La table est enveloppée dans un DIV avec un attribut de classe égal à 'table-holder'.
Vous trouverez ci-dessous le script JQuery que j'ai ajouté dans mon en-tête de page html.
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//create var for table holder
var originalTableHolder = $(".table-holder");
// set the table holder's with
originalTableHolder.width($('table', originalTableHolder).width() + 17);
// Create a clone of table holder DIV
var clonedtableHolder = originalTableHolder.clone();
// Calculate height of all header rows.
var headerHeight = 0;
$('thead', originalTableHolder).each(function (index, element) {
headerHeight = headerHeight + $(element).height();
});
// Set the position of cloned table so that cloned table overlapped the original
clonedtableHolder.css('position', 'relative');
clonedtableHolder.css('top', headerHeight + 'px');
// Set the height of cloned header equal to header height only so that body is not visible of cloned header
clonedtableHolder.height(headerHeight);
clonedtableHolder.css('overflow', 'hidden');
// reset the ID attribute of each element in cloned table
$('*', clonedtableHolder).each(function (index, element) {
if ($(element).attr('id')) {
$(element).attr('id', $(element).attr('id') + '_Cloned');
}
});
originalTableHolder.css('border-bottom', '1px solid #aaa');
// Place the cloned table holder before original one
originalTableHolder.before(clonedtableHolder);
});
</script>
et enfin ci-dessous se trouve la classe CSS à des fins de coloration.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Donc, toute l'idée de cette logique est de placer la table dans un div de support de table et de créer un clone de ce support côté client lorsque la page est chargée. Cachez maintenant le corps du tableau dans le support de clone et placez la partie d'en-tête restante sur l'en-tête d'origine.
La même solution fonctionne également pour asp: gridview, vous devez ajouter deux étapes supplémentaires pour y parvenir dans gridview,
Dans l'événement OnPrerender de l'objet gridview dans votre page Web, définissez la section de tableau de la ligne d'en-tête égale à TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
Et enveloppez votre grille dans <div class="table-holder"></div>
.
Remarque : si votre en-tête a des contrôles cliquables, vous devrez peut-être ajouter un script jQuery supplémentaire pour transmettre les événements déclenchés dans l'en-tête cloné à l'en-tête d'origine. Ce code est déjà disponible dans le plugin jQuery sticky-header créé par jmosbech