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

问题描述

我正在使用Datatables 1.10.21并使用ajax，column属性生成数据表。一切正常。

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);
                    },}
            ]

我要在“ data”变量中传递JSON数据。除最后一栏外，其他一切正常。我可以在“ generateButton（data）”函数中传递对象的任何属性，但我想传递整个对象。有什么办法吗？

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

{data：'[0]'，render：function（data）{return generateButton（data）;}}
{data：'[]'，render：function（data）{return generateButton（data）;}}
{data：'data []'，render：function（data）{return generateButton（data）;}}
{data：'[data]'，render：function（data）{return generateButton（data）;}}
{data：'data'，render：function（data）{return generateButton（data）;}}
{data：'data {}'，render：function（data）{return generateButton（data）;}}
{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>

快乐编码！

ajax datatables datatables-1.10 javascript jquery