Ajax DataTable不显示包含点(.)的字段名称的值
Ajax DataTable不显示包含点(.)的字段名称的值
提问于 2021-05-14 18:08:46
我的ajax DataTable响应是这样的，但是它没有在浏览器中显示fieldname值。
我使用Laravel作为后端。我的ajax DataTable没有像brands.name值那样显示字段名，这意味着如果字段名包含.，那么它就不会显示值。
{
"draw": 1,
"iTotalRecords": 4,
"iTotalDisplayRecords": 4,
"aaData": [{
"models.id": 2,
"brands.name": "Maruti",
"models.name": "Maruti",
"action": "<a class=\"tp\" title=\"Edit\" href=\"http:\/\/localhost\/cnp1352\/admin\/make-and-model\/Mg==\/edit\"><i class='fa fa-edit'><\/i><\/a>\n<a title=\"Soft Delete\" data-id=\"Mg==\" data-table=\"bW9kZWxz\" class='delete tp' href='javascript:void(0);'><i\n class='fa fa-trash-alt'><\/i><\/a>\n"
}, {
"models.id": 2,
"brands.name": "Maruti",
"models.name": "Maruti",
"action": "<a class=\"tp\" title=\"Edit\" href=\"http:\/\/localhost\/cnp1352\/admin\/make-and-model\/Mg==\/edit\"><i class='fa fa-edit'><\/i><\/a>\n<a title=\"Soft Delete\" data-id=\"Mg==\" data-table=\"bW9kZWxz\" class='delete tp' href='javascript:void(0);'><i\n class='fa fa-trash-alt'><\/i><\/a>\n"
}, {
"models.id": 1,
"brands.name": "Honda",
"models.name": "Honda",
"action": "<a class=\"tp\" title=\"Edit\" href=\"http:\/\/localhost\/cnp1352\/admin\/make-and-model\/MQ==\/edit\"><i class='fa fa-edit'><\/i><\/a>\n<a title=\"Soft Delete\" data-id=\"MQ==\" data-table=\"bW9kZWxz\" class='delete tp' href='javascript:void(0);'><i\n class='fa fa-trash-alt'><\/i><\/a>\n"
}, {
"models.id": 1,
"brands.name": "Honda",
"models.name": "Honda",
"action": "<a class=\"tp\" title=\"Edit\" href=\"http:\/\/localhost\/cnp1352\/admin\/make-and-model\/MQ==\/edit\"><i class='fa fa-edit'><\/i><\/a>\n<a title=\"Soft Delete\" data-id=\"MQ==\" data-table=\"bW9kZWxz\" class='delete tp' href='javascript:void(0);'><i\n class='fa fa-trash-alt'><\/i><\/a>\n"
}]
}我的数据表初始化如下：
$(document).ready(function() {
var dataTableSettings = {};
dataTableSettings.autoWidth = false;
dataTableSettings.order = [
[0, "desc"]
];
dataTableSettings.aLengthMenu = [
["10", "20", "30", "-1"],
["10", "20", "30", "all"]
];
dataTableSettings.dom = '<"pull-left"f> Br <"pull-right"l>tip';
// dataTableSettings.dom='Blfrtip';
dataTableSettings.buttons = [];
// dataTableSettings.fixedColumns= true;
dataTableSettings.processing = true;
dataTableSettings.serverSide = true;
dataTableSettings.paging = true;
dataTableSettings.ajax = {};
dataTableSettings.ajax.url = "http://localhost/cnp1352/admin/make-and-model";
dataTableSettings.ajax.data = function(data) {
$(".search-form input, .search-form select ").each(function() {
data[$(this).attr('name')] = $(this).val();
});
};
dataTableSettings.columns = [{
"data": "models.id"
}, {
"data": "brands.name"
}, {
"data": "models.name"
}, {
"data": "action"
}];
dataTableSettings.columnDefs = [
{
"targets": [3],
"orderable": false,
},
{
"visible": false,
"targets": []
},
{
"targets": [],
"createdCell": function(td, cellData, rowData, row, col) {
$(td).addClass("img-custom-product");
}
}
];
dataTableSettings.language = {
paginate: {
previous: "<i class='mdi mdi-chevron-left'>",
next: "<i class='mdi mdi-chevron-right'>"
},
info: "Showing page _PAGE_ of _PAGES_"
};
dataTableSettings.drawCallback = function() {
$(".dataTables_paginate > .pagination").addClass("pagination-rounded")
};
table = $('#empTable').DataTable(dataTableSettings);
$('#empTable_filter input').addClass('form-control');
$('#empTable_length select').addClass('form-control');
var info = table.page.info();
});但输出如下所示：
回答 1
Stack Overflow用户
发布于 2021-05-14 20:31:04
DataTables对drill down into nested JSON structures使用了JavaScript的点分符号。而且，正如您所看到的，这与JSON键冲突，JSON键本身的名称中有点，例如"brands.name"。
解决方案是将这些名称放在方括号中：
dataTableSettings.columns = [
{ "data": ["models.id"] },
{ "data": ["brands.name"] },
{ "data": ["models.name"] },
{ "data": "action" }
];现在，Datatables将使用JavaScript方括号表示法，而不是这些项的虚线表示法。
有关背景，请参见Property accessors。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67532567
复制相关文章
相似问题
腾讯云开发者
