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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>tableau</title>
<link rel="stylesheet" href="../js/jsgrid/css/jsgrid.css" />
<link rel="stylesheet" href="../js/jsgrid/css/theme.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/jsgrid/src/jsgrid.core.js"></script>
<script src="../js/jsgrid/src/jsgrid.load-indicator.js"></script>
<script src="../js/jsgrid/src/jsgrid.load-strategies.js"></script>
<script src="../js/jsgrid/src/jsgrid.sort-strategies.js"></script>
<script src="../js/jsgrid/src/jsgrid.field.js"></script>
<script src="../js/jsgrid/src/fields/jsgrid.field.text.js"></script>
<script src="../js/jsgrid/src/fields/jsgrid.field.number.js"></script>
<script src="../js/jsgrid/src/fields/jsgrid.field.select.js"></script>
<script src="../js/jsgrid/src/fields/jsgrid.field.checkbox.js"></script>
<script src="../js/jsgrid/src/fields/jsgrid.field.control.js"></script>
<script>
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: {
loadData: function(filter) {
return $.ajax({
url: "./ajax/query.php",
dataType: "json"
});
}
},
fields: [
{ name: "civ", type: "text", width: 3 },
{ name: "nom", type: "text", width: 20 },
{ name: "prenom", type: "text", width: 20 },
{ name: "naissance", type: "text", width: 10 },
{ name: "mail", type: "text", width: 20 },
{ name: "login", type: "text", width: 20 },
{ name: "structure", type: "text", width: 30 },
{ name: "fonction", type: "text", width: 20 },
{ name: "fonction_precision", type: "text", width: 40},
{ type: "control" }
]
});
</script>
</head>
<body>
<div id="jsGrid">
</div>
</body>
</html> |
Partager