Récupérer un champ dans une datatables jquery

Version imprimable

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:

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:

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:

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.

08/12/2017, 14h39
Toufik83
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:

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?
11/12/2017, 11h40
fbeaucamp
merci Toufik

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

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

Citation:

{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:

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

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

1 2 3 4 { name: table.rne }, function(name) { $('#liste').html(name); }
Merci de ton aide
11/12/2017, 15h03
Toufik83

Citation:

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 ?

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:

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);
                 }
            );     
    } );   
 
});