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

Question

你好 iam 使用数据表我从 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>

Answer 1

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

话虽如此，在调用它的node() 方法之前，您需要draw() 您的row，以便在您尝试获取它之前生成它的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++;
});