Datatable. js: страница откатывается назад, нажимая кнопку редактирования в datatable.

Question

Сценарий

  <script type="text/javascript">

        $(function() {
           // $.noConflict();
            $('#customerGrid').DataTable({
                "columnDefs": [  
                    { "targets": [0], "visible": false }
                ]
            });
        });

        function startEdit(obj) {            
            $(".inline-view").show();
            $(".inline-edit").hide();
            $(obj).closest('tr').find("td .inline-view").hide();
            $(obj).closest('tr').find("td .inline-edit").show();
        }
        function onCancelEdit() {
            $(".inline-view").show();
            $(".inline-edit").hide();            
        }
    </script>

Указатель. chtml

<thead>
 <th>
      @Html.DisplayNameFor(model => model.FirstName)
 </th>
</thead>


<tbody>
   @foreach (var item in Model)
      {                                                
         <td>
           <div class="inline-view">
               @Html.DisplayFor(modelItem => item.FirstName)
           </div>
           <div class="inline-edit" style='display:none;'>
               @Html.EditorFor(modelItem => item.FirstName)
           </div>
      </td>



 <td>
      <div class="inline-view">
            <button class="editBtn" onclick='startEdit(this);'>Edit</button>
      </div>
      <div class="inline-edit" style="display:none">
            <input class="saveButton" type="submit" id="saveBtn" value="Save" data-eid="@item.CustomerId" />
            <button id="cancelBtn" onclick='oncancelEdit(); return false;'>Cancel</button>
      </div>
</td>
}
</tbody>

Я использую datatable с темой adminlte 3. Всякий раз, когда я нажимаю кнопку редактирования в таблице данных, как на рисунке 1, она снова отправляет страницу обратно. Никаких ошибок не было. Не знаю, что мне здесь не хватает.

Когда я нажимаю кнопку редактирования, она просто переключается из режима просмотра в режим редактирования. Это то, что я пытаюсь сделать. Выше приведен код для того же.

К вашему сведению: только что показал / включил в вопрос один столбец, чтобы прояснить ситуацию.

Answer 1

A button без атрибута type действует как type="submit" и будет пытаться отправить данные формы при нажатии. Таким образом, вы получаете постбэки на своей странице. Попробуйте добавить type="button" к нему, и он будет работать нормально, как:

<button type="button" class="editBtn" onclick='startEdit(this);'>Edit</button>