Radio button column in AJAX sourced table.

Woldere

HTML

<table id="datatable-1" class="table display">
  <thead>
    <tr>
      <th>Select</th>
      <th>Type</th>
      <th>Domain</th>
    </tr>
    </thead>
  </table>

JS

$(document).ready(function() {
    $('#datatable-1').dataTable( {
        "ajax": {
            "url": "/path/to/ajax",
            "dataSrc": ""
        },
        "fields": [
        { },  // <-- I want a radio button here //
        { label: "Type",       name:  "touchpointType" },
        { label: "Domain",        name:  "touchpointName" }
        ],
        "columns": [
                { },  // <-- I want a radio button here //
            { "data": "touchpointType" },
            { "data": "touchpointName" }
        ]
    } );
} );

---

The radio button should have an ID from the database as well. I've already had this working with DOM sourced table, where I'd just do it with php, but I cannot figure out how to do it when i populate the table with ajax/json.

The radio button has an onclick function that makes another table appear, with filtered rows based on the ID.

var touchpointID = $('.touchpoint:checked').val();
    var measTable = $('#datatable-3').dataTable();
measTable.fnFilter(touchpointID, 5);
$('#table-measures').show();

Is there a simple way to get that radio button column? Does datatables provide an easier better solution?

Thanks a lot in advance.

vogomatix

Add a columns.render attribute to the column in question to draw your radio button

"columns": [
    {"render": function ( data, type, full, meta ) {
        return '<input type="radio" name="touchbutton" value="wibble">';
    }},  // here's a radio button, modify to use data to populate it 
    { "data": "touchpointType" },
    { "data": "touchpointName" }