数据表在行中显示空数据

Question

我有一个数据表，它有两行。第一行直接来自数据库并呈现在 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));
            });

      });

这是控制台结果：

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}

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

Answer 1

您在单击保存按钮时再次调用.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));
        });

  });