datatables вставляет новую запись в базу данных

Question

У меня есть данные, записанные в следующем виде:

HTML

<table class="table table-striped table-hover table-bordered mytable" width="100%" id="projectLoe">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Project ID</th>
                        <th>Customer</th>
                        <th>Project</th>
                        <th>Created by</th>
                        <th>Start date</th>
                        <th>End date</th>
                        <th>Domain</th>
                        <th>Type</th>
                        <th>Location</th>
                        <th>Man days</th>
                        <th>Description</th>
                        <th>History</th>
                        <th>Signoff</th>
                        <th>Created at</th>
                        <th>Updated at</th>
                        <th>
                          @permission('projectLoe-create')
                            <button type="button" id="new_loe" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
                          @endpermission
                        </th>
                      </tr>
                    </thead>
                  </table>

JS

projectLoe = $('#projectLoe').DataTable({
        serverSide: true,
        processing: true,
        scrollX: true,
        stateSave: true,
        responsive: false,
        ajax: {
                url: "{!! route('listOfProjectsLoeAjax',$project->id) !!}",
                type: "GET",
                dataType: "JSON"
            },
        columns: [
            { name: 'project_loe.id', data: 'loe_id' , searchable: false , visible: false },
            { name: 'project_loe.project_id', data: 'p_id' , searchable: false , visible: false },
            { name: 'customers.name', data: 'customer_name' , searchable: true , visible: false },
            { name: 'projects.project_name', data: 'project_name' , searchable: true , visible: false },
            { name: 'users.name', data: 'user_name' , searchable: true , visible: true },
            { name: 'project_loe.start_date', data: 'start_date' , searchable: true , visible: true },
            { name: 'project_loe.end_date', data: 'end_date' , searchable: true , visible: true },
            { name: 'project_loe.domain', data: 'domain' , searchable: true , visible: true },
            { name: 'project_loe.type', data: 'type' , searchable: true , visible: true },
            { name: 'project_loe.location', data: 'location' , searchable: true , visible: true },
            { name: 'project_loe.mandays', data: 'mandays' , searchable: true , visible: true },
            { name: 'project_loe.description', data: 'description' , searchable: true , visible: true },
            { name: 'project_loe.history', data: 'history' , searchable: true , visible: false },
            { name: 'project_loe.signoff', data: 'signoff' , searchable: true , visible: true },
            { name: 'project_loe.created_at', data: 'created_at' , searchable: true , visible: false },
            { name: 'project_loe.updated_at', data: 'updated_at' , searchable: true , visible: false }
            ...
        ]   
    });

Теперь я хотел бы, чтобы, когда я нажимал на кнопка с идентификатором new_loe, это добавит новую строку в верхней части моего тела, так что пользователь может ввести информацию во входные данные, а затем сохранить ее в базе данных через ajax, затем перезагрузить таблицы данных, и тогда будет новая запись в него.

Я использовал этот код в js без входов и выбираю в данный момент, потому что я пытаюсь сначала получить функцию добавления новой строки:

$(document).on('click', '#new_loe', function () {
      var html = '<tr>';
      html += '<th id="new_loe_id">'+'</th>';
      html += '<th id="new_loe_project_id"></th>';
      html += '<th id="new_loe_customer">0</th>';
      html += '<th id="new_loe_project">0</th>';
      html += '<th id="new_loe_created_by">0</th>';
      html += '<th id="new_loe_start_date">0</th>';
      html += '<th id="new_loe_end_date">0</th>';
      html += '<th id="new_loe_domain">0</th>';
      html += '<th id="new_loe_type">0</th>';
      html += '<th id="new_loe_location">0</th>';
      html += '<th id="new_loe_mandays">0</th>';
      html += '<th id="new_loe_description">0</th>';
      html += '<th id="new_loe_history">0</th>';
      html += '<th id="new_loe_signoff">0</th>';
      html += '<th id="new_loe_created_at">0</th>';
      html += '<th id="new_loe_updated_at">0</th>';
      html += '<th><button type="button" name="new_loe_insert" id="new_loe_insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-log-in"></span></button><button type="button" name="new_loe_cancel" id="new_loe_cancel" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-remove"></span></button></th>';
      html += '</tr>';
      $('#projectLoe thead').prepend(html);
    });

Проблема в том, что вы можете видеть в определении datatables, у меня есть несколько столбцов с видимым false, и это Dynami c, потому что пользователь может изменить, какие столбцы будут показаны, и в этом случае, когда я добавляю код html в начале, он показывает все столбцы для этой строки.

Как я могу убедиться, что отображаются только столбцы, выбранные пользователем, и как я могу затем использовать вставки и выборки и переключатель в первая строка для добавления новой записи?