英文:
Tabulator JS: After loading data column not rendering
问题
after i loading the data via ajax in [tabulatorJS][1], the column header titles changed to data value name.
The ajax response is a java object, which has the same attribute names as the field name in tabulator columns.
The response you can see at bottom of this article.
[Data found][2]
If no data found the table was rendered correctly.
[No data found][3]
table = new Tabulator("#table-div", {
ajaxURL: '/loadDataObject.do',
ajaxConfig: 'GET',
ajaxParams: {name: $('#name').val()},
responsiveLayout: true,
keybindings: true,
locale: true,
langs: {
"de-de": {
}
},
movableColumns: true,
movableRows: true,
resizableRows: false,
headerSort: false,
autoColumns: true,
autoResize: true,
layout: 'fitColumns',
placeholder: $.i18n.prop('table.no_data_found'),
columns: [
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, cssClass: 'disabled'},
{title: $.i18n.prop('table.pos_number'), field: 'posNumber', editor: 'input', width: 40},
{title: $.i18n.prop('table.symbol'), field: 'classSymbol', width: 45, cssClass: 'disabled item-symbol'},
{title: $.i18n.prop('table.item_work_operation_number'), field: 'itemNumber', editor: 'input', width: 70, cssClass: 'item-number text-uppercase'},
{title: $.i18n.prop('table.item_work_operation_name'), field: 'itemName', width: 300, cssClass: 'disabled item-name'},
{title: $.i18n.prop('table.item_length'), field: 'itemLength', width: 70, cssClass: 'disabled item-length'},
{title: $.i18n.prop('table.item_width'), field: 'itemWidth', width: 70, cssClass: 'disabled item-width'},
{title: $.i18n.prop('table.item_height'), field: 'itemHeight', width: 70, cssClass: 'disabled item-height'},
{title: $.i18n.prop('table.warehouse_storage_unit'), field: 'warehouseStorageUnit', width: 70, cssClass: 'disabled warehouse-storage-unit'},
{title: $.i18n.prop('table.position_text'), field: 'positionText', editor: 'input', width: 200}]
});
AJAX-Response
[
{
"posNumber":"1",
"classSymbol":"fa-shopping-cart",
"itemNumber":"V000092",
"itemName":"Test asd asd a ",
"itemLength":1234000.34,
"itemWidth":0.0,
"itemHeight":0.0,
"warehouseStorageUnit":"mm",
"positionText":"jsdfakjfjöq",
"quantity":12.0,
"fCode":"ML",
"benefit":12.0,
"cutLength":0.0,
"cutWidth":0.0,
"cutHeight":0.0,
"edge":"H",
"edgeProperty":"",
"provisionType":""
}
]
<details>
<summary>英文:</summary>
after i loading the data via ajax in [tabulatorJS][1], the column header titles changed to data value name.
The ajax response is a java object, which has the same attribute names as the field name in tabulator columns.
The response you can see at bottom of this article.
[Data found][2]
If no data found the table was rendered correctly.
[No data found][3]
Have you any idea?
table = new Tabulator("#table-div", {
ajaxURL: '/loadDataObject.do',
ajaxConfig: 'GET',
ajaxParams: {name: $('#name').val()},
// data: dataObject,
responsiveLayout: true,
keybindings: true,
locale: true,
langs: {
"de-de": {
}
},
movableColumns: true,
movableRows: true,
resizableRows: false,
headerSort: false,
autoColumns: true,
autoResize: true,
layout: 'fitColumns',
placeholder: $.i18n.prop('table.no_data_found'),
columns: [
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, cssClass: 'disabled'},
{title: $.i18n.prop('table.pos_number'), field: 'posNumber', editor: 'input', width: 40},
{title: $.i18n.prop('table.symbol'), field: 'classSymbol', width: 45, cssClass: 'disabled item-symbol'},
{title: $.i18n.prop('table.item_work_operation_number'), field: 'itemNumber', editor: 'input', width: 70, cssClass: 'item-number text-uppercase'},
{title: $.i18n.prop('table.item_work_operation_name'), field: 'itemName', width: 300, cssClass: 'disabled item-name'},
{title: $.i18n.prop('table.item_length'), field: 'itemLength', width: 70, cssClass: 'disabled item-length'},
{title: $.i18n.prop('table.item_width'), field: 'itemWidth', width: 70, cssClass: 'disabled item-width'},
{title: $.i18n.prop('table.item_height'), field: 'itemHeight', width: 70, cssClass: 'disabled item-height'},
{title: $.i18n.prop('table.warehouse_storage_unit'), field: 'warehouseStorageUnit', width: 70, cssClass: 'disabled warehouse-storage-unit'},
{title: $.i18n.prop('table.position_text'), field: 'positionText', editor: 'input', width: 200}]);
AJAX-Response
[
{
"posNumber":"1",
"classSymbol":"fa-shopping-cart",
"itemNumber":"V000092",
"itemName":"Test asd asd a ",
"itemLength":1234000.34,
"itemWidth":0.0,
"itemHeight":0.0,
"warehouseStorageUnit":"mm",
"positionText":"jsdfakjfjöq",
"quantity":12.0,
"fCode":"ML",
"benefit":12.0,
"cutLength":0.0,
"cutWidth":0.0,
"cutHeight":0.0,
"edge":"H",
"edgeProperty":"",
"provisionType":""
}
]
[1]: http://tabulator.info/
[2]: https://i.stack.imgur.com/yBaDb.png
[3]: https://i.stack.imgur.com/3ArUi.png
</details>
# 答案1
**得分**: 0
这是因为您启用了 ***autoColumns***。
启用自动列功能后，它将根据返回的数据自动创建表格列。
如果您想首先定义列，那么在设置表格时，只需不定义 ***autoColumns*** 选项。
<details>
<summary>英文:</summary>
This is happening because you have ***autoColumns*** enabled.
With auto columns enabled it will automatically create the tables columns based on the data returened.
If you want to define the columns first the you should simply not define the ***autoColumns*** option in your table setup
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论