从数据表行获取每条记录的属性值答案

【问题标题】：Get attribute value from datatables row for every record从数据表行获取每条记录的属性值
【发布时间】：2019-08-04 08:50:51
【问题描述】：

我正在使用datatables，我想编辑和删除数据表记录

当我执行console.log(row) 以下输出时，我得到：

["user1", "编辑"] （索引）：274 (2) ["user2", "Edit"] （索引）：274 (2) ["user3", "Edit"] （索引）：274 (2) ["user4", "Edit"] (index):274 (2) ["user5", "Edit"]

我想要的是从我在数据表脚本中使用过的render: function (data, type, row) 中获取data-id，当单击 edit 按钮时，我想在警报中获得特定的id，但我无法提取data-id。

我的 jQuery 代码：

$.fn.dataTable.ext.errMode = 'none';
var table = $('#catgeory_list').DataTable({
        processing: true,
        language: {
            emptyTable: 'no result found.'
        },
        columnDefs: [{
                visible: true,
                targets: 0,
                render: function (data, type, full, meta) {
                    return data;
                }
            }, {
                visible: true,
                targets: 1,
                render: function (data, type, row) {
                    console.log(row);
                    return '<button id="editBtn" class="btn btn-wrang btn-flat edit" name="editBtn" type="button">Edit</button>' + '&nbsp;&nbsp;<button id="deleteBtn" class="btn btn-danger btn-flat delete" name="deleteBtn" type="button" >Delete</button>';
                }
            }
        ],
    });

【问题讨论】：

关于您的代码的一些建议：render 选项似乎对您的第一列没有任何作用，因此可以跳过；使用&nbsp 格式化按钮周围的填充似乎不是一个好习惯，您可以为此目的使用 CSS（例如，就像我在下面的 answer 中所做的那样）

标签： datatables javascript jquery datatables

【解决方案1】：

为了获得被点击行的任何源对象/数组属性/项目，您只需要对 DataTable 行调用简单的row().data() API 方法（由最接近点击按钮<tr>节点）：

$('table').on('click', 'tbody td button', function(){
  const rowData = dataTable.row($(this).closest('tr')).data();
  alert(`Row ID is ${rowData.id}`);
});

这里，dataTable 是一个变量，您将 DataTable 分配给。

完整的DEMO您可能会在下面找到。

另外，考虑到您的最终目标，您可能会发现我的答案超过了here，它提供了可编辑数据表的完整工作演示。因此，如果您觉得对您有帮助，我们将不胜感激；）

//src data
const srcData = [
  {id: 1, item: 'apple'},
  {id: 2, item: 'banana'},
  {id: 3, item: 'tomato'}
];

//datatables init
const dataTable = $('table').DataTable({
  dom: 't',
  data: srcData,
  columns: [{data: 'item', title: 'Item Name', render: data => data+'<button>Show Id</button>'}]
});

//click handler
$('table').on('click', 'tbody td button', function(){
  const rowData = dataTable.row($(this).closest('tr')).data();
  alert(`Row ID is ${rowData.id}`);
});

td button {float: right}

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /&gt;&lt;script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

【讨论】：

如果：“Uncaught ReferenceError: dataTable is not defined”怎么办？
那么你有一个不同的名字（如果有的话）为你分配 'DataTable()' constrictor output 的变量。

【解决方案2】：

您可以使用 jQuery $() 包装来自回调函数的数据或行参数，以获取任何元素/节点属性或 DOM 操作。另请参阅 toJQuery() 处理 Datatables API 实例。

渲染

render: function(data, type, row, meta){
                    var data_id = $(data).data('id');
                    console.log('Columns.Render:',data_id);
                    return data + " : data-id(" + data_id+")";
            }

createdRow

createdRow: function (row, data, index) {
                    var data_id = $('td a.edit_row', row).data('id');
                    console.log('CreatedRow:',data_id);
        }

点击事件

$("a.edit_row").click(function(){
        var data_id = $(this).data('id');
        alert(data_id);
      });

工作现场演示：

$(document).ready( function () {
  var table = $('#example').DataTable({
    
    columnDefs: [
      {
        targets: 1,
        render: function(data, type, row, meta){
                var data_id = $(data).data('id');
                console.log('Columns.Render:',data_id);
                return data + " : data-id(" + data_id+")";
        }
      },
    ],
    createdRow: function (row, data, index) {
                var data_id = $('td a.edit_row', row).data('id');
                console.log('CreatedRow:',data_id);
    }

  });
  
  
  $("a.edit_row").click(function(){
    var data_id = $(this).data('id');
    alert(data_id);
  });
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" 

rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
    <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td><a href="javascript:void(0)" class="edit_row" data-id="2">Edit</a></td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td><a href="javascript:void(0)" class="edit_row" data-id="3">Edit</a></td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td><a href="javascript:void(0)" class="edit_row" data-id="4">Edit</a></td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
        </tbody>
      </table>

【讨论】：

这行得通，但是当没有这个信息可以从数据表中提取信息时，你会在数据表上添加额外的不必要的层，请参阅 Yevgen Gorbunkov 的回答以使用数据表完成此操作