How to add html element for row?

rusumat

Hi;
I adding "checkbox element" to row in table, but not working. It seem text "[object Object]".

var collectiveFeesReceiptList=[];
table.DataTables() content;

data: collectiveFeesReceiptList,
            columns: [
                { data: 'Column1' },
                { data: 'Column2' },
                { data: 'Column3' },
                { data: 'Column4' },
                { data: 'RemoveCheckBox' }
            ]

My codes;

function GeneratedItemsTable() {
            if (collectiveFeesReceiptList.length > 0) {
                $datatable.clear().draw();
                $.each(collectiveFeesReceiptList, function (i, val) {
                    var flatid = collectiveFeesReceiptList[i].FlatId;
                    var $removecheckbox = $('<input id="RemoveCheckBox' + flatid + '" type="checkbox" data-noapply="true">');
                    $removecheckbox[0].checked = true;
                    $removecheckbox.change(function () {
                        var check = $(this)[0].checked;
                        if (check == true) {
                            ...
                        }
                        else {
                            ...
                        }
                    });
                    collectiveFeesReceiptList[i].RemoveCheckBox = $removecheckbox;
                });
                $datatable.rows.add(collectiveFeesReceiptList).draw();
            }
            else {
                $datatable.clear().draw();
            }
        }

I want to see this;

How to fix this?
Thanks.

colin

Hi Rusumat,

Take a look at this live example - this shows a checkbox being added to the end of all the rows.

Hope that helps,

Cheers,

Colin

rusumat

Thank you very very much. I solved my problem with your opinion, thank you again
Codes for those interested;

table.DataTables() content;

data: collectiveFeesReceiptList,
            columnDefs: [{
                "targets": -1,
                "render": function (data, type, row) {
                    var checkbox = '<input type="checkbox"id="RemoveCheckBox' + data.FlatId + '" data-noapply="true" checked="checked">';
                    return checkbox;
                }
            }],
            columns: [
                { data: 'Column1' },
                { data: 'Column2' },
                { data: 'Column3' },
                { data: 'Column4' },
                { data: null }
            ]

function content;

function GeneratedItemsTable() {
            if (collectiveFeesReceiptList.length > 0) {
                $datatable.clear().draw();
                $datatable.rows.add(collectiveFeesReceiptList).draw();
            }
            else {
                $datatable.clear().draw();
            }
        }

colin

Excellent, glad to hear it's all up and running!!

C