Question

我有一个包含两行的数据表。第一行直接在数据库中构成，并在UI上呈现。第二行是通过javascript中的addRow方法添加的。请查看下面的代码：

这是html源中的表格行：

这是访问行的代码：

cterm

这是控制台结果：

 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));
            });

      });

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

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));
        });

  });

数据表在行中显示空数据

1 个答案: