如何在数据表列 属性 的数据中传递整个对象
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)”函数中传递对象的任何 属性,但我想传递整个对象。
有什么办法吗?
我尝试了以下方法但没有用。
- {数据:'[0]',渲染:函数(数据){return generateButton(数据);}}
- {data: '[]', render: function (data) {return generateButton(data);}}
- {数据:'data[]',渲染:函数(数据){return generateButton(数据);}}
- {data: '[data]', render: function (data) {return generateButton(data);}}
- {数据:'data',渲染:函数(数据){return generateButton(数据);}}
- {数据:'data{}',渲染:函数(数据){return generateButton(数据);}}
- {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>
我正在使用数据表 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)”函数中传递对象的任何 属性,但我想传递整个对象。 有什么办法吗?
我尝试了以下方法但没有用。
- {数据:'[0]',渲染:函数(数据){return generateButton(数据);}}
- {data: '[]', render: function (data) {return generateButton(data);}}
- {数据:'data[]',渲染:函数(数据){return generateButton(数据);}}
- {data: '[data]', render: function (data) {return generateButton(data);}}
- {数据:'data',渲染:函数(数据){return generateButton(数据);}}
- {数据:'data{}',渲染:函数(数据){return generateButton(数据);}}
- {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>