jQuery - tablas de datos, cómo obtener la ID de columna

Question

Cómo obtener una ID de columna en el plugin datatable para jquery Necesito el ID de columna para la actualización en la base de datos.

Answer 1

fnGetPosition

Obtener los índices de matriz de una célula en particular desde su elemento DOM. Mejor usado en combinación con fnGetData().

Los parámetros de entrada

nNode: el nodo que desea encontrar la posición de . Esto puede ser una fila 'TR' o una celda 'TD' de la tabla. El parámetro de devolución depende de esta entrada . parámetro

Return:

int o array [int, int, int]: si el nodo es un registro de la tabla (TR), entonces el valor de retorno será un número entero con el índice de la fila en el objeto aoData . Si el nodo es una celda de tabla (TD), el valor devuelto será con [fila de índice aoData, columna índice (descontando filas ocultas), columna índice (incluidas las filas ocultas)].

ejemplo Código:

$(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

El fragmento de código anterior en realidad me ayudó a resolver este problema para mi situación particular. Aquí está mi código:

// 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

Creo que la respuesta estándar de arriba del sitio datatables.net no fue útil y no respondió la pregunta.

Creo que neko_ime quiere obtener el valor del encabezado de columna correspondiente a la columna del elemento seleccionado (ya que probablemente sea el mismo que el de la tabla, o el usuario tiene una asignación entre el encabezado de la tabla y la base de datos mesa).

aquí es cómo obtener la stitle (columna de valor de nombre) para una célula dada

(tenga en cuenta que tengo mi clave principal en la primera columna de cada fila, y ha asegurado que, aunque el uso de columnas móviles con ColReorder que iFixedColumns es 1, para mantener esa clave en la primera columna de mi tabla de datos es referenciado por oTable estoy asumiendo que tengo la referencia DOM celular, lo que yo llamo 'objetivo' a continuación):..

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+'"'); 

Esto es algo que tuve que resolver yo mismo, ya que estoy usando JEditable para permitir a los usuarios editar celdas en la ta ble.

Answer 4

Una simple pregunta como esta merece una buena solución simple de jQuery.

asuma que su identificación es en la fila 0 y desea acceder a él cuando se realiza una acción en la fila 5, por ejemplo,

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

Nota esto funciona para el filtro y paginada resultados también.

Estoy de acuerdo con @fbas la respuesta original no fue de mucha ayuda.

Answer 5

Aquí un ejemplo de cómo obtener un identificador después de hacer clic en la fila

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

Si necesitar toda la id en una mesa que tiene que utilizar un código como el siguiente:

$(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]]); 
}); 

espero ayuda!

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

Mi solución fue la siguiente: tener la clave primaria como la primera columna - esto se puede establecer como 'visible' o no. Mis enlaces de edición y eliminación están en la penúltima y última columna de la fila; tienen clases css de 'editar' y 'eliminar' respectivamente. Luego, utilizando rowCallBack, llamar a una función como esta:

<!-- 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() simplemente se añade la clave primaria (datos [0]) hasta el final de los enlaces href (lo que podría ser necesario). Esto ocurre antes de la tabla, y por lo tanto también funciona sobre la paginación.

Answer 8

Tuve el mismo caso de uso y terminé convirtiendo mi código en un plugin de datatables.net. El repositorio está aquí: DataTables CellEdit Plugin

la inicialización básica es rápido y fácil:

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()); 
}