Pagination d'un tableau dynamique en JS
Bonsoir ! j'ai réalisé ce code qui me permet d'entrer en paramètre un tableau dynamique, et je veux que la tableau soit paginé, par exemple si je donne 20 ligne comme paramètre, le script génère le tableau pour qu'il affiche just 5 lignes par page,
Merci =)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <!doctype html>
<html>
<head>
<title>Manipulation de tableaux HTML</title>
<!-- <script src=".js" type="text/javascript" > </script> -->
</head>
<body>
<input type="button" value="Insértion des lignes et des colonnes" onclick="inserer()" />
<input type="button" value="Suppression" onclick="supprimer('table')" />
</br></br>
<table id="table"></table>
<script> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| function inserer() {
var saisie_ligne = prompt("Saisissez le nombre de lignes :", "Ligne")
var saisie_colonne = prompt("Saisissez le nombre de cellules :", "Colonne")
var body = document.getElementsByTagName("body")[0];
var tab = document.getElementById('table');
//var tabBody = document.createElement("tbody");
for (var i = 0; i < saisie_ligne; i++) {
var row = document.createElement("tr");
for (var j = 0; j < saisie_colonne; j++) {
var cell = document.createElement("td");
var text = prompt('Saisissez le contenu de la cellule' + (j + 1) + ', dans la ligne' + (i + 1));
//var cellText = document.createTextNode("Ligne numéro "+(i+1)+" Colonne numéro" +(j+1));
var cellText = document.createTextNode(text);
cell.appendChild(cellText);
row.appendChild(cell);
}
tab.appendChild(row);
}
//tab.appendChild(tabBody);
body.appendChild(tab);
tab.setAttribute("border", 1);
tab.style.borderCollapse = "collapse";
}
function supprimer(tableID) {
var tableRef = document.getElementById(tableID);
var saisie_ligne = prompt("La ligne à suprimer", "ligne")
tableRef.deleteRow(saisie_ligne);
var saisie_colonne = prompt("la cellule à supp", "colonne")
if (isNaN(parseInt(saisie_ligne)) || isNaN(parseInt(saisie_colonne))) {
alert('les valeurs saisis sont incorectes veuillez réessayer')
return false
}
var ligne = tableRef.rows[saisie_ligne];
ligne.deleteCell(saisie_colonne);
} |
Code:
1
2
3
| </script>
</body>
</html> |
