gpt4 book ai didi

javascript - 响应式 jQuery 数据表无法获取一行的详细信息

转载 作者:行者123 更新时间:2023-11-30 11:09:06 24 4
gpt4 key购买 nike

我正在使用插件 jQuery DataTables使用响应式插件,这样我就可以根据浏览器大小动态显示和隐藏列。

我有一个名为 Actions 的列,用户可以使用它来编辑记录,当按下此列中包含的铅笔时,我搜索被单击的 id元素。

此机制仅在表格未处于响应式模式时有效,事实上,当表格处于响应式且我展开其他列时:

enter image description here

如果我点击铅笔我会得到:

Cannot read property 'id' of undefined

因为插件无法找到被点击元素所在的行。

我创建了一个片段,一个 JSFIDDLE

$(document).ready(function() {
var table = $('#example').DataTable({
"columns": [{
data: 'name'
},
{
data: 'position'
},
{
data: 'office'
},
{
data: 'age'
},
{
data: 'salary'
},
{
data: null,
render: function(data, type, row) {
return '<a href="javascript:void(0)" data="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>';
}
}
],
responsive: true
});

var users = [{
id: 1,
name: "Penny",
position: "waitress",
office: "none",
age: "25",
salary: "1550$"
},
{
id: 2,
name: "Sheldon",
position: "physical",
office: "university",
age: "39",
salary: "8435$"
},
{
id: 3,
name: "Leonard",
position: "physical",
office: "university",
age: "35",
salary: "7842$"
},
];

$('#example').DataTable().clear().draw();
$('#example').DataTable().rows.add(users);
$('#example').DataTable().draw();

$('#example').on('click', '.edit', function(element) {

var tr = $(element.target).closest('tr');
var data = table.row(tr).data();
console.log(data.id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
<th class="sorting_desc_disabled sorting_asc_disabled">Action</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
<th class="sorting_desc_disabled sorting_asc_disabled">Action</th>
</tr>
</tfoot>

<tbody>
</tbody>
</table>

我做错了什么吗?或者这是一个错误?有办法解决这个问题吗?

提前致谢。

最佳答案

根据评论讨论,我发布了它

$(document).ready(function() {
var table = $('#example').DataTable({
"columns": [{
data: 'name'
},
{
data: 'position'
},
{
data: 'office'
},
{
data: 'age'
},
{
data: 'salary'
},
{
data: null,
render: function(data, type, row) {
return '<a href="javascript:void(0)" class="btn btn-link btn-warning btn-icon btn-sm "><i class="fas fa-pencil-alt edit" data-id="' + data.id + '" ></i></a>'; // same class in i element removed it from a element
}
}
],
responsive: true
});

var users = [{
id: 1,
name: "Penny",
position: "waitress",
office: "none",
age: "25",
salary: "1550$"
},
{
id: 2,
name: "Sheldon",
position: "physical",
office: "university",
age: "39",
salary: "8435$"
},
{
id: 3,
name: "Leonard",
position: "physical",
office: "university",
age: "35",
salary: "7842$"
},
];

$('#example').DataTable().clear().draw();
$('#example').DataTable().rows.add(users);
$('#example').DataTable().draw();

$(document).on('click', '.edit', function(element) {

console.log($(this).data('id')); //direct get the value
});
});

关于javascript - 响应式 jQuery 数据表无法获取一行的详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54477339/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com