Problem with adding new empty row

mariamdev

HTML :

        <div class="datatable-header">
             <button type="button" name="add" id="add" class="float-right btn btn-info">Add</button>
         </div>

        <div class="table-responsive">
            <table class="table datatable-basic table-striped table-hover table-bordered"
                   data-data-url="<?= $this->url('bla/blabla/ajax', ['action' => 'list']) ?>
                   id="text-dataTable"
            >
                <thead>
                <tr>
                    <th>Text</th>
                    <th>Actions</th>
                 </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

JQuery:

 const textTable = $('#text-dataTable');
        const textDataTable = textTable.DataTable({
            "lengthMenu": [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
            "dom": '<"top"fBr><"datatable-scroll-wrap"t><"bottom mt-2"ilp>',
            "lengthChange": true,
            "pageLength": 25,
            "autoWidth": false,
            "searching": false,
            "order": [[0, 'asc']],
            "ajax": {
                "url": textTable.data('data-url'),
                "type": "POST"
            },
            "columnDefs": [
                { targets: [1], className: "text-center"},
            ],
            "columns": [
                { data: "text", "render": function (data, type, full, meta) {
                        return '<textarea style="width: 100%"  contenteditable id="text" class="update" data-id="'+full.id+'" data-column="text">' + data + '</textarea>';
                    }
                },
                { data: "textId", "render": function (data, type, full, meta) {
                        let $html =  '<a class="btn bg-success m-1 update" data-id="'+data+'"><i class="icon-floppy-disk"></i> Update</a>';
                         $html +=  '<a class="btn bg-danger m-1 remove" data-id="'+data+'"><i class="icon-trash"></i> Delete</a>';
                         $html +=  '<a class="btn bg-grey m-1 reset" data-id="'+data+'"><i class="icon-reset"></i> Reset</a>';
                         return $html;
                    }
                },
            ],
            "rowCallback": function (row, data, index) {
                if (data.hasOwnProperty('rowClass')) {
                    $(row).attr('class', data.rowClass);
                }

                $('td:last', row).attr('class', 'text-center');
                }
        });

        $('#add').click(function(){
            const addedRow = textDataTable.row.add(
                {
                    "text": "aa",
                    "textId": "bb",
                }
           );
            textDataTable.draw( false );
            const addedRowNode = addedRow.node();
            $(addedRowNode).addClass('highlight');
        });

Result: it's updating the text for the first column and the data-id of the second column, my goal is to add a new empty row, which means i want the first column to have 'aa' and the second column to have 'bb' instead of the buttons. I tried hundreds of things in vain.

kthorngren

You are using columns.render to render buttons in the second column. You will need to find a way to determine if you are adding a new row and in the render function decide whether to render buttons or just return the data. One way is to add an object to the new row that indicates a new row, like this:

           const addedRow = textDataTable.row.add(
               {
                   "text": "aa",
                   "textId": "bb",
                   "newRow": true
               }
          );

Then in the render function test to see if the newRow flag exists:

               { data: "textId", "render": function (data, type, full, meta) {
                       // Return data if new row
                       if (full.hasOwnProperty('newRow') {
                         return data;
                       }

                       let $html =  '<a class="btn bg-success m-1 update" data-id="'+data+'"><i class="icon-floppy-disk"></i> Update</a>';
                        $html +=  '<a class="btn bg-danger m-1 remove" data-id="'+data+'"><i class="icon-trash"></i> Delete</a>';
                        $html +=  '<a class="btn bg-grey m-1 reset" data-id="'+data+'"><i class="icon-reset"></i> Reset</a>';
                        return $html;
                   }
               },

You may need to make adjustments to make it work as I didn't test the code. Or maybe use a different solution that best fits your needs.

Kevin

mariamdev

That fixed the problem. And I had no idea.
Thank you very much