jQuery datatables, comment obtenir l'id de colonne

fnGetPosition

Obtenir les indices de tableau d'un particulier
de la cellule à partir de l'élément DOM. Mieux utilisé
en combinaison avec fnGetData().

Paramètres d'entrée:

nNode : le nœud que vous voulez trouver le
la position de. Ce que mon être soit un "TR"
ligne ou un 'TD' cellule de la table. L'
paramètre de retour dépend de ce
d'entrée.

Paramètre de retour:

int ou d'une matrice [ int, int, int ] : si
le nœud est une ligne de tableau (TR) puis le
valeur de retour sera un entier avec
l'indice de la ligne dans la aoData
objet. Si le nœud est une cellule de tableau
(TD), alors la valeur de retour sera un
tableau avec [ aoData indice de ligne, de colonne
index (actualisation des lignes masquées),colonne
l'indice (y compris les lignes cachées) ].

Exemple de Code:

$(document).ready(function() {
    $('#example tbody td').click( function () {
        /* Get the position of the current data from the node */
        var aPos = oTable.fnGetPosition( this );

        /* Get the data array for this row */
        var aData = oTable.fnGetData( aPos[0] );

        /* Update the data array and return the value */
        aData[ aPos[1] ] = 'clicked';
        this.innerHTML = 'clicked';
    } );

    /* Init DataTables */
    oTable = $('#example').dataTable();
} );

De datatables.net

L'extrait de code ci-dessus fait m'a aidé à résoudre ce problème pour mon cas en particulier. Voici mon code:

//My DataTable
var oTable;
$(document).ready(function() {
/*  You might need to set the sSwfPath! Something like:
*   TableToolsInit.sSwfPath = "/media/swf/ZeroClipboard.swf";
*/
TableToolsInit.sSwfPath = "../../Application/JqueryPlugIns/TableTools/swf/ZeroClipboard.swf";
oTable = $('#tblFeatures').dataTable({
//"sDom": '<"H"lfr>t<"F"ip>', //this is the standard setting for use with jQueryUi, no TableTool
//"sDom": '<"H"lfrT>t<"F"ip>', //this adds TableTool in the center of the header
"sDom": '<"H"lfr>t<"F"ip>T', //this adds TableTool after the footer
//"sDom": '<"H"lfrT>t<"F"ip>T', //this adds TableTool in the center of the header and after the footer
"oLanguage": { "sSearch": "Filter this data:" },
"iDisplayLength": 25,
"bJQueryUI": true,
//"sPaginationType": "full_numbers",
"aaSorting": [[0, "asc"]],
"bProcessing": true,
"bStateSave": true, //remembers table state via cookies
"aoColumns": [
/* CustomerId */{"bVisible": false },
/* OrderId */{"bVisible": false },
/* OrderDetailId */{"bVisible": false },
/* StateId */{"bVisible": false },
/* Product */null,
/* Description */null,
/* Rating */null,
/* Price */null
]
});
//uncomment this if you want a fixed header
//don't forget to reference the "FixedHeader.js" file.
//new FixedHeader(oTable);
});
//Add a click handler to the rows - this could be used as a callback
//Most of this section of code is from the DataTables.net site
$('#tblFeatures tr').click(function() {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
$(this).addClass('row_selected');
//Call fnGetSelected function to get a list of selected rows
//and pass that array into fnGetIdsOfSelectedRows function.
fnGetIdsOfSelectedRows(fnGetSelected(oTable));
}
});
function fnGetSelected(oTableLocal) {
var aReturn = new Array();
//fnGetNodes is a built in DataTable function
//aTrs == array of table rows
var aTrs = oTableLocal.fnGetNodes();
//put all rows that have a class of 'row_selected' into
//the returned array
for (var i = 0; i < aTrs.length; i++) {
if ($(aTrs[i]).hasClass('row_selected')) {
aReturn.push(aTrs[i]);
}
}
return aReturn;
}
//This code is purposefully verbose.
//This is the section of code that will get the values of
//hidden columns in a datatable
function fnGetIdsOfSelectedRows(oSelectedRows) {
var aRowIndexes = new Array();
var aRowData = new Array();
var aReturn = new Array();
var AllValues;
aRowIndexes = oSelectedRows;    
//The first 4 columns in my DataTable are id's and are hidden.
//Column0 = CustomerId
//Column1 = OrderId
//Column2 = OrderDetailId
//Column3 = StateId
//Here I loop through the selected rows and create a
//comma delimited array of id's that I will be sending
//back to the server for processing.
for(var i = 0; i < aRowIndexes.length; i++){
//fnGetData is a built in function of the DataTable
//I'm grabbing the data from rowindex "i"
aRowData = oTable.fnGetData(aRowIndexes[i]);
//I'm just concatenating the values and storing them
//in an array for each selected row.
AllValues = aRowData[0] + ',' + aRowData[1] + ',' + aRowData[2] + ',' + aRowData[3];
alert(AllValues);
aReturn.push(AllValues);
}
return aReturn;
}

Une simple question comme celle-ci mérite un bon jQuery simple solution.

Assumer votre id sur la ligne 0
et vous souhaitez y avoir accès lors de l'exécution de l'action sur la ligne 5 par exemple

$('td:eq(5)').click(function (){
var id  = $(this).parent().find('td:eq(0)').html();
alert('The id is ' + id);
});

Remarque cela fonctionne pour le filtre et paginé résultats.

Je suis d'accord avec @fbas le stock de réponse n'était pas vraiment utile.

Ma solution était la suivante: la clé primaire comme la 1ère colonne - ce qui peut être défini comme "visible" ou pas. Mon de modifier et de supprimer les liens sont dans l'avant-dernière et la dernière colonne de la ligne - qu'ils ont des classes css de "modifier" et "supprimer", respectivement. Ensuite, à l'aide de rowCallBack, appeler une fonction comme ceci:

<!-- datatables initialisation -->
"rowCallback": function( row, data ) {
setCrudLinks(row, data);                  
}
function setCrudLinks(row, data) {
d = $(row).find('a.delete');
d.attr('href', d.attr('href')+'/'+data[0]);
e = $(row).find('a.edit');
e.attr('href', e.attr('href')+'/'+data[0]);
}

setCrudLinks() ajoute simplement la clé primaire (data[0]) à la fin de la liens href (quoi qu'il faudrait peut-être). Ce qui se passe avant de la table de rendu, et fonctionne donc sur la pagination trop.