La mise en œuvre de la case de sélection dans les tables de données Json de la source de données

Je suis en train de mettre en œuvre plusieurs lignes de sélection à l'aide des cases à cocher dans ma datatable et ne pouvez pas sembler obtenir la case à apparaître.

J'ai suivi cet article mot pour mot http://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/ et ça a été utile, mais je ne suis pas sûr de quoi faire à partir d'ici.

À l'avance j'ai été en utilisant le innerHTML d'une colonne de tenir une case à cocher pour chaque ligne, mais maintenant que j'ai besoin d'être en mesure de sélectionner plusieurs lignes, je pense que c'est mieux d'utiliser quelque chose prouvée à travailler comme l'exemple dans l'article.

De toute façon, ce que j'avais avant c'était ça:

    $(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>';
                }
            }
        })
    });

et maintenant:

    $(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)
);
}
}
});
});
});

Mon code 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>

Json:

select new string[] {"", user.Email, user.Forename + ' ' + user.Surname, user.UserID.ToString(), user.CategoryMaps.Where(c => c.CategoryID == id).Count().ToString() };
//if ticked, AddUser, otherwise RemoveUser
function Member(userID) {
var fullURL = document.URL;
var url = fullURL.split('EditUserGroup/');
var categoryID = url[1];
var postData = { 'userId': userID, 'categoryID': categoryID };
if ($("#" + userID).is(':checked')) {
$.post('/Admin/AddCategoryUser/', postData, function (data) {});
}
else {
$.post('/Admin/RemoveCategoryUser/', postData, function (data) {});
}
};

J'ai aussi mis un blanc "" au début de mon JSON afin de permettre la case (je pense) et je suis tout à fait bloqué pour le moment.

Toute aide serait grandement appréciée, merci.

Nouveau code

JS:

$(document).ready(function () {
var userData = @Html.Premières(Le Modèle.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'],
"createdRow": function (row, data, dataIndex) {
$(row).attr("id", "tblRow_" + data[0]);
}
});
//handle select all click control
$('#example-select-all').on('click', function () {
//check/uncheck all checkboxes in the table
var rows = table.rows({ 'search': 'applied' }).nodes();
$('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 interminate
el.indeterminate = true;
}
}
});
$('#frm-example').on('submit', function (e) {
var form = this;
//iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function () {
//if checkbox doesn't exist in DOM
if (!$.contains(document, this)) {
//if checkbox is checked
if (this.checked) {
//create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
}
});
//testing only
//output form data to console
$('#example-console').text($(form).serialize());
console.log("Form submission", $(form).serialize());
//prevent actual form submission
e.preventDefault();
});
});

HTML:

Appartenance Au Groupe D'Utilisateurs

        <form id="frm-example" @*action="path/to/script"*@ method="post">
<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>
</tr>
</thead>
</table>
<p>Press <b>Submit</b> to add selected users to user group.</p>
<p><button>Submit</button></p>
<pre id="example-console"></pre>
</form>