有人可以帮助我了解如何在点击事件中获取单行数据。
这是在执行AJAX调用中的Success函数之后动态填充的表
<div class="table-responsive table-wrap tableFixHead container-fluid">
<table class="table bg-violet dT-contain" id="datatable" >
<thead class="thead-dark">
<tr>
<th>No.</th>
<th>Main</th>
<th>Shrinked</th>
<th>Clicks</th>
<th>Disable</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr class="bg-violet">
</tr>
</tbody>
</table>
</div>
<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/jquery.dataTables.min.js"></script>
<script src="scripts/dataTables.bootstrap4.min.js" defer></script>
<script src="scripts/dashboard.js" defer></script>
这是我的ajax成功功能
success: function(data){
$('#datatable').dataTable({
data: data,
"autoWidth": true,
columns: [
{'data': 'id'},
{'data': 'main'},
{'data': 'shrinked'},
{'data': 'clicks'},
{"defaultContent": "<button id='del-btn'>Delete</button>"}
]
})
}
我正在为每行动态添加一个删除按钮,但是似乎无法使用它来获取行数据。 我对成功功能做了一些调整,尝试了这种方法
$('#datatable tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
alert( data[0] );
} );
但这似乎不起作用。
从AJAX调用返回的JSON数据采用以下格式:
[{"id":"12","main":"ndkekfnq" ...}, {.....}]
我还在删除按钮上添加了一个onclick函数,以尝试获取数据,但这还是行不通的。
编辑:整个AJAX请求
$(document).ready(()=>{
$.ajax({
url: 'URL',
method: 'post',
dataType: 'json',
data: {
"email": window.email,
"token": window.token
},
success: function(data){
let table = $('#datatable').dataTable({
data: data,
"autoWidth": true,
columns: [
{'data': 'id'},
{'data': 'main'},
{'data': 'shrinked'},
{'data': 'clicks'},
{"defaultContent": "<button id='dis-btn' class='btn btn-warning'>Disable</button>"},
{"defaultContent": "<button id='del-btn' class='btn btn-danger'>Delete</button>"}
]
})
$('#datatable tbody').on('click', "#del-btn", function() {
let row = $(this).parents('tr')[0];
//for row data
console.log(table.row(row).data().id);
});
}
})
})
正确的方法是什么?谢谢
答案 0 :(得分:2)
这是您的有效代码。您需要在datatables
中设置var
。
使用该var table
查找clicked
row
,该$(this).parents('tr')[0]
并将.data.id
用于点击的项目id
我已经重新创建了您的示例,并且可以正常工作。只需将您对ajax
的响应设置为data
。
演示
//Ajax Data
var data = [{
"id": "10",
"main": "ndkekfnq",
"shrinked": "ndkekfnq",
"clicks": "ndkekfnq"
}, {
"id": "12",
"main": "Something",
"shrinked": "Data",
"clicks": "Ha"
}]
//Data Table
var table = $('#datatable').DataTable({
data: data,
columns: [{
'data': 'id'
},
{
'data': 'main'
},
{
'data': 'shrinked'
},
{
'data': 'clicks'
},
{
"defaultContent": "<button id='del-btn'>Delete</button>"
}
]
});
$('#datatable tbody').on('click', "#del-btn", function() {
var row = $(this).parents('tr')[0];
//for row data
console.log(table.row(row).data().id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<div class="table-responsive table-wrap tableFixHead container-fluid">
<table class="table bg-violet dT-contain" id="datatable">
<thead class="thead-dark">
<tr>
<th>No.</th>
<th>Main</th>
<th>Shrinked</th>
<th>Clicks</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr class="bg-violet">
</tr>
</tbody>
</table>
答案 1 :(得分:2)
您需要使用column.render而不是defaultContent,然后在外部函数上获取数据,您需要在表的呈现位置呈现一个按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="table-responsive table-wrap tableFixHead container-fluid">
<table class="table bg-violet dT-contain" id="datatable" >
<thead class="thead-dark">
<tr>
<th>No.</th>
<th>Main</th>
<th>Shrinked</th>
<th>Clicks</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr class="bg-violet">
</tr>
</tbody>
</table>
<script>
$('#datatable').dataTable( {
"data": [{'id':20,'main':'hola','shrinked':false,'clicks':2000},{'id':21,'main':'hola','shrinked':false,'clicks':283000}],
"autoWidth": true,
"columns": [
{"data": "id"},
{'data': 'main'},
{'data': 'shrinked'},
{'data': 'clicks'},
{"data": "id",
"render": function ( data, type, row, meta ) {
return '<button data-id="'+data+'" onclick="deleteThis(event)">Delete</button>'
}
}
]
} )
function deleteThis(e){
console.log(e.target.getAttribute('data-id'))
}
</script>
</body>
</html>
还没有尝试过,但是基于Datatables文档,这应该有效,让我知道它是否有效。
答案 2 :(得分:1)
@Javier的答案是解决OP问题的一种很好的方法。另一种方式是,如果您不想两次包含 id 字段,则如下所示:
"columns": [
{"data": "id"},
{'data': 'main'},
{'data': 'shrinked'},
{'data': 'clicks'},
{"data": null,
"render": function ( data, type, row, meta ) {
return '<button data-id="' + data.id + '" onclick="deleteThis(event)">Delete</button>'
}
}
]