I use ColumnDef to create column in datatables and it return [object HTMLInputElement] in the note texterea but the other was fine

columnDefs: [
            {
                title: "STT",
                targets: 0,
                data: null,
                render: function (data, type, row, meta) {
                    return (meta.row   meta.settings._iDisplayStart   1);
                },
            },
            {
                title: "Loại sản phẩm*",
                targets: 1,
                data: null,
                render: function (data, type, row, meta) {
                    return '<textarea style="width: 300px;" id="productname'   data.id   '" type="text" onchange="ChangeProductName(\''   data.id   '\',this)" name="'   data.id   '" value="'   data.productname   '">'   data.productname   '</textarea>';
                }
            },
            {
                title: "Điều kiện*",
                targets: 2,
                data: null,
                render: function (data, type, row, meta) {
                    return '<textarea style="width: 300px;" id="condition'   data.id   '" type="text" onchange="ChangeCondition(\''   data.id   '\',this)" name="'   data.id   '" value="'   data.condition   '">'   data.condition   '</textarea>';
                }
            },
            {
                title: "Rebate(%)*",
                targets: 3,
                data: null,
                width: "70",
                render: function (data, type, row, meta) {
                    return '<div><input id="rebate'   data.id   '" type="number" style="width: 70px;" onchange="ChangeRebate(\''   data.id   '\',this)" name="'   data.id   '" value="'   data.rebate   '"></div>';

                }
            },
            {
                title: "Ghi chú",
                targets: 4,
                data: null,
                /*width: "250",*/
                render: function (data, type, row, meta) {
                    return '<textarea id="note'   data.id   '" type="text" onchange="ChangeNote(\''   data.id   '\',this)" name="'   data.id   '" value="'   data.note   '">'   data.note   '</textarea>';

                }
            },
            {
                title: "",
                targets: 5,
                data: null,
                className: "dt-center",
                width: "70",
                render: function (data, type, row, meta) {
                    // return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i style="cursor: pointer;font-size: 25px;padding-bottom: 30px;"  aria-hidden="true" onclick=removePG(\''   data.id   '\')></i>';
                    return '<div  style="cursor: pointer;font-size:25px;" ><i ></i></div>';
                }
            },
        ]

Here is the display

Why only the textarea in note have this error

I appreciate every explanation and suggestion about how I should fix this

CodePudding user response：

It's clearly textarea value issue. Looks like data.note is object, but it've got to be a string. Check it twice)