javascript - 在数据表中单击按钮后如何获取行数据
问题描述
任何人都可以帮助我了解如何获取单击事件的单行数据。
这是在 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);
});
}
})
})
这样做的正确方法是什么?谢谢
解决方案
您需要使用 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 文档,这应该可以工作,让我知道它是否有效。
推荐阅读
- javascript - CSS防止div向下移动
- python - 预测时是否可以从预训练的 vgg 模型中获得第 1 层和第 5 层输出?
- python - 设置关键利率报价值后,信用利差的 QuantLib 债券定价不起作用
- ios - 为架构 x86_64 获取错误未定义符号:“_sqlite3_prepare_v3”React Native Firebase
- android - Android Studio 抽屉菜单预览问题
- javascript - 如何赋予数组的不同部分,不同的属性
- c# - 如何在使用 linq 和实体框架核心时修复“发现歧义匹配”
- javascript - 我应该测试 Vue.js 的私有函数吗?
- css - 如何有条件地更改角度组件中的样式 url?可能吗?
- html - 锚标记在其内联 img 元素后导致右侧空间如何删除它并正确对齐菜单项