Question

我在我的应用程序中使用DataTable.js版本1.10.7。我的目的是获取一个在启动后添加到表中的行数据数组。我已按照本文档中的修改版步骤进行操作 - https://datatables.net/reference/api/rows().data()

<!-- this form is filled and form values are added the datatable on submission-->
<div class="col-md-4">
    <form action="../api/MaterialInPurchaseOrders/Create" id="create-material-in-purchaseOrder" method="POST">
        <div id="name-group" class="form-group">
            <label for="name">Material Name</label>
            <select name="MaterialId" class="form-control" id="MaterialList"></select>
            <br />
            <label for="email">Quantity</label>
            <input type="number" class="form-control" name="Quantity" placeholder="eg :- 100">

            <label for="email">Quantity</label>
            <input type="number" class="form-control" name="Cost" placeholder="eg :- 100">
        </div>
        <button type="submit" class="btn btn-default">Add Material to P/O<span class="fa fa-arrow-right"></span></button>
    </form>
</div>

<!-- this table stores the rows that is being added from the form-->
<div class="col-md-8">
    <table id="materials-in-purchase-order" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Material Id</th>
                <th>Material Name</th>
                <th>Quantity</th>
                <th>Unit Cost</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <th>Material Id</th>
                <th>Material Name</th>
                <th>Quantity</th>
                <th>Unit Cost</th>
            </tr>
        </tfoot>
    </table>
</div>

<button class="btn btn-success" id="get-table-data">Get Table Row Data</button>


<script>

    // the Datatable handler
    var materialsInPurchaseOrder = $("#materials-in-purchase-order").DataTable({
        "dataSrc": "data",
        "columns": [
            { "data": "MaterialId" },
            { "data": "MaterialName" },
            { "data": "Quantity" },
            { "data": "Cost" }
        ]
    });

    $(document).ready(function () {
        // loading list boxes from database to an input selection list box in the form
        loadListBox("../api/Materials/GetMaterials", "#MaterialList", "MaterialId", "MaterialName");

        // on submission of the form the form values gets updated to the Datatable as a row.
        $("#create-material-in-purchaseOrder").on("submit", function (event) {
            var data = {};
            data = getFormValues("#create-material-in-purchaseOrder");
            $("#MaterialList option:selected").each(function () {
                data["MaterialName"] = $(this).html();
            });;

            materialsInPurchaseOrder.row.add(data).draw(false);
            event.preventDefault();
        });


        $("#get-table-data").click(function (event) {
            var materials = materialsInPurchaseOrder.rows().data();
            console.log(materials);

            // looping through each row of the array and doing something
            for (var material in materials) {
                // unable to do this because materials is not an array :(
            }
            event.preventDefault();
        });
    });

</script>

我得到了console.log（）而不是数组

的以下输出

[Object，context：Array [1]，selector：Object，ajax：Object]

我做过一些研究， jQuery DataTables - Access all rows data

How can I get an Array of DataTable row data.?

Answer 1

根据rows().data()的文档返回类型为DataTables.Api。在使用console.log进行打印之前，首先使用JSON.stringify()将其转换为字符串。因为DataTables.Api是一个对象。

例：

console.log('Materials',JSON.stringify(materials));

根据DataTables.Api类型The API object is array-like

的文档

您可以按行索引访问数据，如下所示，

materials[0]

返回第一行的数据。

Answer 2

在@Dushan的回答的帮助下解决了这个问题。这个答案演示了如何更改实际代码。

我替换了这段代码

for (var material in materials) {
// unable to do this because materials is not an array :(
}

使用此代码

// looping through each row until the last row
for (var i=0 ; i < materials.length ; i++) {
console.log(materials[i]);
}

我在@Dushan的答案中唯一添加的是for循环，循环遍历DataTables.Api中数据对象的对象，以演示DataTables.Api对象的使用。

总结@Dushan在文档中指出的内容，rows（）。data（）方法的返回类型是DataTables.Api对象，而不是Array。这是一个类似于对象的数组，其长度等于DataTable实例中的行数。

rows（）。data（）函数未返回Array

2 个答案: