Редактирование данных, удаление общей кнопки сверху с функцией выбора строки без использования редактора данных

Question

DataTable с кнопками редактирования редактирования для отдельных строк.

Я новичок в веб-разработке.Я научился добавлять, редактировать и удалять таблицы данных.Я хочу, чтобы функциональность таблицы данных редактора (например, обычные кнопки добавления, редактирования, удаления) работала с данными MySQL.

Я добился добавления новых данных с помощью модалей начальной загрузки и подключения к БД через PHP.Я не знаю, что для редактирования и удаления параметров.Итак, я реализовал кнопки удаления для редактирования по строкам.

Что я здесь не так делаю?Мне нужен код, чтобы выбрать строку и редактировать с помощью обычной кнопки редактирования вверху, и это должно изменить как сторону клиента, так и сервера.

И возможно ли это сделать без использования Editor-DataTable?

Answer 1

Если вы можете использовать расширения, вы можете добавить расширение Select, которое позволяет вам выбирать строки из таблицы.После этого вы можете узнать, какие строки выбраны в событии нажатия кнопки, и создать модальное поле для внесения ваших изменений или по вашему желанию.

$(document).ready(function() {
  var table = $('#example').DataTable({
    select: true
  });


  $("#deleteBtn").on("click", function() {
    selectRows = table.rows({
      selected: true
    });
    //perform your delete CRUD update.

    //remove from UI
    selectRows.remove().draw();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=9a6592f8d74f8f520ff7b22342fa1183"></script>

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://nightly.datatables.net/select/css/select.dataTables.css?_=9a6592f8d74f8f520ff7b22342fa1183.css" rel="stylesheet" type="text/css" />

<div class="container">
  <button id="deleteBtn">Delete</button>
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Director</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Technical Author</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Javascript Developer</td>
      </tr>
      <tr>
        <td>Jenna Elliott</td>
        <td>Financial Controller</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
      </tr>
      <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
      </tr>
    </tbody>
  </table>
</div>