[英]Inline editing datatable jquery
Hi I have been trying to follow this tutorial about inline editing http://www.vandelaydesign.com/inline-edit-with-ajax/ . 嗨,我一直在尝试遵循有关内联编辑的本教程http://www.vandelaydesign.com/inline-edit-with-ajax/ 。 I want to apply it in my data table.
我想将其应用到我的数据表中。 When the user clicks the edit button the corresponding columns within its line becomes an input, but I do not know how to turn it that way.
当用户单击“编辑”按钮时,其行中的相应列将成为输入,但是我不知道如何以这种方式打开它。 In the tutorial it uses
.prev
in jquery to get the value of the of the span
but I do not know how to do that in my case. 在本教程中,它在jquery中使用
.prev
来获取span
的值,但是在我的情况下,我不知道该怎么做。 This is what my table looks like: 这是我的桌子的样子:
Category name and desc should become inputs when edit button is clicked. 单击“编辑”按钮时,类别名称和说明应成为输入。 How do I do that?
我怎么做?
<tbody>
<?php foreach ($categories as $category) { ?>
<tr>
<td> <span id="<?= $category->category_id ?>" class="datainfo"> <?= $category->category_name ?> </span> </td>
<td>
<?= $category->category_desc ?>
</td>
<td>
<?= $category->created_on ?>
</td>
<td>
<?= $category->updated_on ?>
</td>
<td>
<?= $category->status ?>
</td>
<td>
<button type="button" name="edit_cat" class="btn btn-light btn-sm edit_cat">
<!-- data-id="<?= $category->category_id ?>" -->
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</button>
</td>
</tr>
<?php } ?>
</tbody>
Javascript: Javascript:
$(document).on('click', '.edit_cat', function() {
console.log('edit category');
// console.log( $(this).data('id') );
var dataset = $(this).prev(".datainfo");
console.log(dataset);
var theid = dataset.attr("id");
console.log(theid);
var newid = theid+"-form";
var currval = dataset.text();
dataset.empty();
$('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);
});
I also need help in future proofing after solving this problem, How would I go about saving it, maybe getting the span id and start from there? 解决此问题后,在将来的打样中也需要帮助。如何保存它,也许获取span ID并从那里开始?
Datatables have a build in implementation of inline editing. 数据表内置了内联编辑的实现。
It gets installed as an own extension 它作为自己的扩展安装
Inline editing in Editor is activated through the use of the inline() API method.
通过使用inline() API方法可以激活编辑器中的内联编辑。 Simply call the method and pass in the cell you want to edit as the first parameter.
只需调用该方法,然后将要编辑的单元格作为第一个参数传入即可。
Take a closer look here - https://editor.datatables.net/examples/inline-editing/simple
在这里仔细看看-https: //editor.datatables.net/examples/inline-editing/simple
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.