Jquery Datatable在行中显示空数据

我有一个数据表，它有两行。第一行直接从数据库中导出，并在UI上呈现。第二行是通过javascript中的addRow方法添加的。请参阅下面的代码：

以下是html源中的表行：

下面是访问该行的代码：

 var table = "";

 table = $("#orders").DataTable({
                ajax: {
                    url: "/api/dfddsfs?id="+ id,
                    dataSrc: ""
                },
                columns: [
                    {

                        data: "product.description",
                    },
                    {

                        data: "quantity"
                    },
                    {

                        data: "product.productPrice"
                    },
                    {
                        data: "discount"
                    },
                    {
                        data: "product.isTaxable"
                    },
                    {
                        data: "finalPrice"
                    },
                    {
                        data: "lineItemTotal"
                    },
                    {
                        data: "product.description",
                        render: function (data, type, product) {

                            return "<span class='glyphicon glyphicon-trash js-delete' data-lineitem-id=" + data + "></span>";


                        }
                    }
                ]
            });


 $('#addRow').click(function () {
    if ($("[name='Product.description']").valid()) {
        //Create a row if not null
        var rowHtml = $("#newRow").find("tr")[0].outerHTML;
        //Add row to the table
        $('#orders').DataTable().row.add($(rowHtml)).draw();
        //Set the first column to product description
        $('#orders tr:first-child td:first-child').first().html($("#product").val());
        //Set second column to quantity
        $('#orders tr:first-child td:nth-child(2)').append("2");

        //Set third column to price
        $('#orders tr:first-child td:nth-child(3)').first().html("123");
       //Set fourth column to dicount
        $('#orders tr:first-child td:nth-child(4)').append("10");
        //Set fifth column as a checkbox
        $('#orders tr:first-child td:nth-child(5)').append("<label><input type='checkbox' value=''></label>");
        //clear the product input text
        $('#product').val('');
    }
    else
        alert("Please choose a product");
});




     $('#save').click(function (evt) {

           table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                   var data = this.data();
                   console.log("data is " + JSON.stringify(data));
            });

      });

var表=”；
表=$（“#订单”）。数据表({
阿贾克斯：{
url:“/api/dfddsfs？id=“+id，
dataSrc:“
},
栏目：[
{
数据：“产品说明”，
},
{
数据：“数量”
},
{
数据：“产品。产品价格”
},
{
数据：“折扣”
},
{
数据：“product.isTaxable”
},
{
数据：“最终价格”
},
{
数据：“lineItemTotal”
},
{
数据：“产品说明”，
呈现：函数（数据、类型、产品）{
返回“”；
}
}
]
});
$（'#addRow'）。单击（函数（）{
if（$（“[name='Product.description']”）有效（）{
//如果不为null，则创建一行
var rowHtml=$（“#newRow”）.find（“tr”）[0].outerHTML；
//将行添加到表中
$（'#orders'）.DataTable（）.row.add（$（rowHtml））.draw（）；
//将第一列设置为product description
$（“#orders tr:first child td:first child”）.first（）.html（$（“#product”）.val（））；
//将第二列设置为“数量”
$（“#orders tr:first child td:n child（2）”）。附加（“2”）；
//将第三列设置为price
$（“#orders tr:first child td:nth child（3）”.first（）.html（“123”）；
//将第四列设置为dicount
$（“#orders tr:first child td:n child（4）”。附加（“10”）；
//将第五列设置为复选框
$（“#orders tr:first child td:n child（5）”。追加（“”）；
//清除产品输入文本
$（'产品'）.val（''）；
}
其他的
提醒（“请选择产品”）；
});
$（“#保存”）。单击（函数（evt）{
table.rows（）.every（函数（rowIdx、tableLoop、rowLoop）{
var data=this.data（）；
log（“数据是”+JSON.stringify（数据））；
});
});

以下是控制台结果：

data is <br/>
data is {"product":{"description":"","productPrice":"","isTaxable":""},"quantity":"","discount":"","finalPrice":"","lineItemTotal":""}
8:352 data is {"delete":"<i class='fa fa-pencil-square' aria-hidden='true'></i> <i class='fa fa-minus-square .js-delete' aria-hidden='true'></i>","id":21,"quantity":12,"discount":12,"product":{"id":501,"upc":null,"description":"Eggs","restockQty":26,"productPrice":40000,"isTaxable":false,"productCost":11000,"image":"","productCode":"01 B 04","packing":20,"productWholesalePrice":20000},"productId":501,"salesOrder":null,"salesOrderId":8,"lineTaxes":9,"isTaxable":true,"lineItemTotal":999,"finalPrice":9999}

数据是

数据为{“产品”：{“说明”：“产品价格”：“isTaxable”：“}”，“数量”：“折扣”：“最终价格”：“lineItemTotal”：“}”
8:352数据为{“删除”：“id”：21，“数量”：12，“折扣”：12，“产品”：{“id”：501，“upc”：null，“说明”：“鸡蛋”，“进货数量”：26，“产品价格”：40000，“isTaxable”：false，“产品成本”：11000，“图像”：“产品代码”：“01 B 04”，“包装”：20，“产品批发商价格”：20000}，“产品id”：501，“销售订单”：null，“销售订单id”：8，“行税”：9，“isTaxable”：true，“lineItemTotal”：999，“finalPrice”：9999}

---

如您所见，结果显示为数据对象。一个有值，一个没有值

您正在调用

.DataTable（）

再次单击保存按钮。必须在单击按钮外初始化datatable，将其存储在变量中，并使用该变量对行进行迭代

var table = $('#orders').DataTable();// store previously initialised datatable in variable

$('#save').click(function (evt) {
      //var table = $('#orders').DataTable(); -- remove it
       table.rows().every(function (rowIdx, tableLoop, rowLoop) {
               var data = this.data();
               console.log("data is " + JSON.stringify(data));
        });

  });

---

遵循您的建议，但仍然得到空值。请查看我的编辑。这应该可以工作，但需要检查浏览器上是否有任何其他错误。您能否在代码片段或JSFIDLE上重新创建您的问题，以便我可以查看它

var table=$（'#orders'）。如果您手头没有表实例，则DataTable（）

是正确的。请检查我编辑的问题。我可以直接从db查看数据锥进，但不能手动添加数据锥进。实际上，我可以在html中看到这两行，但我无法访问手动添加的行的值。Datatable接受json中的数据并在UI上呈现，当您迭代行时，它在内部使用相同的json，但它不会找到手动添加的json中的数据，这就是为什么

table.rows.every

不适用于您的原因。您可以创建自己的代码来读取表行并将其放入json或纯文本中，而不是使用datable API。