Generate an input form in a jQuery datatable

To generate an input form in a jQuery datatable, you can use the render function of a column definition to return an HTML string that contains the input element. Here's an example:

HTML:

<div class="col-md-12">
<button type="button" class="btn  btn-sm btn-primary" id="mct_btn_tambah"><span class="fa fa-plus"></span> Tambah Tindakan</button>
<table id="mct_table" class="table" style="width:100%;"></table>  
</div>

JAVASCRIPT:

<script type="text/javascript">
  var mct = function () {
    this.table = '';
    var self = this;

    this.init = function () {
      self.table = $('#mct_table').DataTable({
        info: false,
        paging:false,
        sorting:false,
        searching:false,
        orderCellsTop: true,
        columns: [
            {data: null, title:'No.', name: 'no', width: '2%'},

            {
              data: null,
              title: 'Timeline',
              name: 'timeline',
              width: '25%',
              render: function (data, type, full, meta) {
                return '<input type="text" name="mct_ipt_tk_timeline[]" class="form-control input-sm mct_ipt_tk_timeline" />';
              }
            },
            {
              data: null,
              title: 'Tindakan',
              name: 'tindakan',
              width: '40%',
              render: function (data, type, full, meta) {
                return '<input type="text" name="mct_ipt_tk_tindakan[]" class="form-control input-sm mct_ipt_tk_tindakan" />';
              }
            },
            {
              data: null,
              title: 'Evaluasi',
              name: 'evaluasi',
              width: '40%',
              render: function (data, type, full, meta) {
                return '<input type="text" name="mct_ipt_tk_evaluasi[]" class="form-control input-sm mct_ipt_tk_evaluasi" />';
              }
            },
            {
              data: null,
              title: 'Aksi',
              name: 'aksi',
              width: '5%',
              render: function (data, type, full, meta) {
                return '<button type="button" class="btn-sm btn btn-danger form-control mct-btn-hapus"><i class="fa fa-remove"></i> Hapus</button>';
              }
            },
            
        ],
        rowCallback: function (row, data, index) {
          var page_info = self.table.page.info();
          var start = page_info.start;
          var no = start + index + 1;
          $(row).find('td:eq(0)').html(no);        
        },
        initComplete: function () {
            
        },
      });    
    };

    this.addRow = function () {
      self.table.row.add({}).draw();
    };

  };
  
   var _mct = new mct;
  $(document).ready(function () {
    _mct.init();

    $(document).on('click', '#mct_btn_tambah', function () {
      _mct.addRow();
    });

    $(document).on('click', '.mct-btn-hapus', function () {
      var row = $(this).closest('tr');
      var data = _mct.table.row(row).data();

      _mct.table.row(row).remove().draw();
    });

  });
</script>