无法在数据表中设置属性'id'

Question

你好，我使用datatable从ajax和foreach数据中获取数据，然后将行添加到我的datatable中，但我总是收到这样的错误create:805 Uncaught TypeError:无法在行代码中设置null的属性"id"((。node((.id=obj.id">

对于我的代码

$.ajax({
url : "<?php echo url('prod_bill_of_material/get-itemfg') ?>",
method : "GET",
success : function(data){
console.log(data);
// var trHTML = '';
var no = 1 ;
table_modal_itemfg.clear().draw();
var field="itemfg";
$.each(data, function( index , obj){

table_modal_itemfg.row.add( [
'<input type="hidden" class="" value="'+ obj.id +'" id="itemfg_id'+obj.id+'">'+no,
'<input type="hidden" readonly id="item_code_'+obj.id+'" value="'+obj.item_code+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_code+'">'+obj.item_code,
'<input type="hidden" readonly id="item_name_'+obj.id+'" value="'+obj.item_name+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_name+'">'+obj.item_name,                            
'<input type="hidden" readonly id="item_measur_'+obj.id+'" value="'+obj.item_measur+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_measur+'">'+obj.item_measur,                            
'<input type="hidden" readonly id="item_weight_'+obj.id+'" value="'+obj.item_weight+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_weight+'">'+obj.item_weight,                            
'<div style="text-align:center;"><button type="button" class="btn btn-info btn-sm" onclick="adddata('+obj.id+',''+obj.item_name+'',''+field+'')" data-toggle="tooltip" data-placement="top" title="Search"><span class="fa fa-check"> </span></button></div>',
] ).node().id = obj.id;
table_modal_itemfg.draw(false);
no++;
});
}
});

我的模态表

<div class="modal fade" id="showitemfg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content" >
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel17">Add Item FG</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">                       
<table class="table" id="table_modal_item_Fg">
<thead>
<tr>
<th width="5%">No</th>
<th width="15%">Item Code</th>
<th width="15%">Item Name</th>
<th width="10%">Item Measur</th>
<th width="10%">Item Weight</th>
<th width="10%">Status</th>
<th width="5%">Action</th>
</tr>
</thead>
<tbody id="row-detail-modal">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 1

看起来您应该更深入地了解Datatables的工作原理：它的设计主要是为了避免每次数据更改时生成自己的HTML的痛苦。它甚至有自己的ajax填充选项，可以省去管理自己的ajax调用的麻烦。

也就是说，在调用node()方法之前，您需要先draw()您的row，以便在尝试获取它之前生成它的htmlhttps://datatables.net/reference/api/row.add((

var table = $('#example').DataTable();

var rowNode = table
.row.add( [ 'Fiona White', 32, 'Edinburgh' ] )
.draw()
.node();

$( rowNode )
.css( 'color', 'red' )
.animate( { color: 'black' } );

下面的代码应该可以让你摆脱这个特殊的错误消息：

$.each(data, function( index , obj){
table_modal_itemfg.row.add( [
'<input type="hidden" class="" value="'+ obj.id +'" id="itemfg_id'+obj.id+'">'+no,
'<input type="hidden" readonly id="item_code_'+obj.id+'" value="'+obj.item_code+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_code+'">'+obj.item_code,
'<input type="hidden" readonly id="item_name_'+obj.id+'" value="'+obj.item_name+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_name+'">'+obj.item_name,                            
'<input type="hidden" readonly id="item_measur_'+obj.id+'" value="'+obj.item_measur+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_measur+'">'+obj.item_measur,                            
'<input type="hidden" readonly id="item_weight_'+obj.id+'" value="'+obj.item_weight+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_weight+'">'+obj.item_weight,                            
'<div style="text-align:center;"><button type="button" class="btn btn-info btn-sm" onclick="adddata('+obj.id+',''+obj.item_name+'',''+field+'')" data-toggle="tooltip" data-placement="top" title="Search"><span class="fa fa-check"> </span></button></div>',
] ).draw().node().id = obj.id;
table_modal_itemfg.draw(false);
no++;
});