響應式jQuery數據表無法獲取行的詳細信息

Question

我正在使用插件jQuery DataTables和響應式插件，這樣我就可以根據瀏覽器大小動態顯示和隱藏列。

我有一個名為Actions的列，用戶可以使用它來編輯記錄，當按下此列中包含的鉛筆時，我搜索被點擊元素的id 。

這種機制僅在表不處於responsive模式時工作，事實上，當表處於響應狀態時，我擴展了其他列：

如果我點擊鉛筆我會得到：

無法讀取未定義的屬性“id”

因為插件無法找到被點擊元素的行。

我創建了一個片段和一個JSFIDDLE

 $(document).ready(function() { var table = $('#example').DataTable({ "columns": [{ data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'age' }, { data: 'salary' }, { data: null, render: function(data, type, row) { return '<a href="javascript:void(0)" data="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>'; } } ], responsive: true }); var users = [{ id: 1, name: "Penny", position: "waitress", office: "none", age: "25", salary: "1550$" }, { id: 2, name: "Sheldon", position: "physical", office: "university", age: "39", salary: "8435$" }, { id: 3, name: "Leonard", position: "physical", office: "university", age: "35", salary: "7842$" }, ]; $('#example').DataTable().clear().draw(); $('#example').DataTable().rows.add(users); $('#example').DataTable().draw(); $('#example').on('click', '.edit', function(element) { var tr = $(element.target).closest('tr'); var data = table.row(tr).data(); console.log(data.id); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js"></script> <link href="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet"/> <link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> <th class="sorting_desc_disabled sorting_asc_disabled">Action</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> <th class="sorting_desc_disabled sorting_asc_disabled">Action</th> </tr> </tfoot> <tbody> </tbody> </table> 

我做錯了嗎？ 或者那是一個錯誤？ 有辦法解決這個問題嗎？

提前致謝。

Answer 1

根據我發布的評論討論

$(document).ready(function() {
  var table = $('#example').DataTable({
  "columns": [{
    data: 'name'
  },
  {
    data: 'position'
  },
  {
    data: 'office'
  },
  {
    data: 'age'
  },
  {
    data: 'salary'
  },
  {
    data: null,
    render: function(data, type, row) {
      return '<a href="javascript:void(0)" class="btn btn-link btn-warning btn-icon btn-sm "><i class="fas fa-pencil-alt edit" data-id="' + data.id + '" ></i></a>'; // same class in i element removed it from a element
    }
  }
],
responsive: true
});

var users = [{
  id: 1,
  name: "Penny",
  position: "waitress",
  office: "none",
  age: "25",
  salary: "1550$"
},
{
  id: 2,
  name: "Sheldon",
  position: "physical",
  office: "university",
  age: "39",
  salary: "8435$"
},
{
  id: 3,
  name: "Leonard",
  position: "physical",
  office: "university",
  age: "35",
  salary: "7842$"
},
];

$('#example').DataTable().clear().draw();
$('#example').DataTable().rows.add(users);
$('#example').DataTable().draw();

$(document).on('click', '.edit', function(element) {

console.log($(this).data('id')); //direct get the value
});
 });

Answer 2

你也可以嘗試這個：

  $(document).ready(function() {
      var table = $('#example').DataTable({
        "columns": [{
            data: 'name'
          },
          {
            data: 'position'
          },
          {
            data: 'office'
          },
          {
            data: 'age'
          },
          {
            data: 'salary'
          },
          {
            data: null,
            render: function(data, type, row) {
              return '<a href="javascript:void(0)" data="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>';
            }
          }
        ],
        responsive: true
      });

      var users = [{
          id: 1,
          name: "Penny",
          position: "waitress",
          office: "none",
          age: "25",
          salary: "1550$"
        },
        {
          id: 2,
          name: "Sheldon",
          position: "physical",
          office: "university",
          age: "39",
          salary: "8435$"
        },
        {
          id: 3,
          name: "Leonard",
          position: "physical",
          office: "university",
          age: "35",
          salary: "7842$"
        },
      ];

      $('#example').DataTable().clear().draw();
      $('#example').DataTable().rows.add(users);
      $('#example').DataTable().draw();

      $('#example').on('click', '.edit', function(element) {
    debugger
        var tr = $(element.target).closest('tr');
        **if(tr.hasClass('child'))
        {
            tr=$(tr).prev();
        }**
        var data = table.row(tr).data();
        console.log(data.id);
      });
    });

Answer 3

使用data-id

 $(document).ready(function() { var table = $('#example').DataTable({ "columns": [{ data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'age' }, { data: 'salary' }, { data: null, render: function(data, type, row) { return '<a href="javascript:void(0)" data-id="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>'; } } ], responsive: true }); var users = [{ id: 1, name: "Penny", position: "waitress", office: "none", age: "25", salary: "1550$" }, { id: 2, name: "Sheldon", position: "physical", office: "university", age: "39", salary: "8435$" }, { id: 3, name: "Leonard", position: "physical", office: "university", age: "35", salary: "7842$" }, ]; $('#example').DataTable().clear().draw(); $('#example').DataTable().rows.add(users); $('#example').DataTable().draw(); $('#example').on('click', '.edit', function(element) { /*var tr = $(element.target).closest('tr'); var data = table.row(tr).data(); console.log(data.id);*/ var id = $(this).data('id') console.log(id); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js"></script> <link href="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet"/> <link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> <th class="sorting_desc_disabled sorting_asc_disabled">Action</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> <th class="sorting_desc_disabled sorting_asc_disabled">Action</th> </tr> </tfoot> <tbody> </tbody> </table>