How to create a Checkbox column dynamically

lmnguyen

I have this issue and don't know how to result yet. Any help/suggestion from you will be greatly appreciated

I have a Datatable which always been created dynamically.
By created dynamically, I meant whenever the table is loaded, a list of column objects (json format) will be used to define the table's columns.

I struggle to find a way how to create a checkbox column with some callback funtions, of course this must be define in the column object.

Thanks

Lan Nguyen

bindrid

the code below will check the columns type using the createdRow. Where appropriate, it will add a checkbox. You can see the whole thing work here http://jsbin.com/wuwaxac/edit?html,js,output but here are the important parts.

            // Table definition
            var dtapi = $('#example').DataTable({
                data: dataSet,
                pageLength: 3,
                // Use the createdRow callback to check column type
                createdRow: function (row, data, dataIndex) {
                    // get the column defs from settings
                    var colDefs = this.api().settings()[0].aoColumns;

                    // for each column in the columns
                    // this logic assumes that columns:[] contains an entery for every column.
                    $.each(colDefs, function (i, item) {
                        // get the associated td
                        var cell = $("td", row).eq(i);
                        // figure out data associated with the row
                        // it may be an array, it may be an object
                        cellData = null;
                        if (typeof item.data == "string" && typeof data == "object") {
                            cellData = data[item.data];
                        }
                        else if(Array.isArray(data)){
                            cellData = data[i];
                        }
                        switch (item.type) {
                            case "money":
                                // not implemented
                                break;
                            case "selectbox":
                                //not implemented
                                break;
                            case "checkbox":
                                // assumed that if the data is type boolean and it is true
                                // apply it to the checkbox
                                if (cellData === true) {
                                    cell.html("<input type='checkbox' checked />");
                                }
                                else {
                                    cell.html("<input type='checkbox'  />");
                                }
                            
                                break;
                            default:
                                // take no action, use defaults
                                break;
                        }
                    })
                   
                },

                // We have the option of invalidating and redrawing the table on each checkox change or
                // as I did, use the drawCallback to set the checkbox to match the row data 
                "drawCallback": function (settings) {
                    // not important on first draw so not worried about dtapi being defined on table initialization
                    if (dtapi) {
                        var visibleRows = $("td.cbcell").closest("tr");
                        visibleRows.each(function (i, item) {
                            $("td.cbcell input", item).prop("checked", dtapi.rows(item).data()[0].isChecked);
                        })
                    }
                },
                // this is the default but note that the drawCallback will not be called on each page change if set to true.
                "deferRender": false,
          
                "order": [1],
                "columns": [
                    {
                        "data": "isChecked",
                        // adding the class name just to make finding the checkbox cells eaiser
                    
                        "orderable": false,
                        "type":"checkbox",
                        // Put the checkbox in the title bar
                  

                    },
                    // rest of the columns
                    { data: "first_name", title: "First Name" },
                    { data: "last_name", title: "Last Name" },
                    { data: "position", title: "Position" },
                    { data: "office", title: "Office" },
                    { data: "start_date", title: "Start date" },
                    { data: "salary", title: "Salary" },
                    { data:null, title: "Int"}
                ]
            });

allan

You could use columns.render and just have it return the HTML needed for the checkbox.

Allan