向角度为2的事件的数据表的每一行添加按钮
我需要在数据表中每行的末尾都有一个按钮,并在单击它时获取行值。请在下面查看我的代码。
I need to have a button at the end of each row in my datatable and get the row values when I click on it. Please see my code below.
在我的.ts
ngOnInit() {
this.getUsers();
}
getUsers() {
this.us.getUsers()
.subscribe((data: any) => {
this.users = data;
var table = $('#datatables').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
responsive: true,
data:this.users,
columns:[
{
data:"Id"
},
{
data:"FirstName"
},
{
data:"MiddleName"
},
{
data:"LastName"
},
{
data:"UserName"
},
{
data:"Email"
},
{
data:"DateAdded"
},
{
data:"IsActivated"
}
],
language: {
search: "_INPUT_",
searchPlaceholder: "Search records",
}
});
})
}
在我的html
<table id="datatables" class="table table-striped table-bordered table-hover" cellspacing="0"
width="100%" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>FirstName</th>
<th>MiddleName</th>
<th>LastName</th>
<th>UserName</th>
<th>Email </th>
<th>DateAdded</th>
<th>Activated</th>
</tr>
</thead>
</table>
能否请您帮我解决这个问题。我不能使用* ngFor循环,因为它会导致数据表出现问题。谢谢。
Can you please help me how to this right. I can't use the *ngFor loop because it causes issues int the datatables. Thank you.
您可以使用列中的 defaultContent
键进行操作数据表的对象。首先,您需要创建一个< th>
来显示按钮列。我创建了一个实现这一目标的堆叠闪电战。在按照您的逻辑实施它之前,请仔细阅读我在该堆栈闪电中添加的注释。我在其中添加了三个按钮,用于显示当前行的数据。请参阅:数据表中的按钮
You can do it using defaultContent
key in columns object of datatable. First you need to create a <th>
for showing the button column. I have created a stackblitz for achieving this. Please read the comments i have added in that stackblitz carefully before implementing it in your logic. I have added three buttons in it which show the data of current row. See: Buttons In Datatable