datatables-quickedit

Plugin for JQuery Datatables, allows you to change the contents of cells in the table and perform any actions with the changed data.

Installation

npm

npm i datatables-quickedit

/* Jquery Datatables */
import 'datatables.net/js/jquery.dataTables.js';
import 'datatables.net-dt/css/jquery.dataTables.css';

/* datatables-quickedit */
import 'datatables-quickedit/js/dataTables.quickEdit.js';

Direct <script> Include

<!-- Jquery Datatables -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<!-- datatables-quickedit -->
<script src="dataTables.quickEdit.js"></script>

Usage

<table>
  <thead>
    <tr>
      <th>1 колонка</th>
      <th>2 колонка</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>1 значение</td>
       <td>2 значение</td>
     </tr>
  </tbody>
</table>

var table = $('table').DataTable({
  quickEdit: {
    selector: 'td',
    callback: function(data) {
      /* Make something with updated data from row */
      makeSomethingWithRowData(data);
    },
    editableClass: 'active'
  }
});