DataTable AltEditor function issue

  bootstrap-4, datatables, javascript, jquery

This is in variable columnSet to setdata for datatable

            title: 'Actions',
            name: 'Actions',
            data: null,
            render: function(data, type, full, meta) {
                return "<div class='d-flex mt-2'><button name='edit' class='btn buttons-selected btn- 
                sm btn-outline-primary mr-2 btn-edit' title='Edit'><i class="fal fa-edit"></i> 
                Edit</button><button class='btn btn-sm btn-outline-danger mr-2 btn-delete' 
                title='Delete Record'><i class="fal fa-trash-alt"></i> Delete </button></div>";
            disabled: true,

this is code in dataTables function:

 columns: columnSet,
    altEditor: true,
    responsive: true,
    searching: false,
    /* buttons uses classes from bootstrap, see buttons page for more details */
    buttons: [{
            text: '<i class="fal fa-plus mr-1"></i> Add',
            name: 'add',
            className: 'btn-success btn-sm mr-1'

                extend: 'selected',
                text: '<i class="fal fa-edit mr-1"></i> Edit',
                name: 'edit',
                className: 'btn-primary btn-sm mr-1'

this is function have called when click button with class btn-edit:

    $(document).on('click', "[id^='dt-basic-example'] .btn-edit", 'tr', function() {
        var tableID = $(this).closest('table').attr('id'); // id of the table
        var that = $('#' + tableID)[0].altEditor;
        console.log($('#' + tableID)[0]);


The problem is, the button btn-edit that i have created in function dataTable can work normarly but the button (in columnSet) that i have set in render for display button in each column cannot work. When i click on it, var ‘that’ in function return null because altEditor not work. I’m so confuse about it. Can you help me please!

Source: Ask Javascript Questions