javascript - rows().data() 函数不返回数组

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() 的输出而不是数组

[对象，上下文:数组[1]，选择器:对象，ajax:对象]

我做了一些研究， 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 的文档type API 对象类似于数组

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

materials[0]

这将返回第一行的数据。