Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - datatables, how to get column id

How to get a column id in datatable plugin for jquery I need column id for the update in database.

like image 743
neko_ime Avatar asked Mar 05 '10 02:03

neko_ime


2 Answers

fnGetPosition

Get the array indexes of a particular cell from it's DOM element. Best used in combination with fnGetData().

Input parameters:

nNode : the node you want to find the position of. This my be either a 'TR' row or a 'TD' cell from the table. The return parameter depends on this input.

Return parameter:

int or array [ int, int, int ] : if the node is a table row (TR) then the return value will be an integer with the index of the row in the aoData object. If the node is a table cell (TD) then the return value will be an array with [ aoData index row, column index (discounting hidden rows),column index (including hidden rows) ].

Code example:

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

From datatables.net

like image 133
James Kolpack Avatar answered Sep 22 '22 13:09

James Kolpack


I think the stock answer above from datatables.net site was not helpful and didn't answer the question.

I believe neko_ime wants to get the column header value corresponding to the column of the selected item (since this is probably the same as the column name in the table, or the user has a mapping between the table header and the database table).

here is how you get the sTitle (column name value) for a given cell

(note I have my primary key in first column of every row, and have made sure that even if using movable columns with ColReorder that iFixedColumns is 1, to keep that key in the first column. my datatable is referenced by oTable. I am assuming that I have the cell DOM reference, which I call 'target' below):

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

This is something I had to figure out myself, since i'm using JEditable to allow users to edit cells in the table.

like image 33
fbas Avatar answered Sep 19 '22 13:09

fbas