how to change the content of a header cell in dataTables?

Question

I'm using the dataTables plugin

On my sortable columns I want to replace the column text with a button.

However doing this:

$( oSettings.aoColumns[i].nTh).text();

I can retrieve the text of the respective column, BUT

$( oSettings.aoColumns[i].nTh).text("some text");
$( oSettings.aoColumns[i].nTh).html("<a href='#'>some button</a>");

Does not do anything.

Can somebody tell me why I can retrieve info from a cell but not edit it's content? Not necessarily a dataTables question, but maybe someone has run into something similar.

Thanks for help!

EDIT: This is the solution:
Inside your table call specify, which columns should be sortable = these get a .jqmSorter class

  "aoColumns": [
    /* Select */    {"bSortable": false },
    /* Type */      {"sClass": "jqmSorter"},
    /* From */      {"bSortable": false },
    /* Status */    {"bSortable": false },
],

Then call the fnHeaderCallback in which I'm replacing the header cell content with a JQM button:

   "fnHeaderCallback": function( nHead ) {      
       $(nHead).closest('thead').find('.jqmSorter').each( function () {
          var sortTitle = $(this).text(),
          sortButton = 
             $( document.createElement( "a" ) ).buttonMarkup({
                  shadow: false,
                  corners: false,
                  theme: 'a',
                  iconpos: "right",
                  icon: "ui-icon-radio-off"
                  })
             sortButton.find('.ui-btn-text').text(sortTitle);
             $(this).html( sortButton )
             sortButton.addClass("colHighTrigger");             
             });
       }

Answer 1

You can do it this way:

While defining table columns (define if you not doing it already), and use the sClass attribute of the table column definition (which is in JSON).

After this, that class will be applied to the table column.

After this, use the callback function of datatables : fnRowCallback

and in this, set the html as

$(nRow, '.your_class').html('Your HTML Values'); 

This will be called when each row of the table is rendered.

If you don't want it to do on each row, you can control that with an if-condition.

Answer 2

Use fnRender in your aoColumns settings, use it to return HTML code for that specific cell, drop downs, checkboxes, anything you want will work there.

"aoColumns": [
    /*Col 1*/
    {
     "mData": "RowID",
     "bSortable": false,
     "sClass": "jqmSorter",
     "fnRender": function(obj){
                     return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
                 }
    },
    /*Col 2*/
    {
     "bSortable": false,
     "sClass": "jqmSorter",
     "fnRender": function(obj){
                     return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
                 }
    }
]