Datatables ajouter plusieurs enfant-lignes

J'ai un tableau accroché à la jQuery datatables. Sur cette base exemple je veux ajouter "caché" de l'enfant de lignes à afficher des informations supplémentaires.

J'ai le texte suivant jsfiddle où j'ai une paire nom/valeur.

<tr data-child-name="Name1" data-child-value="Value 1">
    <td class="details-control"></td>

function format ( name, value ) {
    return '<div>' + name + ': '+ value + '</div>';
}

$(document).ready(function () {
    var table = $('#example').DataTable({});

    //Add event listener for opening and closing details
    $('#example').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            //This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            //Open this row
            row.child( format(tr.data('child-name'), tr.data('child-value') )).show();
            tr.addClass('shown');
        }
    });
});

Ma question est comment puis-je ajouter plus d'une paire nom/valeur? De sorte que je peux définir plusieurs lignes comme dans le datatables.net exemple.

Ma source est un script php qui génère le code html comme dans le jsfiddle exemple.

C'est probablement une tâche facile, mais mon jQuery compétences sont très limitées 🙂

Merci.

Mise à JOUR:
Les données proviennent d'une requête ldap:

$ldapResults[$i]
echo "<td>" . utf8_encode($ldapResults[$i]['sn'][0]) . "</td>"

InformationsquelleAutor Tony Clifton | 2014-12-12

Si vous souhaitez conserver les données des attributs pour votre source de données, vous pouvez faire quelque chose comme ceci

JS:

function format ( dataSource ) {
    var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    for (var key in dataSource){
        html += '<tr>'+
                   '<td>' + key             +'</td>'+
                   '<td>' + dataSource[key] +'</td>'+
                '</tr>';
    }        
    return html += '</table>';  
}

$(function () {

      var table = $('#example').DataTable({});

      //Add event listener for opening and closing details
      $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.row(tr);

          if (row.child.isShown()) {
              //This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              //Open this row
              row.child(format({
                  'Key 1' : tr.data('key-1'),
                  'Key 2' :  tr.data('key-2')
              })).show();
              tr.addClass('shown');
          }
      });
  });

CSS:

 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

HTML:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />

<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-key-1="Value 1" data-key-2="Value 2">
            <td class="details-control"></td>
            <td>data 1a</td>
            <td>data 1b</td>
            <td>data 1c</td>
            <td>data 1d</td>
        </tr>
        <tr data-key-1="Value 1" data-key-2="Value 2">
            <td class="details-control"></td>
            <td>data 2a</td>
            <td>data 2b</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
    </tbody>
</table>

salut et merci, une autre question: que faire si vous voulez un autre enfant dans l'enfant?
pouvez-vous être plus précis svp ?
merci je voulais dire, que si vous voulez un sous-position à l'intérieur d'un sous-titre qui montre un tas de dossiers (plutôt que d'énumérer la valeur de clé de paris)?

InformationsquelleAutor Freez

1

Vous pouvez créer un tableau de données dont vous avez besoin pour afficher pour chaque ligne

Par exemple :
```
var data = [
  { key1 :'value1', key2 :'value2', key3 :'value3'}, //Row1
  { key1 :'value1', key2 :'value2'} //Row2
];
```
Et mise à jour de la format()
```
function format (index ) {
  var json_data =  data[parseInt(index)];
  var op = '';
  $.each(json_data, function(key, value){
    op +='<div>' + key + ': '+ value + '</div>';
  });
  return op;
}
```
Maintenant, il suffit d'ajouter les index du tableau dans un attribut personnalisé <tr data-child-index="1">

Et enfin row.child(format(tr.data('child-index'))).show();

EDIT : Pas de html changements nécessaires.

De calculer l'index de façon dynamique à l'aide de jQuery index()

row.child(format($('#example td.details-control').index($(this)))).show();

DÉMO
- les données proviennent d'une requête ldap: $ldapResults[$i] echo "<td>" . utf8_encode($ldapResults[$i]['sn'][0]) . "</td>" je ne peux pas modifier le moment.
- Je ne comprenais pas. Alors que dans le code ci-dessus, vous ne pouvez pas modifier??
- J'ai editted mon code. Un coup d'oeil.
InformationsquelleAutor karan3112

Si sont sont à obtenir des données json de montrer que l'enfant puis l'essayer comme,

else {
    //Open this row
    //pass your json data to show in details
    row.child( format(myJsonData)).show();
    tr.addClass('shown');
}

Et dans la fonction format de le modifier comme,

function format ( json ) {
    var $json=$.parseJSON(json);//if not parsed
    var str='';
    $json.each(function(key,value){
       str += '<div>'+key+':'+value+'</div>';
    });
    return str;
}

InformationsquelleAutor Rohan Kumar

Vous devez vous connecter pour publier un commentaire.