使用datatable jquery进行表编辑
使用datatable jquery进行表编辑
提问于 2019-02-22 16:32:20
我有以下两个插件一起工作的问题。我确信我错过了一些东西，但看在上帝的份上，我看不到它：
$(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']]
}
});
});如你所见，我有两张桌子。一个是mytable，另一个是edit-client。Isuue我有第二张桌子。如果我有一张表(任一张)，那么一切都正常。但是，当我添加第二个表时，它不能正常工作。数据表在两者上都有效，但是只在第一个one.Both上编辑的表在结构和数据上都是相同的。
任何帮助都将非常感谢，因为我现在被困住了。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-22 17:09:07
您可以检查以下内容：
$('#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>
首先，您需要实例化datatable，然后使此datatable可编辑。
Stack Overflow用户
发布于 2020-08-13 06:39:25
另一件要做的事情是确保你的js <script>在<body>标签之前。它应该仅在表呈现后加载
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54831380
复制相关文章
相似问题
腾讯云开发者
