jQuery - datatables, comment obtenir l'ID de colonne

Question

Comment obtenir un identifiant de colonne dans le plugin datatable pour jquery J'ai besoin d'un identifiant de colonne pour la mise à jour dans la base de données.

Answer 1

fnGetPosition

Obtenez les index de tableau d'une cellule particulier à partir de son élément DOM. Meilleur utilisé en combinaison avec fnGetData().

Paramètres d'entrée:

nNode: le nœud que vous voulez trouver la position de. Ceci peut être une ligne 'TR' ou une cellule 'TD' de la table. Le paramètre de retour dépend de cette entrée .

paramètre de retour:

int ou array [int, int, int]: si le noeud est une ligne de la table (TR), alors la valeur de retour sera un entier avec l'indice de la ligne dans l'objet aoData . Si le nœud est une cellule de table (TD), la valeur de retour sera un tableau avec [ligne d'index aoData, colonne index (actualisation des lignes cachées), index de la colonne (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

Answer 2

L'extrait de code ci-dessus me fait aidé à résoudre ce problème pour ma situation particulière. 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; 
} 

Answer 3

Je pense que la réponse des actions ci-dessus de datatables.net le site n'a pas été utile et n'a pas répondu à la question. Je crois que neko_ime veut obtenir la valeur d'en-tête de colonne correspondant à la colonne de l'élément sélectionné (puisque c'est probablement le même que le nom de la colonne dans la table, ou l'utilisateur a un mappage entre l'en-tête et la base de données table).

voici comment vous obtenez le stitle (valeur de nom de colonne) (note pour une cellule donnée

J'ai ma clé primaire dans la première colonne de chaque ligne, et ont fait en sorte que même si vous utilisez des colonnes mobiles avec ColReorder que iFixedColumns est 1, de garder cette clé dans la première colonne mon datatable est référencé par OTABLE Je suppose que j'ai la référence DOM cellulaire, que j'appelle « cible » ci-dessous):..

var value = target.innerHTML; 
var ret_arr = oTable.fnGetPosition(target); // returns array of 3 indexes [ row, col_visible, col_all] 
var row = ret_arr[0]; 
var col = ret_arr[1]; 
var data_row = oTable.fnGetData(row); 
var primary_key = data_row[0]; 

var oSettings = oTable.fnSettings(); // you can find all sorts of goodies in the Settings 
var col_id = oSettings.aoColumns[col].sTitle; //for this code, we just want the sTitle 

// you now have enough info to craft your SQL update query. I'm outputting to alert box instead  
alert('update where id="'+primary_key+'" set column "'+col_id+'" ('+row+', '+col+') to "'+value+'"'); 

C'est quelque chose que je devais me débrouiller, puisque j'utilise JEditable pour permettre aux utilisateurs d'éditer des cellules dans le ta ble.

Answer 4

Une simple question comme celle-ci mérite une bonne solution jQuery simple.

Supposons que votre id est sur la ligne 0 et que vous souhaitez y accéder lors de l'exécution d'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); 
}); 

Notez que cela fonctionne pour le filtre et les résultats paginés ainsi.

Je suis d'accord avec @fbas la réponse du stock était pas vraiment utile.

Answer 5

Voici un exemple de la façon d'obtenir une carte d'identité après avoir cliqué sur la ligne

$('#example tbody tr').live('click', function() { 
     var row = example .fnGetData(this); 
     id=row['id'];//or row[0] depend of situation 
     function(id); 
}); 

Si vous avez besoin tous les id dans une table, vous devez utiliser un code comme ceci:

$(exampleTable.fnGetNodes()).each(function() { 

    var aPos = exampleTable.fnGetPosition(this); 
    var aData = exampleTable.fnGetData(aPos[0]); 
    aData[aPos[0]] = this.cells[0].innerHTML; 

    IdSet.push(aData[aPos[0]]); 
}); 

espère aider!

Answer 6

var oTable;

/* Get the rows which are currently selected */ 
function fnGetSelected(oTableLocal) { 
    var aReturn = new Array(); 
    var aTrs = oTableLocal.fnGetNodes(); 

    for (var i = 0; i < aTrs.length; i++) { 
     if ($(aTrs[i]).hasClass('row_selected')) { 
      aReturn.push(aTrs[i]); 
     } 
    } 
    // console.log(aReturn); 
    return aReturn; 
} 

$(function() { 

    ///////////////// 
    //btn_EditCustomer 
    $('#btn_EditCustomer').on('click', function(e) { 
     var anSelected = fnGetSelected(oTable); 
     var rowData = oTable.fnGetData(anSelected[0]); 
     console.log(rowData[0]); 
    }); 
}); </script> 

Answer 7

Ma solution est la suivante: avoir la clé primaire comme la 1ère colonne - ce qui peut être défini comme « visible » ou non. Mes liens d'édition et de suppression sont dans la dernière mais une et dernière colonne de la ligne - ils ont respectivement des classes css de 'edit' et 'delete'. Ensuite, en utilisant 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() simplement la clé concatène primaire (données [0]) à la fin des liens href (quel qu'il faudrait peut-être). Cela se produit avant le rendu de la table, et fonctionne donc aussi sur la pagination.

Answer 8

J'ai eu le même cas d'utilisation et a fini par tourner mon code dans un large plugin datatables.net. La pension est ici: DataTables CellEdit Plugin

L'initialisation de base est rapide et facile:

table.MakeCellsEditable({ 
    "onUpdate": myCallbackFunction 
}); 

myCallbackFunction = function (updatedCell, updatedRow) { 
    var columnIndex = cell.index().column; 
    var columnHeader = $(table.column(columnIndex).header()).html(); 
    console.log("The header is: " + columnHeader); 
    console.log("The new value for the cell is: " + updatedCell.data()); 
}