Datatables rows.add error:DataTables warning: table id=example - Requested unknown parameter 'ORGANI
Datatables rows.add error:DataTables warning: table id=example - Requested unknown parameter 'ORGANI
systemsNatu
Posts: 11Questions: 4Answers: 0
Link to test case:
Debugger code (debug.datatables.net):
html
<table id="example" class="stripe row-border order-column" style="width:100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th><i class="fa fa-minus-square" aria-hidden="true"></i></th>
<th>会社ID</th>
<th>保管場所ID</th>
<th>保管場所情報_建物</th>
<th>保管場所情報_階</th>
<th>保管場所情報_エリア</th>
<th>保管場所情報_保管タイプ</th>
<th>コメント</th>
<th class="noExport">形状</th>
<th>形状コード</th>
<th>形状名</th>
<th>座標：X</th>
<th>座標：Y</th>
<th>座標：Z</th>
<th>表示色：赤</th>
<th>表示色：緑</th>
<th>表示色：青</th>
<th>引出線位置（上面図）</th>
<th>ラベル位置X（上面図）</th>
<th>ラベル位置Y（上面図）</th>
<th>ラベル位置Z（上面図）</th>
<th>引出線折リ曲げフラグ（上面図）</th>
<th>引出線位置（360°）</th>
<th>ラベル位置X（360°）</th>
<th>ラベル位置Y（360°）</th>
<th>ラベル位置Z（360°）</th>
<th>引出線折リ曲げフラグ（360°）</th>
<th>棚数</th>
<th>カメラの向き</th>
<th>データ作成者</th>
<th>データ更新者</th>
<th>データ作成日時</th>
<th>データ更新日時</th>
<th>データ状態</th>
<th>LABEL_DEFAULT_POS_X</th>
<th>LABEL_DEFAULT_POS_Y</th>
<th>LABEL_DEFAULT_POS_Z</th>
<th>LABEL_AXIS_Y</th>
<th>LABEL_ANGLE</th>
</tr>
</thead>
</table>
js
function tableInitial() {
table = $('#example').DataTable();
if (table) {
// 二回目以降の描画の場合、初期化が必要
table.state.clear();
table.destroy();
$("#example tbody").empty();
}
table = $('#example').dataTable({
ajax: {
"url": domain + '/api/GetAllLocationInfoDetail',
"type": "GET",
"dataSrc": "",
},
autoWidth: true,
deferRender: false,
scrollY: 700,
scrollX: true,
scrollCollapse: true,
paging: true,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength: 25,
stateSave: true,
processing: true,
//bLengthChange: false,
sPaginationType: "full_numbers",
fixedColumns: {
leftColumns: 4
},
language: {
"url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json",
"processing": "処理中...",
"lengthMenu": "_MENU_ 件表示",
"zeroRecords": "データはありません。",
"info": " _TOTAL_ 件中 _START_ から _END_ まで表示",
"infoEmpty": " 0 件中 0 から 0 まで表示",
"infoFiltered": "（全 _MAX_ 件より抽出）",
"infoPostFix": "",
"search": "部分検索:",
"url": "",
"paginate": {
"first": "先頭",
"previous": "前",
"next": "次",
"last": "最終"
},
select: {
rows: {
_: "Selected %d rows",
0: "行をクリックして選択します",
1: "1行選択しました"
}
}
},
select: true,
dom: 'lB<"toolbar">frtip',
buttons: [
{
extend: 'excelHtml5',
text: 'EXCELファイルに出力',
footer: true,
filename: '360°Viewer-保管場所マスタ',
exportOptions: {
//columns: ':visible:not(:eq(0))'
columns: "thead th:not(.noExport)"
}
},
{
extend: 'csvHtml5',
text: 'CSVファイルに出力',
bom: true,
footer: true,
filename: '360°Viewer-保管場所マスタ',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'copyHtml5',
text: 'クリップボードにコピー',
footer: true,
filename: '360°Viewer-保管場所マスタ',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'print',
text: '印刷',
footer: true,
filename: '360°Viewer-保管場所マスタ',
title: function () {
return "360°Viewer-保管場所マスタ";
},
exportOptions: {
columns: "thead th:not(.noExport)"
},
orientation: 'landscape',
pageSize: 'LEGAL'
},
{
extend: 'colvis',
text: '列の可視/不可視',
},
{
text: '行追加',
action: function (e, dt, node, config) {
$("#example").DataTable().row.add(
["", "", "", "", "", /*1-5*/
"", "", "", "", "", /*6-10*/
"", "", "", "", "", /*11-15*/
"", "", "", "", "", /*16-20*/
"", "", "", "", "", /*21-25*/
"", "", "", "", "", /*26-30*/
"", "", "", "", "", /*31-35*/
"", "", "", "", ""/*35-39*/
]).draw();
}
}
],
initComplete: function () {
var api = this.api();
$(this).on('click', "i.fa.fa-minus-square", function (e) {
api.row($(this).closest('tr')).remove().draw();
});
},
columns: [
{ data: 'ORGANIZATION_ID' },
{ data: '' },
{ data: 'ORGANIZATION_ID' },
{ data: 'LOCATION_ID' },
{ data: 'LOCATION_B' },
{ data: 'LOCATION_F' },
{ data: 'LOCATION_A' },
{ data: 'STORE_TYPE' },
{ data: 'DESCRIPTION' },
{ data: 'LOCATION_TYPE' },
{ data: 'LOCATION_TYPE' },
{ data: 'LOCATION_TYPE_NAME' },
{ data: 'LOCATION_X' },
{ data: 'LOCATION_Y' },
{ data: 'LOCATION_Z' },
{ data: 'COLOR_R' },
{ data: 'COLOR_G' },
{ data: 'COLOR_B' },
{ data: 'LEADER_POS_TOP' },
{ data: 'DIFF_X_TOP' },
{ data: 'DIFF_Y_TOP' },
{ data: 'DIFF_Z_TOP' },
{ data: 'LEADER_BREAK_TOP' },
{ data: 'LEADER_POS_360' },
{ data: 'DIFF_X_360' },
{ data: 'DIFF_Y_360' },
{ data: 'DIFF_Z_360' },
{ data: 'LEADER_BREAK_360' },
{ data: 'SHELVES_COUNT' },
{ data: 'CAMERA_ANGLE' },
{ data: 'CREATE_ID' },
{ data: 'UPDATE_ID' },
{ data: 'CREATE_DATE' },
{ data: 'UPDATE_DATE' },
{ data: 'DATA_STATUS' },
{ data: 'LABEL_DEFAULT_POS_X' },
{ data: 'LABEL_DEFAULT_POS_Y' },
{ data: 'LABEL_DEFAULT_POS_Z' },
{ data: 'LABEL_AXIS_Y' },
{ data: 'LABEL_ANGLE' }
],
columnDefs: [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
},
{
targets: 1,
type: "dom-text",
"searchable": false,
"orderable": false,
"className": "dt-center",
render: function (data, type, row, meta) {
return "<i class=\"fa fa-minus-square\" aria-hidden=\"true\"></i>";
}
},
{
targets: 9,
searchable: false,
render: function (data) { return createSelect(data); }
},
{
targets: 10,
visible: false
},
{
targets: 11,
visible: false
}
],
select: {
'style': 'multi'
},
order: [[2, 'asc'], [3, 'asc']]
});
}
// the function creates a select box
function createSelect(selItem) {
var sel = "<select class='team_ddl'><option>形状 選択</option>";
shapeMap.forEach((value, key, map) => {
if (key == selItem) {
sel += "<option selected value = '" + key + "' >" + value + "</option>";
}
else {
sel += "<option value = '" + key + "' >" + value + "</option>";
}
});
sel += "</select>";
return sel;
}
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var e = document.getElementById('company-selectoptionItem');
var companyId = e.options[e.selectedIndex].value;
var saveplaceId = document.getElementById("empid").value.trim();
if (saveplaceId == '') {
if (data[2] == companyId) return true;
} else {
if (data[2] == companyId && data[3] == saveplaceId) return true;
}
return false;
}
);
ajax data
{
"ORGANIZATION_ID": "DOC_0001",
"LOCATION_ID": "CAM07FS0001",
"LOCATION_B": "本社",
"LOCATION_F": "7F",
"LOCATION_A": "南エリア",
"STORE_TYPE": "0",
"DESCRIPTION": "7F 南エリア 監視カメラ1",
"LOCATION_TYPE": "0",
"LOCATION_TYPE_NAME": "座標",
"LOCATION_X": -42.642,
"LOCATION_Y": 28.36,
"LOCATION_Z": -19.74,
"COLOR_R": 0,
"COLOR_G": 0,
"COLOR_B": 0,
"LEADER_POS_TOP": 2,
"DIFF_X_TOP": -27.5,
"DIFF_Y_TOP": 0,
"DIFF_Z_TOP": 15,
"LEADER_BREAK_TOP": 0,
"LEADER_POS_360": 0,
"DIFF_X_360": 0,
"DIFF_Y_360": 0,
"DIFF_Z_360": 0,
"LEADER_BREAK_360": 0,
"SHELVES_COUNT": 0,
"CAMERA_ANGLE": 0,
"CREATE_ID": "SYSTEM",
"UPDATE_ID": null,
"CREATE_DATE": "2020-06-11T00:00:00",
"UPDATE_DATE": null,
"DATA_STATUS": "N",
"LABEL_DEFAULT_POS_X": 0,
"LABEL_DEFAULT_POS_Y": 0,
"LABEL_DEFAULT_POS_Z": 0,
"LABEL_AXIS_Y": 0,
"LABEL_ANGLE": 0
},
Error messages shown:
Description of problem:
I want add a new row ,but this error seem complex ,can anyone help me? thank u!
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Also, your
row.add()call is adding an array of data. But you are explicitly telling DataTables to expect an object through the use ofcolumns.data.See the manual for more information on this.
Allan