[jsGrid] Initialisation tableau

Version imprimable

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:

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:

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.

salut,
as-tu essayé d'initialiser le jsGrid dans $(document).ready() ?

Code:

1
2
3
4
5
6
 
$(document).ready(function(){
  $("#jsGrid").jsGrid({
    .....
  }):
});

EDIT : c'est vrai que la documentation n'aide pas trop mais bon..., google est toujours un bon choix.

il faut utiliser $.Deferred() et $.promise() dans le controller.

supposons que le php renvoi le résultat suivant :

Code:

1
2
3
4
5
6
7
8
9
10
 
<?php 
echo json_encode([
	["civ"=>"1","nom"=>"name_1","prenom"=>"prenom_1",'naissance'=>'naissance_1',"mail"=>"mail_1","login"=>"login_1","structure"=>"struct_1",'fonction'=>"func_1",'fonction_precision'=>'func_presi_1']
	,["civ"=>"2","nom"=>"name_2","prenom"=>"prenom_2",'naissance'=>'naissance_2',"mail"=>"mail_2","login"=>"login_2","structure"=>"struct_2",'fonction'=>"func_2",'fonction_precision'=>'func_presi_2']
	,["civ"=>"3","nom"=>"name_3","prenom"=>"prenom_3",'naissance'=>'naissance_3',"mail"=>"mail_3","login"=>"login_3","structure"=>"struct_3",'fonction'=>"func_3",'fonction_precision'=>'func_presi_3']
	,["civ"=>"4","nom"=>"name_4","prenom"=>"prenom_4",'naissance'=>'naissance_4',"mail"=>"mail_4","login"=>"login_4","structure"=>"struct_4",'fonction'=>"func_4",'fonction_precision'=>'func_presi_4']
	,["civ"=>"5","nom"=>"name_5","prenom"=>"prenom_5",'naissance'=>'naissance_5',"mail"=>"mail_5","login"=>"login_5","structure"=>"struct_5",'fonction'=>"func_5",'fonction_precision'=>'func_presi_5']
]);
?>

attention : les noms des clés doivent être exactement les mêmes que ceux déclarés dans "fileds" de javascript, le plugin est sensible a la case.

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
37
38
39
 
$(document).ready(function(){//pas obliger si le script est en bas de page, par-contre s'il est dans la balise head(haut de page), dans ce cas c'est obliger
	$("#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(){
		var deferred = $.Deferred();
			$.ajax({
				url: "./ajax/query.php"
				,dataType: 'json'
			}).done(function(d){
				deferred.resolve(d);
			});
			return deferred.promise();
		}
	}
    ,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" }
    ]
  });
});

Merci bien Toufik.

Malheureusement, ça ne change rien...

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
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
62
<!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>
  $(document).ready(function(){
    $("#jsGrid").jsGrid({
      height: "auto",
      width: "auto",
      sorting: true,
      paging: false,
      autoload: true,
      controller:{
        loadData: function(){
        var deferred = $.Deferred();
          $.ajax({
            url: "./ajax/query.php"
            ,dataType: 'json'
          }).done(function(d){
            deferred.resolve(d);
          });
          return deferred.promise();
        }
      },
      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>

16/11/2018, 22h05
Dendrite

Ouf ! Merci Toufik !
Je l'ai placé en dernier dans le body (sans changer l'appel du coup) et ça marche ! Merci !
Développez est vraiment un forum génial ! :mrgreen:
18/11/2018, 19h12
Toufik83

content pour toi que ça a fonctionné, mais juste un petit truc que je n'ai pas vu dans ton poste 3, tu as oublié de fermer la fonction jQuery.ready(), la parenthèse de fermeture ');'.
c'est pour ça que le script n'a pas fonctionné avec $(document).ready().

Merci Toufik. Je corrige de ce pas et pose donc ici le code qui tourne. :coucou:

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
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>
	</head>
	<body>
    <div id="jsGrid">
    </div>
    <script>
    $(document).ready(function(){
    $("#jsGrid").jsGrid({
      height: "auto",
      width: "auto",
      sorting: true,
      paging: false,
      autoload: true,
      controller:{
        loadData: function(){
        var deferred = $.Deferred();
          $.ajax({
            url: "./ajax/query.php"
            ,dataType: 'json'
          }).done(function(d){
            deferred.resolve(d);
          });
          return deferred.promise();
        }
      },
      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>
  </body>
</html>