How to render radio button group with the jQuery DataTables

Osama Sbieh picture Osama Sbieh · Oct 18, 2015 · Viewed 11.6k times · Source

I'm using jQuery DataTables and need a way to render a radio button on a column in a datatable, this render must be through the JavaScript and not from JSON result.

Answer

Gyrocode.com picture Gyrocode.com · Oct 18, 2015

SOLUTION

You can use render option to produce content for a cell.

Consider the following example:

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/1us28',
    order: [[1, 'asc']],
    columnDefs: [
        { 
            targets: 0,
            searchable: false,
            orderable: false,
            render: function(data, type, full, meta){
               if(type === 'display'){
                  data = '<input type="radio" name="id" value="' + data + '">';      
               }

               return data;
            }
        }
    ]
});

DEMO

See this jsFiddle for code and demonstration.