向角度为2的事件的数据表的每一行添加按钮

时间:2018-10-31 08:22:24

标签: angular datatables

我需要在数据表的每一行的末尾都有一个按钮,并在单击它时获取行值。请在下面查看我的代码。

在我的.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循环,因为它会导致int数据表出现问题。谢谢。

1 个答案:

答案 0 :(得分:1)

您可以使用数据表的column对象中的defaultContent键进行操作。首先,您需要创建一个<th>来显示按钮列。我创建了一个实现这一目标的堆叠闪电战。在按照您的逻辑实施它之前,请仔细阅读我在该堆栈闪电中添加的注释。我在其中添加了三个按钮,用于显示当前行的数据。请参阅:Buttons In Datatable