Implementing checkbox selection in datatables with Json data source

I'm trying to implement multiple row selection using checkboxes in my datatable and can't seem to get the checkbox to appear.

I followed this article word for word http://ift.tt/1EeV1mp and it's been helpful but i'm not sure what to do from here.

Beforehand I was using the innerHTML of a column to hold a checkbox for each row but now that I need to be able to select multiple rows I think it's better to use something proven to work like the example in the article.

Anyway, what I had before was this:

    $(document).ready(function () {
        var userData = @Html.Raw(Model.EditUserGroupListJson);
        var table = $('#viewUsers').DataTable({
            "data": userData,
            "columns": [
                { "title": "Email" },
                { "title": "Full Name" },
                { "title": "Member" }
            ],

            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                var tblTds = $('>td', nRow);
                $(nRow).attr("id", 'tblRow_' + aData[2]);

                if (aData[3] == '0')
                {
                    tblTds[2].innerHTML = '<td><input type="checkbox" name="enrolstatus" value="' + aData[2] + '" id="' + aData[2] + '" onclick="Member(' + aData[2] + ')" /><label for="' + aData[2] + '"></label></td>';
                }
                else
                {
                    tblTds[2].innerHTML = '<td><input type="checkbox" name="enrolstatus" value="' + aData[2] + '" id="' + aData[2] + '" checked="checked" onclick="Member(' + aData[2] + ')" /><label for="' + aData[2] + '"></label>></td>';
                }
            }
        })
    });

and now:

    $(document).ready(function () {
        var userData = @Html.Raw(Model.EditUserGroupListJson);
        var table = $('#viewUsers').DataTable({
            'data': userData,
            'columnDefs': [{
                'targets': 0,
                'searchable': false,
                'orderable': false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta){
                    return '<input type="checkbox" name="id[]" value="'+ $('<div/>').text(data).html() + '">';
                }
            }],
            'order': [[1, 'asc']],

            'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                var tblTds = $('>td', nRow);
                $(nRow).attr("id", 'tblRow_' + aData[3]);
            }
        });

        //handle click on 'select all' control
        $('#example-select-all').on('click', function(){
            //get all rows with search applied
            var rows = table.rows({ 'search': 'applied' }).nodes();
            //check or uncheck boxes for all rows in the table
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });

        //handle click on checkbox to set state of 'select all' control
        $('#example tbody').on('change', 'input[type="checkbox"]', function(){
            //if checkbox is not checked
            if(!this.checked){
                var el = $('#example-select-all').get(0);
                // if 'select all' control is checked and has indeterminate property
                if (el && el.checked && ('indeterminate' in el)){
                    //set visual state of 'select all' control as indeterminate
                    el.indeterminate = true;
                }
            }
        });

        //handle form submission event
        $('#frm-example').on('submit', function(e){
            var form = this;

            //iterate over all checkboxes in the table
            table.$('input[type="checkbox"]').each(function(){
                //if checkbox doesnt exist in DOM
                if(!$.contains(document, this)){
                    //if checkbox is checked
                    if(this.checked){
                        //create hidden element
                        $(form).append(
                            $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                            );
                    }
                }
            });
        });
    });

My html:

    <table id="viewUsers" class="display table table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th><input name="select_all" value="1" id="example-select-all" type="checkbox"></th>                  
                <th>Email</th>
                <th>Full Name</th>
                <th>Member</th>
            </tr>
        </thead>
    </table>

I've also put a blank " " at the start of my JSON to allow for the checkbox (I think) and i'm quite stuck at the moment.

Any help would be greatly appreciated, thank you.