Question

DataTable with edit delete buttons for separate rows.

我是网络开发的新手。我已经学会添加，编辑和删除DataTables。我想拥有编辑器数据表的功能（如常见的添加编辑删除按钮）来处理MySQL数据。

我通过使用引导模式并通过PHP连接到db实现了添加新数据。我不知道编辑和删除选项。所以，我已经实现了行方式编辑删除按钮。

我在这里做错了什么？我需要一个代码来选择行并从顶部的常用编辑按钮进行编辑，这应该改变客户端和服务器端。

是否可以在不使用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>

数据表编辑，删除顶部的公共按钮，选择行功能，而不使用编辑器数据表

1 个答案: