Bonjour !
J'en bave.
Depuis 3 jours j'essaye de faire tourner jsGrid. Je pars de l'exemple statique de cette page.

http://js-grid.com/getting-started/

Et super, ça marche...

Je passe alors à un tableau alimenté par la db... et là, ça se corse...
Comme rien ne marche, pas même cette page de démo en fait

http://js-grid.com/demos/

Je me rabats après quelques jours sur cette page :

https://www.jqueryscript.net/table/L...ry-jsgrid.html

Et je finis par produire ceci :

Page index.php
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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>




Page ajax (juste pour charger le tableau via ma base)

Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$dsn='mysql:host=blabla;port=3306;dbname=ma_base';
$login='blabla';
$mdp='blabla';
$pdo = new PDO($dsn,$login, $mdp, array(
    PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"
  )
);
$stmt = $pdo->prepare('select civ,nom,prenom,naissance, mail, login, structure,fonction,fonction_precision  
from personnel 
order by nom,prenom,naissance');
$stmt->execute();
$agents=array();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
  $agents[]=$row;
}
header("content-type: application/json");
echo json_encode($agents);
 
unset($pdo);
?>

L'Ajax produit bien un très joli json.
Mais il n'est pas géré par le tableau dans index.php (bien entendu, le lien vers le chemin est bon)...
A l'arrivée, j'obtiens un tableau avec seulement les noms des colonnes, sans les data, et pas d'erreur javascript...

Qu'est-ce que j'ai encore oublié ?

Merci d'avance de vos lumières.