jQuery - datatables, how to get column id

Question

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

Answer 1

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

Answer 2

The code snippet above actually helped me solve this issue for my particular situation. Here's my 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;
}