Question

我正在使用响应式服务器端Angular数据表。我在表格中添加了一个按钮进行编辑。但是，当我单击按钮以获取行数据时，它将返回“未定义”。我的代码有什么问题？我也使用了rowCallback，但是它在响应中不起作用。

我也使用了rowCallback。但是它不能在响应模式下工作。代码如下：

ngOnInit(): void {    

  this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  serverSide: true,
  processing: true,
  responsive: true,      
  ajax: (dtParams: DataTablesParameters, callback) => {
    this.http
      .post<DataTablesResponse>(
        environment.baseUrl + '/api/users/PostDataTable/',
        JSON.stringify(dtParams), {}
      ).subscribe(resp => {            
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: resp.data
        });
      });
  },
  columns: [
    { data: 'id', visible: false },
    { data: 'loginName' },
    { data: 'lastName' },
    { data: 'firstName' },
    {
      data: null,
      "render": function (data, type, row) {            
          return `<a class="btn btn-edit" data-elemnt-obj="${data}" role="button"><span class="glyphicon glyphicon-edit" style="font-size:20px;"></a >`;           
      }
    }
  ],
  // rowCallback: (row: Node, data: any[] | Object, index: number) => {
  //   const self = this;
  //               var element = $('td', row).find('a.btn-edit');
  //               if (element) {
  //                   element.unbind('click');
  //                   element.bind('click', () => {
  //                       self.someClickHandler(data);
  //                   });
  //               }
  //               return row;
  // },
  columnDefs: [
    {
      targets: [0],
      visible: false
    },
  ],  
};
$('.user-data-table').on('click', '.btn-edit', ($event) => {     
  var obj =  $($event).data('elemnt-obj');                  
  console.log(obj);     
});

<div class="table-responsive">
<table datatable [dtOptions]="dtOptions" width="100%" style="width:100% !important"
  class="user-data-table display table-bordered nowrapHeader nowrapBody">
  <thead>
    <tr>
      <th>id</th>
      <th>Login name</th>
      <th>Last name</th>
      <th>First name</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 1

这是我获取数据行的方式。

您可以通过data = table.row( $(this).parents('tr') ).data();

获取数据

let table =  $('#mytable').DataTable({});
$('#mytable tbody').on( 'click', '.btn-edit', function () {
      let data = table.row( $(this).parents('tr') ).data();

      const id = data.YourProperty;
});

在Angular数据表中单击按钮获取行数据

1 个答案: