HTML Form Elements used in column renderer

ChrisWard

Hi folks,

There are no convenient demo links I can provide for my question, it's more of a best practice thing I think.

I am using DataTables via the API and doing my own (jQuery) Ajax calls to get data which I then display. Two of the columns are editable so I need HTML text input widget in them which I am currently providing via a cell renderer.

Along these lines (simplified snippet)

var table = $('#element').DataTable(
{
"columnDefs": [

                    {
                        "render": function (data, type, row) {
                               return '<div class="input-group date">' +
                                    '       <input type="text" class="form-control" data-field="bestEstimate">' +
                                    '</div>';
                        },
                        "targets": 1

                    },
   ...

My issue is that anytime the table is redrawn the renders fire and a NEW instance of the above is created. I am doing a lot of cell updates

            table.cell(rowIndex, columnIndex).data(value);

and each one invalidates the table a triggers a redraw.

My question is, what is the best practice for using form elements with tables built dynamically (via the API)? I see a similar thing mentioned in the DataTables documentation on Froms but that's for DOM-based data sort don't require the use of the renderer function.

https://datatables.net/examples/api/form.html

I guess I could "cache" the created <input> elements in my JavaScript but this feels like I am probably creating a complex solution to a common problem.

Many thanks,
Chris