动态呈现 DataTable 中的列 - Column.Render 属性
Dynamically Render Columns In DataTable - Column.Render Property
我正在开发一个动态数据Table，其中数据源是动态生成的[n]列，其中数据源可能包含4列或6列作为示例。根据 DataTables 论坛 (How to Render Columns from a dynamic data source) 上的这个 post，可以定义和构建列定义的变量，并将其传递给初始化。
基于此，我创建了以下代码，可以很好地满足给定的目的，并根据数据源动态呈现列。
HTML:
<div class="data-table">
<table id="dataTable" class="table table-striped table-bordered" style="width:100%;"></table>
</div>
脚本：
<script>
var dataToSend = {};
var dataTable;
dataToSend = {
"regionId": @Model.RegionId
}
// Get Column Defintions
var dtColumns = @Html.Raw(Json.`enter code here`Serialize(listOfDefintions));
// DataTable
$(function () {
dataTable = {
dt: null,
init: function () {
dt = $("#dataTable").DataTable({
ajax: {
type: "GET",
url: "@Url.Action("GetDataForGrid", "Contact")",
data: function () {
return dataToSend;
},
datatype: "json",
dataSrc: ""
},
columns: dtColumns,
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
dataTable.init();
});
</script>
以上代码根据下面可以看到的数据源呈现以下数据Table。
数据源：
呈现Table：
我的问题是关于 table 的空最后一列，我需要在其中呈现一个按钮。如果我想渲染一个具有已知列值的 table，我通常会按照下面的代码行编写一些内容，我会在其中使用 DataTable 属性 column.Render.正如您在下面看到的，使用列的数据 属性，我可以使用创建一个函数来呈现一个按钮，该按钮可用于快速导航到传递“id”的 Contact/Edit 页面Url 路由值，意味着可以编辑所选联系人的具体详细信息。
<script>
var dataToSend = {};
var contactDataTable;
dataToSend = {
"regionId": @Model.RegionId
};
$(function () {
contactDataTable = {
dt: null,
init: function () {
dt = $('#contact-data-table').DataTable({
ajax: {
type: "GET",
url: "@Url.Action("GetDataForGrid", "Contact")",
data: function () {
return dataToSend;
},
datatype: "json",
dataSrc: ""
},
columns: [
{
"title": "Forename",
"data": "forename",
"searchable": true,
},
{
"title": "Surname",
"data": "surname",
"searchable": true,
},
{
"title": "Email",
"data": "email",
"searchable": true
},
{
"Status":
"status":
"searchable":
},
{
"title": "Role",
"data": "roleName",
"searchable": true
},
{
"title": "",
"data": "id",
"searchable": false,
"sortable": false,
"render": function (data, type, full, meta) {
var buffer = '<a href="@Url.Action("Edit","Contact")/' + data + '" class="btn btn-sm btn-primary js-action"><i class="far fa-edit"></i></a> '
buffer += '<a href="@Url.Action("Delete", "Contact")/' + data + '" class="btn btn-sm btn-danger js-action"><i class="far fa-trash-alt"></i></a>';
return buffer;
}
}
],
columnDefs: [
{ "width": "15%", "targets": 0 },
{ "width": "15%", "targets": 1 },
{ "width": "20%", "targets": 2 },
{ "width": "15%", "targets": 3 },
{ "width": "15%", "targets": 4 },
{ "width": "20%", "targets": 5 },
],
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
</script>
如果我在将列定义变量传递给数据Table 初始化之前定义和构建列定义变量，我如何才能实现在 table 中呈现按钮的相同原理？
任何帮助都会很棒。
给定问题的一个简单解决方案是使用 Column.defaultContent 属性 和自定义 onClick 事件，可用于构造所需的相关 URL。
在下面的示例中，我修改了我的 dtColumns 数组，如提供的图像所示，以便相关对象包含 defaultContent 的定义，设置为将呈现的字符串一个简单的按钮。对于 DataTable 使用的 defaultContent，您必须将 Data 属性 设置为空。
DataTable - 数据源
var myColumnDefs = [
{ title: "Forename", data: "forename", width: "15%"},
{ title: "Surname", data: "surname", width: "15%"},
{ title: "Email", data: "email", width: "20%"},
{ title: "Status", data: "status", width: "15%"},
{ title: "Role", data: "roleName", width: "15%"},
{ title: "", data: "(string)null", width: "20%", searchable: false, sortable: false, defaultContent: "<a id='btnEdit' class='btn btn-sm btn-primary js-action'><i class='fas fa-edit'></i></a>"}
]
在这样做的过程中，table 如下图所示：
修改后的代码实际上只包含额外的函数来处理按钮的 onClick 事件。在这种情况下，我可以使用$("#dataTable").DataTable().row((selectedRow).parents("tr")).data()获取加载记录的数据，其中可以访问id 属性。使用这个 Id 值，我然后能够构建所需的 URL，它恰好被传递到呈现 Bootstrap 模态的函数中。
<script>
var dataToSend = {};
var dataTable;
// Set Data To Send
dataToSend = {
"regionId": "@Model.RegionId"
}
// Get Column Defintions
var dtColumns = @Html.Raw(Json.Serialize(listOfDefintions));
// DataTable
$(function () {
dataTable = {
dt: null,
init: function () {
dt = $("#dataTable").DataTable({
ajax: {
type: "GET",
url: "@Url.Action("GetDataForGrid", "Contact")",
data: function () {
return dataToSend;
},
datatype: "json",
dataSrc: ""
},
columns: dtColumns,
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
dynaGridDataTable.init();
// DataTable Buttons
$("#dataTable").on("click", ".js-action", function (event) {
var btnId = $(this).attr("id");
var recordId = getRecordId($(this));
if (btnId !== undefined && btnId == "btnEdit") {
// Create Edit URL
var href = '@Url.Action("Popup", "DynaGrid")?appGridName=@Model.AppGrid.GridName&masterRecordId=@Model.AppGrid.MasterRecordFKId&id=' + recordId + '';
renderModalForDataTableButton(href);
} else if (btnId !== undefined && btnId == "btnDelete") {
// Code
} else {
alert("Something Went Wrong - Unable To Redirect");
}
});
// Get Record Id Of Current Row
function getRecordId(selectedRow) {
var data = $("#dataTable").DataTable().row((selectedRow).parents("tr")).data();
return data.id;
}
function renderModalForDataTableButton(href) {
$.get(href, function (data) {
$('#myModalContent').html(data);
$('#myModal').modal('show');
});
}
});
</script>
我正在开发一个动态数据Table，其中数据源是动态生成的[n]列，其中数据源可能包含4列或6列作为示例。根据 DataTables 论坛 (How to Render Columns from a dynamic data source) 上的这个 post，可以定义和构建列定义的变量，并将其传递给初始化。
基于此，我创建了以下代码，可以很好地满足给定的目的，并根据数据源动态呈现列。
HTML:
<div class="data-table">
<table id="dataTable" class="table table-striped table-bordered" style="width:100%;"></table>
</div>
脚本：
<script>
var dataToSend = {};
var dataTable;
dataToSend = {
"regionId": @Model.RegionId
}
// Get Column Defintions
var dtColumns = @Html.Raw(Json.`enter code here`Serialize(listOfDefintions));
// DataTable
$(function () {
dataTable = {
dt: null,
init: function () {
dt = $("#dataTable").DataTable({
ajax: {
type: "GET",
url: "@Url.Action("GetDataForGrid", "Contact")",
data: function () {
return dataToSend;
},
datatype: "json",
dataSrc: ""
},
columns: dtColumns,
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
dataTable.init();
});
</script>
以上代码根据下面可以看到的数据源呈现以下数据Table。
数据源：
呈现Table：
我的问题是关于 table 的空最后一列，我需要在其中呈现一个按钮。如果我想渲染一个具有已知列值的 table，我通常会按照下面的代码行编写一些内容，我会在其中使用 DataTable 属性 column.Render.正如您在下面看到的，使用列的数据 属性，我可以使用创建一个函数来呈现一个按钮，该按钮可用于快速导航到传递“id”的 Contact/Edit 页面Url 路由值，意味着可以编辑所选联系人的具体详细信息。
<script>
var dataToSend = {};
var contactDataTable;
dataToSend = {
"regionId": @Model.RegionId
};
$(function () {
contactDataTable = {
dt: null,
init: function () {
dt = $('#contact-data-table').DataTable({
ajax: {
type: "GET",
url: "@Url.Action("GetDataForGrid", "Contact")",
data: function () {
return dataToSend;
},
datatype: "json",
dataSrc: ""
},
columns: [
{
"title": "Forename",
"data": "forename",
"searchable": true,
},
{
"title": "Surname",
"data": "surname",
"searchable": true,
},
{
"title": "Email",
"data": "email",
"searchable": true
},
{
"Status":
"status":
"searchable":
},
{
"title": "Role",
"data": "roleName",
"searchable": true
},
{
"title": "",
"data": "id",
"searchable": false,
"sortable": false,
"render": function (data, type, full, meta) {
var buffer = '<a href="@Url.Action("Edit","Contact")/' + data + '" class="btn btn-sm btn-primary js-action"><i class="far fa-edit"></i></a> '
buffer += '<a href="@Url.Action("Delete", "Contact")/' + data + '" class="btn btn-sm btn-danger js-action"><i class="far fa-trash-alt"></i></a>';
return buffer;
}
}
],
columnDefs: [
{ "width": "15%", "targets": 0 },
{ "width": "15%", "targets": 1 },
{ "width": "20%", "targets": 2 },
{ "width": "15%", "targets": 3 },
{ "width": "15%", "targets": 4 },
{ "width": "20%", "targets": 5 },
],
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
</script>
如果我在将列定义变量传递给数据Table 初始化之前定义和构建列定义变量，我如何才能实现在 table 中呈现按钮的相同原理？
任何帮助都会很棒。
给定问题的一个简单解决方案是使用 Column.defaultContent 属性 和自定义 onClick 事件，可用于构造所需的相关 URL。
在下面的示例中，我修改了我的 dtColumns 数组，如提供的图像所示，以便相关对象包含 defaultContent 的定义，设置为将呈现的字符串一个简单的按钮。对于 DataTable 使用的 defaultContent，您必须将 Data 属性 设置为空。
DataTable - 数据源
var myColumnDefs = [
{ title: "Forename", data: "forename", width: "15%"},
{ title: "Surname", data: "surname", width: "15%"},
{ title: "Email", data: "email", width: "20%"},
{ title: "Status", data: "status", width: "15%"},
{ title: "Role", data: "roleName", width: "15%"},
{ title: "", data: "(string)null", width: "20%", searchable: false, sortable: false, defaultContent: "<a id='btnEdit' class='btn btn-sm btn-primary js-action'><i class='fas fa-edit'></i></a>"}
]
在这样做的过程中，table 如下图所示：
修改后的代码实际上只包含额外的函数来处理按钮的 onClick 事件。在这种情况下，我可以使用$("#dataTable").DataTable().row((selectedRow).parents("tr")).data()获取加载记录的数据，其中可以访问id 属性。使用这个 Id 值，我然后能够构建所需的 URL，它恰好被传递到呈现 Bootstrap 模态的函数中。
<script>
var dataToSend = {};
var dataTable;
// Set Data To Send
dataToSend = {
"regionId": "@Model.RegionId"
}
// Get Column Defintions
var dtColumns = @Html.Raw(Json.Serialize(listOfDefintions));
// DataTable
$(function () {
dataTable = {
dt: null,
init: function () {
dt = $("#dataTable").DataTable({
ajax: {
type: "GET",
url: "@Url.Action("GetDataForGrid", "Contact")",
data: function () {
return dataToSend;
},
datatype: "json",
dataSrc: ""
},
columns: dtColumns,
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
dynaGridDataTable.init();
// DataTable Buttons
$("#dataTable").on("click", ".js-action", function (event) {
var btnId = $(this).attr("id");
var recordId = getRecordId($(this));
if (btnId !== undefined && btnId == "btnEdit") {
// Create Edit URL
var href = '@Url.Action("Popup", "DynaGrid")?appGridName=@Model.AppGrid.GridName&masterRecordId=@Model.AppGrid.MasterRecordFKId&id=' + recordId + '';
renderModalForDataTableButton(href);
} else if (btnId !== undefined && btnId == "btnDelete") {
// Code
} else {
alert("Something Went Wrong - Unable To Redirect");
}
});
// Get Record Id Of Current Row
function getRecordId(selectedRow) {
var data = $("#dataTable").DataTable().row((selectedRow).parents("tr")).data();
return data.id;
}
function renderModalForDataTableButton(href) {
$.get(href, function (data) {
$('#myModalContent').html(data);
$('#myModal').modal('show');
});
}
});
</script>