如何在数据表列 属性 的数据中传递整个对象

How to pass whole object in data of datatable column property

我正在使用数据表 1.10.21 并使用 ajax、列 属性 生成数据表。 一切正常。

ajax: {
            url: dataUrl,          //using dataUrl veriable
            dataSrc: 'data'
        },
 columns: [
                { data: 'fundRuleName' },
                { data: 'fundRuleTypeName' },
                { data: 'fundCycleName' },
                { data: 'fundCalculationTypeName' },
                { data: 'flatCalculationFilterName' },
                { data: 'amount' },
                { data: 'applicableDate', render: function (data) { return dd_mm_yyyy(data) } },
                { data: 'endDate', render: function (data) { return data ? dd_mm_yyyy(data) : '' } },
                {
                    data: '[0]',
                    render: function (data) {
                        return generateButton(data);
                    },
                }
            ]

我正在传递“数据”变量中的 JSON 数据。除最后一列外,一切正常。我可以在“generateButton(data)”函数中传递对象的任何 属性,但我想传递整个对象。 有什么办法吗?

我尝试了以下方法但没有用。

  1. {数据:'[0]',渲染:函数(数据){return generateButton(数据);}}
  2. {data: '[]', render: function (data) {return generateButton(data);}}
  3. {数据:'data[]',渲染:函数(数据){return generateButton(数据);}}
  4. {data: '[data]', render: function (data) {return generateButton(data);}}
  5. {数据:'data',渲染:函数(数据){return generateButton(数据);}}
  6. {数据:'data{}',渲染:函数(数据){return generateButton(数据);}}
  7. {data: '{data}', render: function (data) {return generateButton(data);}}

如果您发现了什么,请告诉我。

您需要传递 null

看我的例子:

var dataUrl = "https://my-json-server.typicode.com/SagnalracSO/repoJD/employees?_limit=3";

var table = $('#example').DataTable({
  ajax: {
    url: dataUrl,          //using dataUrl veriable
    dataSrc: ''
  },
  columns: [
    { data: 'firstName' },
    { data: 'lastName' },
    { data: 'position' },
    { data: 'office' },
    { data: 'age' },
    { data: 'startDate' },
    { data: 'salary' },
    { data: 'extn' },
    { data: 'email' },
    {
      data: null,
      render: function (data, row, full) {
        return generateButton(data);
      },
    }
  ]
});

function generateButton(data) { 
    
    var dataItem = JSON.stringify(data);
    
    return "<a onclick='openFundRuleForm(" + dataItem + ")' rule data-toggle='tooltip' class='btn btn-sm btn-outline-primary'><i class='fas fa-edit'></i></a>";
}

function openFundRuleForm(data) {
   console.log(data);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start Date</th>
      <th>Salary</th>
      <th>Ext #</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
</table>