web-dev-qa-db-fra.com

Lire la valeur de la colonne cachée dans JQuery

Je dois masquer une colonne de la table, mais je ne peux plus lire la valeur de la colonne masquée de la ligne sélectionnée.

 dtTable = $('#lookupTable').DataTable({
       "columnDefs": [
           {
               "targets": [ 0 ],
               "visible": false,
               "searchable": false               
           }
        ],  

        aaData: data,
        aoColumns: cols,
        paging: false,
        scrollCollapse: true,
        destroy: true

    });

comme vous le voyez, la première colonne est maintenant cachée. Et j'essaie de lire la valeur de la colonne avec ce code

    selectedIndex = $(this).find('td:eq(0)').text();

si je supprime <"visible": false> du code, je peux lire la valeur de la première colonne, mais s'il est masqué, il me donne la valeur de la deuxième colonne.

Je me suis fatigué de changer la propriété "witdh" mais cela n'a pas fonctionné ..

jquerydatatables
8
unbalanced

Le sélecteur CSS ne fonctionnera pas, car "visible": false dans votre columnDefs ne signifie pas que la colonne obtient la propriété de style display: none; équivalente dans le balisage. 

Au lieu de cela, vous devrez utiliser l'API DataTables pour obtenir les données dans la colonne masquée.

La fonction fnGetData fera l'affaire. Il renvoie les données textuelles de la cellule qui sont transmises en tant qu'argument à la fonction.

Voici l'exemple de la documentation

oTable.$('td').click( function () {
    var sData = oTable.fnGetData( this );
    alert( 'The cell clicked on had the value of '+sData );
});

Dans votre cas, la colonne est masquée, vous devrez donc la combiner avec un deuxième appel d'API. Supposons que vous cliquez sur la ligne avec la première colonne masquée, vous pouvez combiner la fonction fnGetData avec la fonction fnGetPosition.

var position = dtTable.fnGetPosition(this);
var hiddenColumnValue = dtTable.fnGetData(position)[0];

Consultez la documentation, elle contient de très bons exemples.

fnGetData ()

fnGetPosition ()

C'est le code de travail

  $('#lookupTable tbody').on('click', 'tr', function () {

        selectedIndex = dtTable.row(this).data()[0];   
 });
12
Daniel B

Passez par l’API dataTables et vous disposez de plusieurs méthodes pour récupérer les données des colonnes masquées de la bonne manière. Par exemple, vous pouvez utiliser cells . Comme vous le voyez sur le lien, vous pouvez utiliser tous les types de sélecteurs avec cells, comme un sélecteur jQuery. 

Voici un exemple très simple qui déconnecte les valeurs de la première colonne masquée:

var dtTable = $('#example').DataTable()  

dtTable.columns([0,1,2]).visible(false);

for (var i=0;i<10;i++) {
    console.log(dtTable.cells({ row: i, column: 0 }).data()[0]);
}

http://jsfiddle.net/oumtdd6k/

On ne soulignera jamais assez: Toujours passer par l'API, n'essayez pas d'utiliser jQuery traditionnel sur un dataTable initialisé} !! 

Dans ce cas, la raison est évidente: jQuery ne peut accéder qu'aux éléments réellement présents dans le DOM. Lorsque vous masquez des colonnes dans des tables de données, elles ne sont pas masquées comme dans display: none, elles ne sont tout simplement pas rendues!

8
davidkonrad

La bonne réponse est assez ancienne. Donc, si la bonne réponse ne vous convient pas. S'il vous plaît essayez cette méthode: 

selectedIndex = dtTable.row(this).data();

Ce code renverra l'objet JSON brut qui a été extrait pour cette ligne. quelque chose comme :

{
   "modify":"false",
   "lastModify":"Tuesday",
   "name":"abc",
   "DT_RowId":"row_1",
   "fileID":"0bde976"
}

Pour obtenir le "fileID", il vous suffit de:

alert("ID = "+selectedIndex.fileID);
2
Mohd Naved

Une autre âme est Add Css Class ID Visibilité sur le champ masqué et $ (this) .find ('td: eq (0)'). Text (); Retrive La valeur ..

0
Vivek