DataTables caché ligne de détails, par exemple - l'en-tête du tableau est mal placé (test de cas ci-joint)

Je suis en train de créer une table où plus de détails peuvent être vus lors de la plus-l'image est cliquée - similaire à la DataTables caché ligne détails exemple

Malheureusement il y a un avertissement imprimé en alerte JavaScript, et aussi la table d'en-tête est déplacée, comme si il n'y aurait trop ou pas assez de cellules de tableau:

DataTables caché ligne de détails, par exemple - l'en-tête du tableau est mal placé (test de cas ci-joint)

J'ai préparé un simple cas de test, qui fonctionnent instantanément, lorsque vous enregistrez un fichier et l'ouvrir dans un navigateur:

<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var data = [
{"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
{"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
];
$(function() {
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table bgcolor="yellow" cellpadding="8" border="0" style="padding-left:50px;">';
sOut += '<tr><td>BSN:</td><td>' + aData['Details']['BSN'] + '</td></tr>';
sOut += '<tr><td>Station:</td><td>' + aData['Details']['StationName'] + '</td></tr>';
sOut += '<tr><td>Project:</td><td>' + aData['Details']['ProjectName'] + '</td></tr>';
sOut += '</table>';
return sOut;
}
var fails = $('#fails').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
aaData: data,
aaSorting: [[2, 'desc']],
aoColumns: [
{ mDataProp: 'Test',        bSearchable: true,  bSortable: true },
{ mDataProp: 'Measurement', bSearchable: true,  bSortable: true },
{ mDataProp: 'Total',       bSearchable: false, bSortable: true },
{ mDataProp: 'A',           bSearchable: false, bSortable: true },
{ mDataProp: 'B',           bSearchable: false, bSortable: true },
{ mDataProp: 'C',           bSearchable: false, bSortable: true },
{ mDataProp: 'D',           bSearchable: false, bSortable: true },
]
});
var th = document.createElement('th');
var td = document.createElement('td');
td.innerHTML = '<img src="http://www.datatables.net/release-datatables/examples/examples_support/details_open.png" class="details">';
$('#fails tbody th').each(function() {
this.insertBefore(th, this.childNodes[0]);
});
$('#fails tbody tr').each(function() {
this.insertBefore(td.cloneNode(true), this.childNodes[0]);
});
$('#fails tbody').on('click', 'td img.details', function() {
var nTr = $(this).parents('tr')[0];
if (fails.fnIsOpen(nTr)) {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
fails.fnClose(nTr);
} else {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
}
});
});
</script>
</head>
<body>
<table id="fails" cellspacing="0" cellpadding="4" width="100%">
<thead>
<tr>
<th>Test</th>
<th>Measurement</th>
<th>Total</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Quelqu'un s'il vous plaît avoir une idée de comment résoudre ce problème?

J'ai essayé d'ajouter/enlever <th>Details</th> dans le corps HTML, mais il n'a pas aidé.

J'ai aussi posé cette question à la Tables de données du forum.

Mise à JOUR:

J'ai reçu des commentaires utiles par les tables de données de l'auteur et ont décidé de la faire précéder de la plus-image pour le contenu de la première cellule de chaque ligne - au lieu de l'ajout d'une nouvelle cellule de chaque ligne.

Malheureusement j'ai un nouveau problème: la plus-image est affichée, mais la orinigal texte (le nom de Test) est parti:

DataTables caché ligne de détails, par exemple - l'en-tête du tableau est mal placé (test de cas ci-joint)

Voici mon code (le plus-l'image est préfixé par propTest):

<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var data = [
{"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
{"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
];
function propTest(data, type, val) {
if (type === 'set') {
console.log(val); //for some reason prints "null"
data.name = val;
data.display = '<img src="http://www.datatables.net/release-datatables/examples/examples_support/details_open.png" width="20" height="20" class="details"> ' + val;
return;
}
if (type === 'display') {
return data.display;
}
//'sort', 'type', 'filter' and undefined
return data.name;
}
$(function() {
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table bgcolor="yellow" cellpadding="8" border="0" style="padding-left:50px;">';
sOut += '<tr><td>BSN:</td><td>' + aData['Details']['BSN'] + '</td></tr>';
sOut += '<tr><td>Station:</td><td>' + aData['Details']['StationName'] + '</td></tr>';
sOut += '<tr><td>Project:</td><td>' + aData['Details']['ProjectName'] + '</td></tr>';
sOut += '</table>';
return sOut;
}
var fails = $('#fails').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
aaData: data,
aaSorting: [[2, 'desc']],
aoColumns: [
{ mData: propTest,      bSearchable: true,  bSortable: true },
{ mData: 'Measurement', bSearchable: true,  bSortable: true },
{ mData: 'Total',       bSearchable: false, bSortable: true },
{ mData: 'A',           bSearchable: false, bSortable: true },
{ mData: 'B',           bSearchable: false, bSortable: true },
{ mData: 'C',           bSearchable: false, bSortable: true },
{ mData: 'D',           bSearchable: false, bSortable: true }
]
});
$('#fails tbody').on('click', 'td img.details', function() {
var nTr = $(this).parents('tr')[0];
if (fails.fnIsOpen(nTr)) {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
fails.fnClose(nTr);
} else {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
}
});
});
</script>
</head>
<body>
<table id="fails" cellspacing="0" cellpadding="4" width="100%">
<thead>
<tr>
<th>Test</th>
<th>Measurement</th>
<th>Total</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

OriginalL'auteur Alexander Farber | 2013-09-09

  1. 9

    Il y a plusieurs manières de réaliser ce type de comportement avec les tables de données (DT). Vous pouvez atteindre votre objectif de départ ou d'utiliser la même colonne pour le réceptacle et le Test de données.

    Je prends le temps de montrer plusieurs options, comme je suis en espérant que cela puisse servir de référence à d'autres demandant de faire quelque chose de similaire.

    Pour tous les suivants, votre table doit contenir toutes les colonnes souhaitées avant le DT de la création (statiquement ou dynamiquement).

    Expander dans une colonne séparée

    À l'aide d'un contenu par défaut de la propriété:

    C'est l'option qui nécessite le moins de modification de votre exemple et est probablement le plus facile. Il suffit d'ajouter une sDefaultContent option pour votre colonne supplémentaire:

    {
mData: null,
bSearchable: false,
bSortable: false,
sDefaultContent: '<div class="expand /">',
sWidth: "30px"
},

    La mData propriété est définie à null, que son contenu n'a rien à voir avec la ligne du tableau de données. Cela rend DT l'utilisation de la valeur dans sDefaultContent.

    J'ai pris la liberté d'utiliser le CSS pour l'expandeur bouton, ce qui la rend l'exemple le plus simple et dissocie également le comportement et la présentation.

    Le CSS, j'ai utilisé:

    tr div.expand {
width: 20px;
height: 20px;
background-image: url('http://www.datatables.net/release-datatables/examples/examples_support/details_open.png');
}
tr div.open {
background-image: url('http://www.datatables.net/release-datatables/examples/examples_support/details_close.png');  
}

    et l'extenseur de la fonction:

    $('#fails tbody').on('click', 'td div.expand', function () {
var nTr = $(this).parents('tr')[0];
if (fails.fnIsOpen(nTr)) {
$(this).removeClass('open');
fails.fnClose(nTr);
} else {$.fn.dataTableExt.sErrMode = 'throw' ;
$(this).addClass('open');
fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
}
});

    Nous ciblons un div avec un expand classe, et de basculer son open classe.

    DataTables caché ligne de détails, par exemple - l'en-tête du tableau est mal placé (test de cas ci-joint)

    JSBin exemple.

    Expander contenues dans la première colonne

    À l'aide d'un Formateur:

    Vous pouvez spécifier un aoColumnDefs tableau de config, qui est plus puissant et flexible que l' aoColumns config.

    La spécification d'un convertisseur de fonction pour que la colonne se fait via lemRender config de la propriété.

    La colonne paramètres:

    aoColumnDefs: [{
aTargets: [0],
mData: 'Test',
bSearchable: true,
bSortable: true,
mRender: expandRenderer
},
...
]

    Que la fonction est appelée plusieurs fois dans différents contextes et devrait dire à la DT comment afficher les données dans la table elle-même, ainsi que pour aider à déterminer le type de données pour le tri et le filtrage des fins.

    Moteur de rendu:

    function expandRenderer(data, type, full) {
switch (type) {
case 'display':
return '<div class="expand-wrapper">'+
'<span class="expand"></span>'+
'<span class="data">'+
data+
'</span></div>';
case 'type':
case 'filter':
case 'sort':
return data;
}
}

    Il prend 3 arguments:

    • data: Les données de la ligne du tableau, dans ce cas, la chaîne stockée dans Test.
    • type: Le type de demande. Il indique que la DT s'attend à obtenir de nouveau:
      • 'display': ce qui va être affiché dans la cellule elle-même.
      • 'type': ce que retourné par la fonction sera utilisée pour déterminer la ligne type de données.
      • 'filter', 'sort': Les données utilisées dans filration (recherche) et de tri de la table.
    • full: Les données de cette ligne.

    Cette fois, j'ai décidé d'utiliser spans enveloppé par un div.
    Pour le centre de l'icône à la verticale et le tableau de tout garder dans une ligne, j'ai utilisé le code CSS suivant:

    tr span.expand {
width: 20px;
height: 20px;
background-image: url('http://.../details_open.png');
display:inline-block;
vertical-align: middle;
margin-right: 5px;
}
div.expand-wrapper {
white-space:nowrap;
}

    vertical-align: middle ici fonctionne comme prévu, puisque c'est une inline d'affichage (inline-block, en particulier).

    Sans cette CSS, DT ne serait pas la poignée de la largeur des colonnes gracieusement, comme la première colonne n'est pas vraiment conscient de l'espace supplémentaire pris par l'expandeur.

    Sans ce CSS:
    DataTables caché ligne de détails, par exemple - l'en-tête du tableau est mal placé (test de cas ci-joint)

    Avec ce CSS:

    DataTables caché ligne de détails, par exemple - l'en-tête du tableau est mal placé (test de cas ci-joint)

    Et le correspondant JSBin exemple.

    Astuce:

    Je n'aime pas l'utilisation de alert() pour afficher les erreurs. Pour DT, vous pouvez modifier ce comportement en modifiant son mode d'erreur de réglage:

    $.fn.dataTableExt.sErrMode = 'throw' ;

    Cela va lever une exception, de sorte que vous pouvez attraper JIT à l'aide de votre console ou de l'avoir enregistré si non interceptée.

    Ressources:

    DataTable options de colonne.

    DataTable options de référence rapide.

    PS,

    Une personnalisation plus poussée peut être fait par le passage d'une fonction comme la mData paramètre de configuration, mais c'est au-delà de la portée de cette réponse.

    OriginalL'auteur MasterAM