Récupérer un champ dans une datatables jquery

**fbeaucamp** · 07/12/2017, 15h17

Bonjour

Je commence le javascript et jquery et je sollicite votre aide.

Je travail sous EasyPHP :
Apache 2.4.18 x86 -
PHP 5.6.19 x86
MySQL 5.7.11 x86

DataTables-1.10.16
jQuery-1.12.3

Dans mon fichier groupe.php, j'ai une liste d'établissements ( "eta" stockée dans une bases mysql en local) puis un bouton validation en dessous.

La partie HTML est la suivante :

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Datatables</title>
 
	<script src="Librairies/DataTables/jQuery-1.12.3/jquery-1.12.3.min.js"></script>
	<script type="text/javascript" src="Librairies/DataTables/datatables.min.js"></script>
 
</head>
<body>
 
<h1>Liste des établissements</h1>
 
 <table cellpadding="1" cellspacing="1" id="eta" class="display" width="100%">
    <thead>
    <tr>
        <th>Groupe</th>
        <th>RNE</th>
		<th>Type</th>
        <th>Nom</th>
        <th>Ville</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    	<th>Groupe</th>
        <th>RNE</th>
		<th>Type</th>
        <th>Nom</th>
        <th>Ville</th>
    </tr>
    </tfoot>
</table>
 
<button id="button">Validation</button>

Puis vient le coté javascript

Code :

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
 
<script type="text/javascript">
 
    $(document).ready(function () {
    	var selected = [];
 
        $('#eta').DataTable({
            "columns": [
				{"data": "logid"},
                {"data": "rne"},
                {"data": "etype"},
                {"data": "nom"},
                {"data": "ville"},
 
            ],
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: 'http://127.0.0.1/caseideMVC/etablissement/groupe/',
                type: 'POST',
            	complete:   function(){
                   $('table').css('background-color', 'lightgrey');
               },
            },
	        "rowCallback": function( row, data ) {
	            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
	                $(row).addClass('selected');   
	            } 
	        },
        });
        $('#eta tbody').on('click', 'tr', function () {
 
            var id = this.id;
            var index = $.inArray(id, selected);
            var table= $('#eta').DataTable();
 
            if ( index === -1 ) {
                selected.push( id );
            } else {
                selected.splice( index, 1 );  
            }
 
            $(this).toggleClass('selected');
 
            $('#button').click( function () {
 
                $.post("http://127.0.0.1/caseideMVC/etablissement/groupeupdate/",
                		 { name: 'donnees' },
                        function(name) {
                            $('#liste').html(name);
                         }
                    );     
            } );   
 
        } );
 
    });
 
</script>

J'en sélectionne un ou plusieurs et j'appuie sur le bouton validation pour spécifier que mon choix est fait.

J'aimerais pouvoir récupérer le champ "rne" (en POST idéalement) du tableau javascript selected.

J'arrive a récupérer le nombre de ligne sélectionnée avec l'instruction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var table= $('#eta').DataTable();
alert( table.rows('.selected').data().length +' row(s) selected' );

Je me doute que c'est simple , mais je n'arrive pas à trouver.
Merci pour votre aide.

**Toufik83** · 08/12/2017, 14h39

bonjour,
1-a-tu regardé dans l'onglet console de ton navigateur? par-ce-que je vois une virgule a la fin de la fonction ajax qui peut provoquer une erreur de syntaxe.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
"ajax": {
    .....,
    complete:   function(){
        $('table').css('background-color', 'lightgrey');
    },/* <== virgule*/
}

2-la ligne 50 $('#liste').html(name);, ça donne quoi?

**fbeaucamp** · 11/12/2017, 11h40

merci Toufik

J'ai enlevé la virgule dans mon appel ajax.

Dans ma console j'ai la chose suivante lorsque j'appelle

{draw: 1, recordsTotal: 1214, recordsFiltered: 1214, data: [,…]}
data:[,…]
0:{0: "0148888H", 1: "LEGT - DSDEN 14", 2: "DSDE", 3: "LEGT", 4: "2 PLACE EUROPE", 5: "", 6: "14200",…}
1:{0: "0149999A", 1: "HORS EP - DSDEN 14 - 1ER DEGRE", 2: "DSDE", 3: "EEPU", 4: "2 PLACE EUROPE", 5: "",…}
2:{0: "0508888D", 1: "EREA - DSDEN 50", 2: "DSDE", 3: "EREA", 4: "12 RUE DE LA CHANCELLERIE",…}
3:{0: "0618888H", 1: "LEGT - DSDEN 61", 2: "DSDE", 3: "LEGT",…}
4:{0: "0508888H", 1: "LEGT - DSDEN 50", 2: "DSDE", 3: "LEGT", 4: "12 RUE DE LA CHANCELLERIE",…}
5:{0: "0509999A", 1: "HORS EP - DSDEN 50 - 1ER DEGRE", 2: "DSDE", 3: "EEPU",…}
6:{0: "0148888D", 1: "EREA - DSDEN 14", 2: "DSDE", 3: "EREA", 4: "2 PLACE EUROPE", 5: "", 6: "14200",…}
7:{0: "0148888I", 1: "LP - DSDEN 14", 2: "DSDE", 3: "LP", 4: "2 PLACE EUROPE", 5: "", 6: "14200",…}
8:{0: "0619999A", 1: "HORS EP - DSDEN 61 - 1ER DEGRE", 2: "DSDE", 3: "EEPU",…}
9:{0: "0618888D", 1: "EREA - DSDEN 61", 2: "DSDE", 3: "EREA",…}
draw:1
recordsFiltered:1214
recordsTotal:1214

Le rne c'est le champ 0 :014XXXXX

Le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#liste').html(name);

ne renvoi rien car je ne sais pas s'il connais le 'table.rne' du post

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  { name: table.rne },
                        function(name) {
                            $('#liste').html(name);
                         }

Merci de ton aide

**Toufik83** · 11/12/2017, 15h03

Envoyé par fbeaucamp

Dans ma console j'ai la chose suivante lorsque j'appelle

tu veux dire que tu reçois ça après le clique sur le bouton #button ?

**fbeaucamp** · 12/12/2017, 08h34

Bonjour Toufik

Finalement un de mes collègues a pu se libérer du temps pour de donne un coup de main. merci pour ton aide.

Ci dessous la solution :

Code :

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
62
63
64
65
 
$(document).ready(function () {
	var selected = [];
 
    $('#eta').DataTable({
        "columns": [
			{"data": "logid"},
            {"data": "rne"},
            {"data": "etype"},
            {"data": "nom"},
            {"data": "ville"}
 
        ],      
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: 'http://127.0.0.1/caseideMVC/etablissement/groupe/',
            type: 'POST',
 
        	complete:   function(){
               $('table').css('background-color', 'lightgrey');
 
           }
 
        },
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
 
            }
        }
    });
    $('#eta tbody').on('click', 'tr', function () {
 
        var id = this.id;
        var index = $.inArray(id, selected);
        var table= $('#eta').DataTable();
 
        if ( index === -1 ) {
            selected.push( id ); 
        } else {
            selected.splice( index, 1 );
        }
        $(this).toggleClass('selected');
 
    } );
 
    $('#button').click( function () {
    	var table= $('#eta').DataTable();
        //alert( table.rows('.selected').data().length +' row(s) selected' );
        var selectArray = new Array(table.rows('.selected').data().length);
        for (var i = 0; i < table.rows('.selected').data().length; i++) {
   selectArray[i] = table.rows('.selected').data()[i][0];
 
		}
 
        $.post("http://127.0.0.1/caseideMVC/etablissement/groupeupdate/",
 
        		 { name: selectArray },
                function(name) {
                    $('#liste').html(name);
                 }
            );     
    } );   
 
});

Récupérer un champ dans une datatables jquery [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager