Cette classe permet d'ajouter un ascenseur (scroll) à une balise <table>
Insérer le code suivant entre les balises <head>
<script
src="../jpclibrary_script/cnx.js"></script>
<script src="../jpclibrary_script/table.js"></script>
ID |
Name |
Phone |
Zip |
Birthdate |
Last Access |
Rating |
Done |
Salary |
Score |
|
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Ezekiel Hart | (627) 536-4760 | tortor@est.ca | 53082 | 12/02/1962 | March 26, 2009 | -7 | 7% | $73,229 | 6.9 |
| 2 | Jaquelyn Pace | (921) 943-5780 | in@elementum.org | 46789 | 06/03/1957 | October 20, 2006 | -7 | 33% | $130,752 | 4.9 |
| 3 | Lois Pickett | (835) 361-5993 | arcu.ac@disse.ca | 9814 | 10/15/1983 | June 01, 1999 | 4 | 44% | $48,684 | 5.5 |
| 4 | Keane Raymond | (605) 803-1561 | at.risus.Nunc@ipsum.com | 97129 | 07/30/1982 | July 24, 1996 | 5 | 20% | $7,023 | 9.5 |
| 5 | Porter Thomas | (666) 569-9894 | non@Proin.ca | 59953 | 09/27/1986 | December 05, 2007 | 1 | 66% | $69,875 | 0.9 |
| 6 | Imani Murphy | (771) 294-6690 | Aenean.sed@elit.ca | 69771 | 10/23/1970 | December 08, 1996 | -1 | 30% | $113,763 | 4.9 |
| 7 | Zachery Guthrie | (851) 784-4129 | nunc.nulla@vel.com | 66960 | 12/22/1972 | September 20, 2002 | -5 | 24% | $130,248 | 6.9 |
| 8 | Harper Bowen | (810) 652-6704 | dis@duinec.ca | 77110 | 10/26/1973 | May 29, 1996 | 5 | 49% | $73,197 | 4.5 |
| 9 | Caldwell Larson | (850) 562-3177 | elit@dolor.com | 87519 | 07/20/1985 | June 22, 2004 | -3 | 81% | $63,736 | 7.5 |
| 10 | Baker Osborn | (378) 371-0559 | turpis.Nulla@ac.edu | 69446 | 03/29/1970 | July 23, 2005 | -7 | 61% | $2,868 | 0.1 |
| 11 | Yael Owens | (465) 520-1801 | nunc.ac.mattis@enim.com | 93872 | 08/10/1963 | April 09, 1997 | 10 | 85% | $126,469 | 8.9 |
| 12 | Fletcher Briggs | (992) 962-9419 | amet.ante@lentesque.edu | 87282 | 08/12/1971 | December 12, 2006 | 7 | 23% | $142,448 | 8.9 |
| 13 | Maggy Murphy | (585) 210-0390 | eu@Integer.com | 98081 | 07/11/1968 | April 02, 2007 | 9 | 31% | $40,267 | 6.9 |
| 14 | Maggie Blake | (489) 101-5447 | rutrum.non.hendrerit@iaculis.org | 85131 | 04/11/1970 | May 24, 2008 | -2 | 32% | $99,686 | 7.9 |
| 15 | Ginger Bell | (934) 692-7294 | erat.in.conetuer@pedenout.org | 78878 | 06/10/1957 | April 13, 2003 | -10 | 74% | $112,997 | 4.5 |
| 16 | Iliana Ballard | (806) 835-7035 | vel.sapien@mi.ca | 84718 | 02/09/1989 | March 27, 1996 | -6 | 78% | $5,282 | 5.5 |
| 17 | Alisa Monroe | (859) 974-4442 | adipiscing.ligula@aretraNam.edu | 89057 | 02/14/1990 | April 30, 2003 | 6 | 95% | $103,999 | 5.9 |
| 18 | Kenyon Luna | (673) 147-0443 | Cras@Vestibulumant.edu | 18035 | 04/14/1981 | April 17, 2009 | 9 | 14% | $37,014 | 7.9 |
| 19 | Nola Kerr | (340) 430-0424 | tincidunt@vurmagna.com | 93815 | 11/06/1959 | August 14, 2000 | 10 | 2% | $104,149 | 0.5 |
| 20 | Gail Cash | (291) 455-8520 | massa.rutrum@Nullamlob.ca | 16919 | 09/09/1970 | April 27, 2002 | -1 | 84% | $31,090 | 1.5 |
| 21 | Kalia Ayala | (142) 520-1128 | Etiam.laoreet@velit.org | 45675 | 04/25/1971 | March 30, 2001 | 5 | 30% | $44,641 | 5.9 |
| 22 | Violet Ballard | (126) 374-6078 | Integer.in.magna@ntumcollis.edu | 45791 | 01/23/1984 | June 08, 2006 | -10 | 85% | $46,450 | 7.9 |
| 23 | Kevin Carrillo | (687) 483-9669 | in@adipiscing.edu | 27432 | 03/17/1977 | October 01, 2005 | -3 | 5% | $51,754 | 1.5 |
| 24 | Alexandra Nixon | (422) 644-3488 | nec.luctus@ornarefacilisis.com | 58955 | 12/01/1981 | February 25, 2001 | -1 | 41% | $46,672 | 7.5 |
| 25 | Charissa Manning | (438) 395-9392 | nibh.vulputate@necelendnon.org | 63431 | 07/01/1980 | April 02, 2005 | -8 | 11% | $32,193 | 3.5 |
| 26 | Noah Smith | (963) 652-2643 | Sed.neque@Duis.org | 83867 | 01/19/1986 | April 03, 2005 | -5 | 86% | $96,995 | 3.5 |
| 27 | Patience Battle | (294) 644-5306 | tempus.mauris@elempurus.com | 43578 | 09/16/1988 | October 19, 2003 | 7 | 62% | $47,510 | 4.5 |
| 28 | Kathleen Hudson | (190) 189-1420 | orci.quis@auctor.com | 68091 | 08/03/1963 | January 03, 2004 | 8 | 27% | $36,286 | 6.9 |
| 29 | Marsden Bowman | (163) 780-6121 | mauris.a@Sedcongueelit.edu | 91684 | 03/08/1974 | June 29, 2005 | 10 | 46% | $124,913 | 1.5 |
| 30 | Dorian Hodge | (304) 536-8850 | pellentesque@laoreet.org | 29398 | 08/16/1978 | February 21, 2007 | 6 | 6% | $28,057 | 0.1 |
| 31 | Levi Britt | (272) 171-5731 | felis@Donecfeugiat.ca | 56521 | 12/10/1988 | August 11, 2008 | 7 | 6% | $100,959 | 1.5 |
| 32 | Rana Blake | (608) 893-4909 | malesuada.fames@dui.edu | 16341 | 07/23/1959 | February 13, 1997 | -4 | 26% | $87,972 | 4.9 |
| 33 | Helen Mccullough | (937) 368-5946 | sociis.natoque@myipsum.org | 3033 | 09/13/1980 | May 17, 2001 | 8 | 18% | $51,217 | 9.9 |
| 34 | Gil Ferguson | (832) 581-6953 | libero@Infaucibus.com | 43556 | 04/19/1980 | March 22, 1996 | -6 | 83% | $120,374 | 6.9 |
| 35 | Judah Manning | (332) 888-8768 | congue@Nuncut.com | 43672 | 07/16/1974 | December 14, 2009 | 9 | 34% | $95,173 | 6.9 |
| 36 | Yoshi Humphrey | (961) 215-0426 | pharetra@rutrumFusce.edu | 51179 | 01/13/1962 | August 24, 1997 | 4 | 84% | $140,552 | 3.9 |
| 37 | Idona Williams | (163) 580-2609 | Integer.aliquam@Sedetlibero.org | 88693 | 08/27/1967 | February 22, 2000 | -3 | 15% | $37,762 | 5.9 |
| 38 | Petra Bennett | (976) 799-4111 | Proin@Donecelementum.org | 46753 | 01/02/1959 | April 27, 1999 | 2 | 81% | $32,371 | 6.5 |
| 39 | Phyllis Rogers | (798) 959-3321 | eget.dictum.placerat@idlibero.ca | 39212 | 11/27/1961 | February 14, 2009 | -10 | 42% | $77,847 | 4.9 |
| 40 | Fritz Benton | (525) 353-2984 | a@diamnunc.com | 11530 | 10/02/1957 | June 16, 2002 | -5 | 2% | $75,654 | 8.9 |
| 41 | Mannix Davidson | (106) 260-1651 | pulvinar@Duisvolutpat.org | 15815 | 08/24/1964 | October 24, 2002 | 1 | 93% | $11,498 | 2.5 |
| 42 | Grant Lawrence | (807) 487-5786 | a@interdumlibero.ca | 50743 | 10/10/1973 | March 28, 2007 | 9 | 6% | $137,743 | 3.9 |
| 43 | Laurel Ortiz | (945) 481-7808 | laoreet.posuere@vallis.com | 92426 | 08/19/1962 | May 11, 2006 | 5 | 55% | $64,799 | 8.9 |
| 44 | Lewis Frank | (844) 314-8683 | fames@gravida.edu | 35378 | 12/01/1966 | January 25, 1998 | 5 | 30% | $99,927 | 1.5 |
| 45 | Yasir Knox | (814) 509-0367 | Cras.vulputate.velit@acusUt.com | 36004 | 10/23/1981 | August 20, 2007 | -2 | 61% | $36,618 | 0.9 |
| 46 | Palmer Newman | (955) 748-1014 | fringilla@id.edu | 78774 | 10/29/1980 | December 28, 2007 | -9 | 85% | $19,325 | 2.5 |
| 47 | Tate Webster | (107) 247-3380 | pellentesque@pedeultri.com | 25232 | 06/11/1963 | August 11, 2005 | -4 | 14% | $109,433 | 6.5 |
| 48 | Charity Hahn | (395) 200-9188 | ac@Quisque.edu | 28260 | 08/04/1976 | January 17, 2009 | -2 | 86% | $3,246 | 5.5 |
| 49 | Katell Crosby | (259) 659-7498 | tincidunt.vehicula@ura.com | 31001 | 12/31/1961 | January 02, 2007 | 8 | 10% | $67,319 | 8.9 |
| 50 | Eden Burks | (576) 196-6013 | lorem@magna.com | 30822 | 02/27/1964 | April 27, 2002 | 3 | 6% | $109,631 | 2.5 |
| Fin | Eden Burks | (576) 196-6013 | lorem@magna.com | 30822 | 02/27/1964 | April 27, 2002 | 3 | 6% | $109,631 | 2.5 |
Nous allons voir comment ajouter dynamiquement un ascenseur (scroller) à une <table>
Ceci grace à la classe scrollTable(),
Insérer les fichiers javascript contenant la classe (cnx.js et table.js) entre les balises <head>
<script
src="../jpclibrary_script/cnx.js"></script>
<script src="../jpclibrary_script/table.js"></script>
Puis
C'est tout!
| Propriétés | Commentaires | Code <script
src="../jpclibrary_script/cnx.js"></script> |
|
Nom de la classe |
Le nom de la classe associée au redimensionnement des colonnes est scrollTable() |
Une fois les fichiers javascript ajoutés à votre entête, la classe
est opérationnelle |
|
Identification d'une <table> à trier |
Pour identifier une table à trier,
il faut affecter une classe de style (className) "scroll" à la <table>
concernée Autre possibilité, la table que nous voulons trier est identifiée en passant son id en paramètre lors de l'appel scrollTable.addTable("idtable"); Cet appel se fera une fois la <table> écrite, donc dans la balise <body>. |
voir l'exemple joint ci dessous dans Activer la classe scrollTable() |
|
addTable() |
Méthode - fonction Pemet d'ajouter à la table ayant l'attribur id correspondant la possibilité de tri par colonne. |
scrollTable.addTable("id");
//id est l'attribut id de la balise table Nous pouvons aussi écrire: scrollTable.addTable("id", hauteur); //hauteur est un entier qui represente la hauteur du tbody de la table en px |
|
height() |
Méthode - fonction permet de modifier la hauteur de la partie tbody de la <table> |
scrollTable.height("id", hauteur); //hauteur est un entier qui donne la hauteur du <tbody> en px |
|
scrollClassName |
Propriété - variable Modifie la valeur de la classe de style associée aux tables dite
scrollable |
scrollTable.scrollClassName = "scroll"; //valeur par défaut |
|
Appel avec un id, après la déclaration de <table> |
|---|
|
<html> <thead> <tr> <th class="nosort"><h3>ID</h3></th> <th><h3>Name</h3></th> <th><h3>Phone</h3></th> <th><h3>Email</h3></th> <th><h3>Zip</h3></th> <th><h3>Birthdate</h3></th> <th><h3>Last Access</h3></th> <th><h3>Rating</h3></th> <th><h3>Done</h3></th> <th><h3>Salary</h3></th> <th><h3>Score</h3></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ezekiel Hart</td> <td>(627) 536-4760</td> <td><a href="mailto:#">tortor@est.ca</a></td> <td>53082</td> <td>12/02/1962</td> <td>March 26, 2009</td> <td>-7</td> <td>7%</td> <td>$73,229</td> <td>6.9</td> </tr> <tr> <td>2</td> <td>Jaquelyn Pace</td> <td>(921) 943-5780</td> <td><a href="mailto:#">in@elementum.org</a></td> <td>46789</td> <td>06/03/1957</td> <td>October 20, 2006</td> <td>-7</td> <td>33%</td> <td>$130,752</td> <td>4.9</td> </tr> <tr> <td>3</td> <td>Lois Pickett</td> <td>(835) 361-5993</td> <td><a href="mailto:#">arcu.ac@disse.ca</a></td> <td>9814</td> <td>10/15/1983</td> <td>June 01, 1999</td> <td>4</td> <td>44%</td> <td>$48,684</td> <td>5.5</td> </tr> <tr> <td>4</td> <td>Keane Raymond</td> <td>(605) 803-1561</td> <td><a href="mailto:#">at.risus.Nunc@ipsum.com</a></td> <td>97129</td> <td>07/30/1982</td> <td>July 24, 1996</td> <td>5</td> <td>20%</td> <td>$7,023</td> <td>9.5</td> </tr> <tr> <td>5</td> <td>Porter Thomas</td> <td>(666) 569-9894</td> <td><a href="mailto:#">non@Proin.ca</a></td> <td>59953</td> <td>09/27/1986</td> <td>December 05, 2007</td> <td>1</td> <td>66%</td> <td>$69,875</td> <td>0.9</td> </tr> <tr> <td>6</td> <td>Imani Murphy</td> <td>(771) 294-6690</td> <td><a href="mailto:#">Aenean.sed@elit.ca</a></td> <td>69771</td> <td>10/23/1970</td> <td>December 08, 1996</td> <td>-1</td> <td>30%</td> <td>$113,763</td> <td>4.9</td> </tr> <tr> <td>7</td> <td>Zachery Guthrie</td> <td>(851) 784-4129</td> <td><a href="mailto:#">nunc.nulla@vel.com</a></td> <td>66960</td> <td>12/22/1972</td> <td>September 20, 2002</td> <td>-5</td> <td>24%</td> <td>$130,248</td> <td>6.9</td> </tr> <tr> <td>8</td> <td>Harper Bowen</td> <td>(810) 652-6704</td> <td><a href="mailto:#">dis@duinec.ca</a></td> <td>77110</td> <td>10/26/1973</td> <td>May 29, 1996</td> <td>5</td> <td>49%</td> <td>$73,197</td> <td>4.5</td> </tr> <tr> <td>9</td> <td>Caldwell Larson</td> <td>(850) 562-3177</td> <td><a href="mailto:#">elit@dolor.com</a></td> <td>87519</td> <td>07/20/1985</td> <td>June 22, 2004</td> <td>-3</td> <td>81%</td> <td>$63,736</td> <td>7.5</td> </tr> <tr> <td>10</td> <td>Baker Osborn</td> <td>(378) 371-0559</td> <td><a href="mailto:#">turpis.Nulla@ac.edu</a></td> <td>69446</td> <td>03/29/1970</td> <td>July 23, 2005</td> <td>-7</td> <td>61%</td> <td>$2,868</td> <td>0.1</td> </tr> <tr> <td>11</td> <td>Yael Owens</td> <td>(465) 520-1801</td> <td><a href="mailto:#">nunc.ac.mattis@enim.com</a></td> <td>93872</td> <td>08/10/1963</td> <td>April 09, 1997</td> <td>10</td> <td>85%</td> <td>$126,469</td> <td>8.9</td> </tr> <tr> <td>12</td> <td>Fletcher Briggs</td> <td>(992) 962-9419</td> <td><a href="mailto:#">amet.ante@lentesque.edu</a></td> <td>87282</td> <td>08/12/1971</td> <td>December 12, 2006</td> <td>7</td> <td>23%</td> <td>$142,448</td> <td>8.9</td> </tr> <tr> <td>13</td> <td>Maggy Murphy</td> <td>(585) 210-0390</td> <td><a href="mailto:#">eu@Integer.com</a></td> <td>98081</td> <td>07/11/1968</td> <td>April 02, 2007</td> <td>9</td> <td>31%</td> <td>$40,267</td> <td>6.9</td> </tr> <tr> <td>14</td> <td>Maggie Blake</td> <td>(489) 101-5447</td> <td><a href="mailto:#">rutrum.non.hendrerit@iaculis.org</a></td> <td>85131</td> <td>04/11/1970</td> <td>May 24, 2008</td> <td>-2</td> <td>32%</td> <td>$99,686</td> <td>7.9</td> </tr> <tr> <td>15</td> <td>Ginger Bell</td> <td>(934) 692-7294</td> <td><a href="mailto:#">erat.in.conetuer@pedenout.org</a></td> <td>78878</td> <td>06/10/1957</td> <td>April 13, 2003</td> <td>-10</td> <td>74%</td> <td>$112,997</td> <td>4.5</td> </tr> <tr> <td>16</td> <td>Iliana Ballard</td> <td>(806) 835-7035</td> <td><a href="mailto:#">vel.sapien@mi.ca</a></td> <td>84718</td> <td>02/09/1989</td> <td>March 27, 1996</td> <td>-6</td> <td>78%</td> <td>$5,282</td> <td>5.5</td> </tr> <tr> <td>17</td> <td>Alisa Monroe</td> <td>(859) 974-4442</td> <td><a href="mailto:#">adipiscing.ligula@aretraNam.edu</a></td> <td>89057</td> <td>02/14/1990</td> <td>April 30, 2003</td> <td>6</td> <td>95%</td> <td>$103,999</td> <td>5.9</td> </tr> <tr> <td>18</td> <td>Kenyon Luna</td> <td>(673) 147-0443</td> <td><a href="mailto:#">Cras@Vestibulumant.edu</a></td> <td>18035</td> <td>04/14/1981</td> <td>April 17, 2009</td> <td>9</td> <td>14%</td> <td>$37,014</td> <td>7.9</td> </tr> <tr> <td>19</td> <td>Nola Kerr</td> <td>(340) 430-0424</td> <td><a href="mailto:#">tincidunt@vurmagna.com</a></td> <td>93815</td> <td>11/06/1959</td> <td>August 14, 2000</td> <td>10</td> <td>2%</td> <td>$104,149</td> <td>0.5</td> </tr> <tr> <td>20</td> <td>Gail Cash</td> <td>(291) 455-8520</td> <td><a href="mailto:#">massa.rutrum@Nullamlob.ca</a></td> <td>16919</td> <td>09/09/1970</td> <td>April 27, 2002</td> <td>-1</td> <td>84%</td> <td>$31,090</td> <td>1.5</td> </tr> <tr> <td>21</td> <td>Kalia Ayala</td> <td>(142) 520-1128</td> <td><a href="mailto:#">Etiam.laoreet@velit.org</a></td> <td>45675</td> <td>04/25/1971</td> <td>March 30, 2001</td> <td>5</td> <td>30%</td> <td>$44,641</td> <td>5.9</td> </tr> <tr> <td>22</td> <td>Violet Ballard</td> <td>(126) 374-6078</td> <td><a href="mailto:#">Integer.in.magna@ntumcollis.edu</a></td> <td>45791</td> <td>01/23/1984</td> <td>June 08, 2006</td> <td>-10</td> <td>85%</td> <td>$46,450</td> <td>7.9</td> </tr> <tr> <td>23</td> <td>Kevin Carrillo</td> <td>(687) 483-9669</td> <td><a href="mailto:#">in@adipiscing.edu</a></td> <td>27432</td> <td>03/17/1977</td> <td>October 01, 2005</td> <td>-3</td> <td>5%</td> <td>$51,754</td> <td>1.5</td> </tr> <tr> <td>24</td> <td>Alexandra Nixon</td> <td>(422) 644-3488</td> <td><a href="mailto:#">nec.luctus@ornarefacilisis.com</a></td> <td>58955</td> <td>12/01/1981</td> <td>February 25, 2001</td> <td>-1</td> <td>41%</td> <td>$46,672</td> <td>7.5</td> </tr> <tr> <td>25</td> <td>Charissa Manning</td> <td>(438) 395-9392</td> <td><a href="mailto:#">nibh.vulputate@necelendnon.org</a></td> <td>63431</td> <td>07/01/1980</td> <td>April 02, 2005</td> <td>-8</td> <td>11%</td> <td>$32,193</td> <td>3.5</td> </tr> <tr> <td>26</td> <td>Noah Smith</td> <td>(963) 652-2643</td> <td><a href="mailto:#">Sed.neque@Duis.org</a></td> <td>83867</td> <td>01/19/1986</td> <td>April 03, 2005</td> <td>-5</td> <td>86%</td> <td>$96,995</td> <td>3.5</td> </tr> <tr> <td>27</td> <td>Patience Battle</td> <td>(294) 644-5306</td> <td><a href="mailto:#">tempus.mauris@elempurus.com</a></td> <td>43578</td> <td>09/16/1988</td> <td>October 19, 2003</td> <td>7</td> <td>62%</td> <td>$47,510</td> <td>4.5</td> </tr> <tr> <td>28</td> <td>Kathleen Hudson</td> <td>(190) 189-1420</td> <td><a href="mailto:#">orci.quis@auctor.com</a></td> <td>68091</td> <td>08/03/1963</td> <td>January 03, 2004</td> <td>8</td> <td>27%</td> <td>$36,286</td> <td>6.9</td> </tr> <tr> <td>29</td> <td>Marsden Bowman</td> <td>(163) 780-6121</td> <td><a href="mailto:#">mauris.a@Sedcongueelit.edu</a></td> <td>91684</td> <td>03/08/1974</td> <td>June 29, 2005</td> <td>10</td> <td>46%</td> <td>$124,913</td> <td>1.5</td> </tr> <tr> <td>30</td> <td>Dorian Hodge</td> <td>(304) 536-8850</td> <td><a href="mailto:#">pellentesque@laoreet.org</a></td> <td>29398</td> <td>08/16/1978</td> <td>February 21, 2007</td> <td>6</td> <td>6%</td> <td>$28,057</td> <td>0.1</td> </tr> <tr> <td>31</td> <td>Levi Britt</td> <td>(272) 171-5731</td> <td><a href="mailto:#">felis@Donecfeugiat.ca</a></td> <td>56521</td> <td>12/10/1988</td> <td>August 11, 2008</td> <td>7</td> <td>6%</td> <td>$100,959</td> <td>1.5</td> </tr> <tr> <td>32</td> <td>Rana Blake</td> <td>(608) 893-4909</td> <td><a href="mailto:#">malesuada.fames@dui.edu</a></td> <td>16341</td> <td>07/23/1959</td> <td>February 13, 1997</td> <td>-4</td> <td>26%</td> <td>$87,972</td> <td>4.9</td> </tr> <tr> <td>33</td> <td>Helen Mccullough</td> <td>(937) 368-5946</td> <td><a href="mailto:#">sociis.natoque@myipsum.org</a></td> <td>3033</td> <td>09/13/1980</td> <td>May 17, 2001</td> <td>8</td> <td>18%</td> <td>$51,217</td> <td>9.9</td> </tr> <tr> <td>34</td> <td>Gil Ferguson</td> <td>(832) 581-6953</td> <td><a href="mailto:#">libero@Infaucibus.com</a></td> <td>43556</td> <td>04/19/1980</td> <td>March 22, 1996</td> <td>-6</td> <td>83%</td> <td>$120,374</td> <td>6.9</td> </tr> <tr> <td>35</td> <td>Judah Manning</td> <td>(332) 888-8768</td> <td><a href="mailto:#">congue@Nuncut.com</a></td> <td>43672</td> <td>07/16/1974</td> <td>December 14, 2009</td> <td>9</td> <td>34%</td> <td>$95,173</td> <td>6.9</td> </tr> <tr> <td>36</td> <td>Yoshi Humphrey</td> <td>(961) 215-0426</td> <td><a href="mailto:#">pharetra@rutrumFusce.edu</a></td> <td>51179</td> <td>01/13/1962</td> <td>August 24, 1997</td> <td>4</td> <td>84%</td> <td>$140,552</td> <td>3.9</td> </tr> <tr> <td>37</td> <td>Idona Williams</td> <td>(163) 580-2609</td> <td><a href="mailto:#">Integer.aliquam@Sedetlibero.org</a></td> <td>88693</td> <td>08/27/1967</td> <td>February 22, 2000</td> <td>-3</td> <td>15%</td> <td>$37,762</td> <td>5.9</td> </tr> <tr> <td>38</td> <td>Petra Bennett</td> <td>(976) 799-4111</td> <td><a href="mailto:#">Proin@Donecelementum.org</a></td> <td>46753</td> <td>01/02/1959</td> <td>April 27, 1999</td> <td>2</td> <td>81%</td> <td>$32,371</td> <td>6.5</td> </tr> <tr> <td>39</td> <td>Phyllis Rogers</td> <td>(798) 959-3321</td> <td><a href="mailto:#">eget.dictum.placerat@idlibero.ca</a></td> <td>39212</td> <td>11/27/1961</td> <td>February 14, 2009</td> <td>-10</td> <td>42%</td> <td>$77,847</td> <td>4.9</td> </tr> <tr> <td>40</td> <td>Fritz Benton</td> <td>(525) 353-2984</td> <td><a href="mailto:#">a@diamnunc.com</a></td> <td>11530</td> <td>10/02/1957</td> <td>June 16, 2002</td> <td>-5</td> <td>2%</td> <td>$75,654</td> <td>8.9</td> </tr> <tr> <td>41</td> <td>Mannix Davidson</td> <td>(106) 260-1651</td> <td><a href="mailto:#">pulvinar@Duisvolutpat.org</a></td> <td>15815</td> <td>08/24/1964</td> <td>October 24, 2002</td> <td>1</td> <td>93%</td> <td>$11,498</td> <td>2.5</td> </tr> <tr> <td>42</td> <td>Grant Lawrence</td> <td>(807) 487-5786</td> <td><a href="mailto:#">a@interdumlibero.ca</a></td> <td>50743</td> <td>10/10/1973</td> <td>March 28, 2007</td> <td>9</td> <td>6%</td> <td>$137,743</td> <td>3.9</td> </tr> <tr> <td>43</td> <td>Laurel Ortiz</td> <td>(945) 481-7808</td> <td><a href="mailto:#">laoreet.posuere@vallis.com</a></td> <td>92426</td> <td>08/19/1962</td> <td>May 11, 2006</td> <td>5</td> <td>55%</td> <td>$64,799</td> <td>8.9</td> </tr> <tr> <td>44</td> <td>Lewis Frank</td> <td>(844) 314-8683</td> <td><a href="mailto:#">fames@gravida.edu</a></td> <td>35378</td> <td>12/01/1966</td> <td>January 25, 1998</td> <td>5</td> <td>30%</td> <td>$99,927</td> <td>1.5</td> </tr> <tr> <td>45</td> <td>Yasir Knox</td> <td>(814) 509-0367</td> <td><a href="mailto:#">Cras.vulputate.velit@acusUt.com</a></td> <td>36004</td> <td>10/23/1981</td> <td>August 20, 2007</td> <td>-2</td> <td>61%</td> <td>$36,618</td> <td>0.9</td> </tr> <tr> <td>46</td> <td>Palmer Newman</td> <td>(955) 748-1014</td> <td><a href="mailto:#">fringilla@id.edu</a></td> <td>78774</td> <td>10/29/1980</td> <td>December 28, 2007</td> <td>-9</td> <td>85%</td> <td>$19,325</td> <td>2.5</td> </tr> <tr> <td>47</td> <td>Tate Webster</td> <td>(107) 247-3380</td> <td><a href="mailto:#">pellentesque@pedeultri.com</a></td> <td>25232</td> <td>06/11/1963</td> <td>August 11, 2005</td> <td>-4</td> <td>14%</td> <td>$109,433</td> <td>6.5</td> </tr> <tr> <td>48</td> <td>Charity Hahn</td> <td>(395) 200-9188</td> <td><a href="mailto:#">ac@Quisque.edu</a></td> <td>28260</td> <td>08/04/1976</td> <td>January 17, 2009</td> <td>-2</td> <td>86%</td> <td>$3,246</td> <td>5.5</td> </tr> <tr> <td>49</td> <td>Katell Crosby</td> <td>(259) 659-7498</td> <td><a href="mailto:#">tincidunt.vehicula@ura.com</a></td> <td>31001</td> <td>12/31/1961</td> <td>January 02, 2007</td> <td>8</td> <td>10%</td> <td>$67,319</td> <td>8.9</td> </tr> <tr> <td>50</td> <td>Eden Burks</td> <td>(576) 196-6013</td> <td><a href="mailto:#">lorem@magna.com</a></td> <td>30822</td> <td>02/27/1964</td> <td>April 27, 2002</td> <td>3</td> <td>6%</td> <td>$109,631</td> <td>2.5</td> </tr> </tbody> </table>
<script> scrollTable.addTable("table"); // vous pouvez aussi faire: scrollTable.addTable("table", 200); //200 est la hauteur en px de la table </script> |
Vous pouvez télécharger le fichier cnx.js
Vous pouvez télécharger le fichier table.js
|
La classe scrollTable() - |
|---|
|
scrollTable = {// {{{ /* ------------------------------------------- //*** This code is copyright 2003-2004 by Gavin Kistner, !@phrogz.net //*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt //*** Reuse or modification is free provided you abide by the terms of that license. //*** (Including the first two lines above in your source code mostly satisfies the conditions.) // See http://phrogz.net/tmp/scrolltable/scrolltable.html for more information. // v1.5 20040909 Changed styles and wrappers to prevent z-index overlap problem. ------------------------------------ */ version: "scrollTable version 2011 mar 14",
getTable: function(){ // {{{ window.scrollTableList=[]; //génére un tableau pour les tables correspondantes au scroll var realTables = document.getElementsByTagName('table'); //recherche toutes les <table> dans la page web for (var i=0, len=realTables.length; i < len; i++) if (cnx.isClassName(realTables[i],'scroll')) scrollTableList.push(realTables[i]); //si className = "scroll" ajoute au tableau
for (var i=0,len=scrollTableList.length; i < len; i++){ //parcours le tableau (array) des <table> faisant l'objet d'un scroll scrollTable.initScrollTable(scrollTableList[i]); //lance le programme d'initialisation, de mise en forme } scrollTable.fixOffsets(); scrollTable.fixOffsets(); //il faut relancer pour obtenir la vraie position }, // }}}
initScrollTable: function(table, hauteur){ // {{{ if (!hauteur) hauteur = 400; if (table.thead=thead=scrollTable.firstChild(table,'thead')){ //renvoie thead[0] ou null; teste l'existence de thead et assigne sa valeur aux variables jointes var div_thead = table.parentNode.insertBefore(document.createElement('div'),table); div_thead.style.overflow='hidden'; div_thead.style.marginRight='16px'; div_thead.id="div_thead";
div_thead.style.borderColor= "#0000ff"; //ajout pour visuel autour de la div associée à thead div_thead.style.borderStyle= "solid"; //ajout pour visuel autour de la div associée à thead div_thead.style.borderWidth= "1px"; //ajout pour visuel autour de la div associée à thead
var t = table.scrollhead = div_thead.appendChild(table.cloneNode(true)); t.style.marginTop='0'; }
if (table.tfoot=tfoot=scrollTable.firstChild(table,'tfoot')){ //en fait teste l'existence de tfoot[0] et assigne cette valeur aux variables associée var div_tfoot = table.parentNode.insertBefore(document.createElement('div'),table.nextSibling); div_tfoot.style.overflow='hidden'; div_tfoot.style.marginRight='16px'; div_tfoot.id="div_tfoot";
div_tfoot.style.borderColor= "#ff0000"; //ajout pour visuel autour de la div associée à tfoot div_tfoot.style.borderStyle= "solid"; //ajout pour visuel autour de la div associée à tfoot div_tfoot.style.borderWidth= "1px"; //ajout pour visuel autour de la div associée à tfoot
var t = table.scrollfoot = div_tfoot.appendChild(table.cloneNode(true)); t.style.marginTop=t.style.marginBottom='0'; }
if (table.scrollhead || table.scrollfoot){ //si exist thead ou tfoot, on travaille sur tbody table.style.marginTop=table.style.marginBottom='0'; if (table.thead) table.thead.style.visibility='hidden'; if (table.tfoot) table.tfoot.style.visibility='hidden';
var div_tbody = table.scrollwrap = table.parentNode.insertBefore(document.createElement('div'),table); div_tbody.appendChild(table); //div_tbody.className='scrollwrap'; div_tbody.style.overflow='auto'; div_tbody.id="div_tbody";
div_tbody.style.borderColor= "#00ff00"; //ajout pour visuel autour de la div associée à tbody div_tbody.style.borderStyle= "solid"; //ajout pour visuel autour de la div associée à tbody div_tbody.style.borderWidth= "1px"; //ajout pour visuel autour de la div associée à tbody
/* Il faut mesurer les dimensions du tableau juste avant de les appliquer le prb est que clientHeight, offsetHeight, scrollHeight clientWidth, offsetWidth, scrollWidth dépendent de l'affichage de l'élément à un instant donné Il faut donc les mesurer juste avant d'appliquer le redimensionnement Autrement on travaille sur de fausses valeurs.
alert(table.clientHeight+" : "+table.offsetHeight+" : "+table.scrollHeight); alert(table.clientWidth+" : "+table.offsetWidth+" : "+table.scrollWidth); */
div_tbody.style.height = (table.offsetHeight > hauteur) ? hauteur+"px": (table.offsetHeight-30)+"px";//à tester ne doit pas dépasser offsetHeight var largeur = table.clientWidth+30; //30 épaisseur de la barre de scroll avec marge. div_tbody.style.width = largeur + "px"; if (div_tfoot) div_tfoot.style.width = largeur + "px"; if (div_thead) div_thead.style.width = largeur + "px";
try{ div_tbody.style.overflowX='hidden'; }catch(e){} } }, // }}}
height: function(idTable, hauteur){ // {{{ if (hauteur && hauteur !=0){ if (idTable){ //une table est désignée de façon unique var table = (cnx.isString(idTable)) ? document.getElementById(idTable) : idTable; // si String cherche élément objet /* -------------------------- Il faur rechercher les div associées à la <table> En fait les 3 div sont parentNode de <table>
alert(table.parentNode.id); //thead alert(table.parentNode.nextSibling.id); //tbody alert(table.parentNode.nextSibling.nextSibling.id); //tfoot ------------------- */ table.parentNode.nextSibling.style.height = (table.offsetHeight > hauteur) ? hauteur+"px": (table.offsetHeight-30)+"px";//à tester ne doit pas dépasser offsetHeight } } }, // }}}
//cnx.addEvent(window, 'resize', fixOffsets); //sert à IE qui sans cette ligne englobe dans la div de entete la deuxième ligne du tableau //setTimeout(fixOffsets,10); //sert à FF qui sans cette ligne n'affiche pas le contenu de Tfoot
fixOffsets: function(){ // {{{ for (var i=0,len=scrollTableList.length;i<len;i++){ var table=scrollTableList[i]; var headHeight = table.scrollhead ? table.thead.offsetHeight*1 : 0; var footHeight = table.scrollfoot ? (table.tfoot.offsetHeight*1) : 0;
if (table.scrollhead) { table.style.marginTop='-'+headHeight+'px'; table.scrollhead.parentNode.style.height = headHeight+'px'; /* var trs = table.thead.getElementsByTagName('tr'); for (x=0; x<trs.length; x++) { trs[x].style.position ='relative'; } */ }
if (table.scrollfoot) { table.style.marginBottom='-'+footHeight+'px'; table.scrollfoot.parentNode.scrollTop = table.scrollfoot.parentNode.scrollHeight + Math.random(); table.scrollfoot.parentNode.style.height = footHeight+'px'; /* var trs = table.tfoot.getElementsByTagName('tr'); for (x=0; x<trs.length; x++) { trs[x].style.position ='relative'; } */ } } }, // }}}
firstChild: function (el,tagName){ // {{{ var els = el.getElementsByTagName(tagName); return els && els.length>0 ? els[0] : null; }, // }}}
addTable: function(idTable, hauteur){ // liste les tables faisant l'objet d'un scroll{{{ if (idTable) var table = (cnx.isString(idTable)) ? document.getElementById(idTable) : idTable; if (scrollTableList.length > 0) { // des tables en scroll existe déjà sur la page var notExist = true; for (var x=0; x < scrollTableList.length; x++){ if (table == scrollTableList[x]) notExist = false; } if (notExist){ scrollTableList.push(table); //ajoute la table if (hauteur) scrollTable.initScrollTable(table, hauteur); else scrollTable.initScrollTable(table); scrollTable.fixOffsets(); scrollTable.fixOffsets(); //il faut relancer pour obtenir la vraie position sous FF } }
}, // }}}
author: "Gavin Kistner - JSON cnx claude jpc" //dernière ligne de la classe JSON; ne pas mettre de virgule
} //end scrollTable }}}
cnx.addEvent(window, 'load', scrollTable.getTable); cnx.addEvent(window, 'resize', scrollTable.fixOffsets); //sert à IE qui sans cette ligne englobe dans la div de entete la deuxième ligne du tableau |
De façon très schématique le fonctionnement du programme de Gavin Kistner est le suivant:
La <table> est divisée en trois partie:
Chacune de ces parties est ensuite insérée dans une <div>
En fait chaque <div> englobe la totalité de la <table>,
mais le programme fait en sorte que chaque <div> n'affiche qu'un seul
des 3 éléments <thead>, <tbody> ou <tfoot>
La <div> qui affiche <tbody> est scrollable (div_tbody.style.overflow='auto';) et on limite sa hauteur pour provoquer l'affichage des ascenseurs.
Nous avons rencontré de grosses difficultés à obtenir un résultat satisfaisant en terme de dimension des colonnes les unes par rapport aux autres sous firefox avec le programme de Gavin Kistner
Aussi nous avons finalement repris le concept trouvé sur:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Que nous avons adapté en javascript
le concept de ce programme est presque identique au précédent, mais il n'y a que 2 div
La première div dite interieure contient la section tbody de la table et supporte les ascenseurs. Elle est le parent de la table, son conteneur
La deuxième div dite exterieure contient les sections thead et tfoot via un style CSS. elle est le grand -parent de la table, donc le parent de div interieure.
ajouter la possibilté de mettre en forme une <table> ne possédant pas de <thead> pour fonctionner avec cette classe.
en résumé prendre la première ligne, la copier dans une section thead avec <th> et <h3>
puis copier le reste du tableau dans une section <tbody>
<table id="id"> doit d'abord être déclaré avant
cet appel
download