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

如何解决无法在数据表中设置属性“id”

你好，我使用数据表，我从 ajax 和 foreach 数据中获取数据，然后将行添加到我的数据表中，但我总是收到这样的错误 create:805 Uncaught TypeError: Cannot set property 'id' of null in line code "] )。 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>

解决方法

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

话虽如此，在调用它的 draw() 方法之前，您需要 row node()，以便在您尝试获取它之前生成它的 html。在此处查看示例：https://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++;
});