How to add a checkBox to a row adding data via JS ?

Elfayer

I'd like to add a checkBox to the first column of my dataTable, the problem is that I load the data from JavaScript and I don't know how many rows I'll have in it. Here is the code I use :

$("#attributeTable").dataTable({
    "jQueryUI": true,
    "dom": '<"H"fr>t<"F"i>',
    "renderer": "bootstrap",
    "columns": [
        { "sTitle": "" }, // I want to add the checkboxes here
        { "sTitle": "Name" },
    ],
    "data": function() {
        return $.map(attributesStore, function(attribute) {
            return [[
                ..., // I don't know what to add here, because it's not a string, it is supposed to be the checkbox
                attribute["name"],
            ]];
        });
    }()
});

Elfayer

up

Elfayer

I finally tried the easiest way to do it from my point of view and it worked :

$("#attributeTable").dataTable({

"jQueryUI": true,

"dom": '<"H"fr>t<"F"i>',

"renderer": "bootstrap",

"columns": [

{ "sTitle": '<input type="checkbox" name="actionSelectorAll" />' },

{ "sTitle": "Name" },

],

"data": function() {

return $.map(attributesStore, function(attribute) {

return [[

'<input type="checkbox" name="actionSelector" />',

attribute["name"],

]];

});

}()

});

allan

Sounds like a fair approach to me - thanks for posting your solution. You could also use unshift to add an item to the existing array elements.

Allan

Elfayer

But I'm having issues to get the selected rows =/

I can get the selected checkboxes with : $("select[name='actionSelector']")

But I'm still working on getting the rows. If you have any idea, I'd be happy to hear it ! =)

And I'll let you know if I find anything.

allan

So you can get the selected elements, but you want the rows that they select? Use the $().map() function to get the $().closest() tr element for each checkbox and that will create a jQuery object with the rows you want :-)

Allan

Elfayer

That's exacly what I found =)

var data = function() {

return $.map($("input:checkbox[name=actionSelector]:checked"), function(element) {

return ($("#attributeTable").DataTable().row($(element).closest("tr"), 0).data()[2]); // [2] being the column index value I want to get from my dataTable here

});

}();