Question

以下2个插件协同工作时出现问题。我确定我想念什么，但是为了爱上帝，我看不到它：-（

$(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，另一个称为my-client。 Isuue Iam和第二张桌子在一起。如果我有一张桌子（一张），一切都很好。但是，当我添加第二张表时，它将无法正常工作。 Datatable可以在这两个表上使用，但Tabledit只能在第一个表上使用。两个表的结构和数据都相同。

当iam陷入困境时，任何帮助将不胜感激。

谢谢

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>

首先，您需要实例化数据表，然后使该数据表可编辑。.

Answer 2

要做的另一件事是确保您的js <script>在<body>标记之前。只能在表格渲染后加载

带有数据表jQuery的tabledit

2 个答案: