带有数据表 jquery 的 tabledit答案

【问题标题】：tabledit with datatable jquery带有数据表 jquery 的 tabledit
【发布时间】：2019-07-16 19:14:06
【问题描述】：

我在使用以下 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，另一个称为编辑客户端。我有第二张桌子。如果我有一张桌子（一张），一切正常。但是，当我添加第二个表时，它不会正常工作。 Datatable 适用于两者，但 Tabledit 仅适用于第一个。两个表的结构和数据分别相同。

任何帮助都将受到高度赞赏，因为我目前陷入困境。

谢谢

【问题讨论】：

请提供更多详细信息..关于错误...不正确显示您的表格？..或者您有什么问题..!!
本身没有错误。就在我有两个带有这些插件的表时，第二个不显示 tabledit 插件。一张桌子工作正常。如上所述，两个表的设置都是相同的，除了它们的 id
仅按您需要的顺序首先加载数据表和您的表格编辑
第一：$('#table1').DataTable(); ...$('#table2').DataTable();...下一个表格编辑

标签： javascript jquery datatables tabledit

【解决方案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>

首先你需要实例化数据表，然后让这个数据表可编辑..

【讨论】：

太棒了。这现在完美无缺。谢谢你的帮助:-)

【解决方案2】：

另一件事是确保你的 js <script> 在 <body> 标签之前。它应该只在表格渲染后加载

【讨论】：