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

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

ElfayerElfayer Posts: 26Questions: 4Answers: 0
edited May 2014 in DataTables 1.10

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

Answers

  • ElfayerElfayer Posts: 26Questions: 4Answers: 0

    up

  • ElfayerElfayer Posts: 26Questions: 4Answers: 0
    edited May 2014

    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"],

    ]];

    });

    }()

    });

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin
    Answer ✓

    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

  • ElfayerElfayer Posts: 26Questions: 4Answers: 0
    edited May 2014

    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.

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • ElfayerElfayer Posts: 26Questions: 4Answers: 0
    edited May 2014

    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

    });

    }();

This discussion has been closed.