时间戳

首页 > 解决方案 > 从 DataTables-Table 中获取 ID

jquery - 从 DataTables-Table 中获取 ID

问题描述

也许对你们所有人来说都是一个简单的问题，但我对 JavaScript/jQuery 以及 AJAX 调用的工作方式还很陌生，所以我需要一点帮助。

目前我正在重建我的 DataTable-Tables 以使用服务器端处理，因为它们变得非常大并且通过这种方式变得非常缓慢。我已经在其中投入了大量时间来了解 ajaxcall 的工作原理等，但有一个问题我无法解决：我无法从我正在使用的 DataTables 中获取 ID。

这是我的 HTML 部分：

<table id="tbl_user" class="table table-hover display ajaxTable" width="100%;" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Kostenstelle</th>
      <th>Status</th>
      <th>Aktionen</th>
    </tr>
  </thead>
</table>

这是我的 javascrip/jQuery 部分：

$('.ajaxTable').DataTable({
  processing: true,
  serverSide: true,
  ajax: {
    type: "POST",
    dataType: 'json',
    url: 'ajaxcall.php',
    data: function(params) {
      var query = {
        ajaxcall: 'getSelectDataTable',
        controlName: $(this).attr("id"),
        length: 14,
        draw: params['draw'],
        start: params['start'],
        search: params['search']['value'],
        columns: params['columns'],
        order: params['order']
      }
      return query;
    }
  },
  columns: [
    {"data": "user_id"},
    {"data": "user_name"},
    {"data": "user_kostenstelle"},
    {"data": "user_status"},
    {"data": "aktionen"}
  ]
});

我以为我可以用 $(this).attr("id") 轻松获得 ID，但我错了。有人有建议吗？

提前致谢。

标签： jquerydatatables

解决方案

您必须使用类遍历所有表.ajaxTable才能获得它们的特定id：

$('.ajaxTable').each(function() { //Loop over your tables
  let that = this;                //Store your current table
  $(that).DataTable({
    processing: true,
    serverSide: true,
    ajax: {
      type: "POST",
      dataType: 'json',
      url: 'ajaxcall.php',
      data: function(params) {
        var query = {
          ajaxcall: 'getSelectDataTable',
          controlName: $(that).attr("id"), //Reuse your current table
          length: 14,
          draw: params['draw'],
          start: params['start'],
          search: params['search']['value'],
          columns: params['columns'],
          order: params['order']
        }
        return query;
      }
    },
    columns: [{
        "data": "user_id"
      },
      {
        "data": "user_name"
      },
      {
        "data": "user_kostenstelle"
      },
      {
        "data": "user_status"
      },
      {
        "data": "aktionen"
      }
    ]
  });
});

推荐阅读