Tabledit с датируемым JQuery

Question

У меня проблемы с совместимостью следующих двух плагинов.Я уверен, что чего-то не хватает, но ради любви к Богу я не вижу этого: - (

$(document).ready(function(){


$('#mytable').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : false,
      'info'        : false,
      'autoWidth'   : false,
      'order'       : [[ 0, 'asc' ]],

    });

$('#mytable').Tabledit({
        url: 'update.php',
        columns: {
            identifier: [0, 'id'],
            editable: [[1, 'name'], [2, 'email']]
        }
    });

$('#edit-client').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : false,
      'info'        : false,
      'autoWidth'   : false,
      'order'       : [[ 0, 'asc' ]],

    });

$('#edit-client').Tabledit({
        url: 'update.php',
        columns: {
            identifier: [0, 'id'],
            editable: [[1, 'name'], [2, 'email']]
        }
    });

});

Как видите, у меня есть 2 таблицы. Одна называется mytable, а другая - edit-client. Isuue IamИмея это со второй таблицей. Если у меня есть одна таблица (любая), все работает нормально. Однако, когда я добавляю вторую таблицу, она не будет работать должным образом. Datatable работает на обеих, но Tabledit только на первой. Обе таблицы идентичны ви структура и данные соответственно.

Любая помощь будет высоко оценена, поскольку я застрял в данный момент.

Спасибо

Answer 1

Вы можете проверить это:

$('#example').DataTable();
$('#example2').DataTable();
$('#example').Tabledit({
  editButton: true,
  removeButton: false,
  columns: {
    identifier: [0, 'id'],
    editable: [[1, 'First Name'],[2, 'Last Name'],[3, 'Username', '{"1": "@mdo", "2": "@fat", "3": "@twitter"}']]
  }
});
$('#example2').Tabledit({
  editButton: true,
  removeButton: false,
  columns: {
    identifier: [0, 'id'],
    editable: [[1, 'First Name'],[2, 'Last Name'],[3, 'Username', '{"1": "@mdo", "2": "@fat", "3": "@twitter"}']]
  }
});

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table class="table table-striped table-bordered" id="example">
  <caption>
  Click the table cells to edit.
  </caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<br><br>
<table class="table table-striped table-bordered" id="example2">
  <caption>
  Click the table cells to edit.
  </caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Сначала вам нужно создать экземпляр данных, а затем сделать его редактируемым.