[英]Responsive jQuery Datatables cannot get the details of a row
I'm using the plugin jQuery DataTables with the responsive addon, in this way I can dynamically show and hide columns based on the browser size. 我正在使用插件jQuery DataTables和响应式插件,这样我就可以根据浏览器大小动态显示和隐藏列。
I have a column called Actions
which the user can use for edit a record, when the pencil contained in this column is pressed, I search the id
of the clicked element. 我有一个名为
Actions
的列,用户可以使用它来编辑记录,当按下此列中包含的铅笔时,我搜索被点击元素的id
。
This mechanism work only when the table is not in responsive
mode, infact, when the table is in responsive and I expand the other columns: 这种机制仅在表不处于
responsive
模式时工作,事实上,当表处于响应状态时,我扩展了其他列:
if I click on the pencil I'll get: 如果我点击铅笔我会得到:
Cannot read property 'id' of undefined
无法读取未定义的属性“id”
because the plugin is not able to find the row of the clicked element. 因为插件无法找到被点击元素的行。
I created a snippet, and a JSFIDDLE 我创建了一个片段和一个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>
Is something that I did wrong? 我做错了吗? Or is that a bug?
或者那是一个错误? Is there a way to fix that?
有办法解决这个问题吗?
Thanks in advance. 提前致谢。
As per the comments discussion i am posting it 根据我发布的评论讨论
$(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
});
});
you can try this also: 你也可以尝试这个:
$(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) {
debugger
var tr = $(element.target).closest('tr');
**if(tr.hasClass('child'))
{
tr=$(tr).prev();
}**
var data = table.row(tr).data();
console.log(data.id);
});
});
Use data-id
使用
data-id
$(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-id="' + 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);*/ var id = $(this).data('id') console.log(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.