How to add a checkBox to a row adding data via JS ?
How to add a checkBox to a row adding data via JS ?
Elfayer
Posts: 26Questions: 4Answers: 0
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"],
]];
});
}()
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
up
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"],
]];
});
}()
});
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
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.
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
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
});
}();