html - 获取所有行的数据并提取输入值，td.data() 属性的 to.data()

Question

我正在尝试使用 DataTables 并尝试查看是否可以在我的网站上实现它。
我试过搜索 DataTables 和 Stack Overflow 论坛和谷歌搜索，但还没有找到任何可以回答我的问题的内容。可能我在某处读过它，但我希望有人能帮助我。
案件

每个表行 (tr) 上有 10 个输入的大量或表行

我需要的是:使用 tr.data() 获取每一行(可见或不可见)的所有输入值和/或 td.data()可能为该行设置。

现在我正在使用这个:

$('#example').DataTable().rows().data().toArray()

并为每一行获取此信息:

["<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">"]

a) 我没有看到附加到该行的 data() 属性，如何获取它？
b) 我怎样才能获得例如第 0 行的值，第一个输入？在 jQuery 中，我会使用 $('tr').first().find('input').val()或者给它一个 id 但我怎么能用 DataTables 输出做类似的事情？看看上面的输出给了我什么，我还不知道如何做到这一点。 (因此对于所有行，不仅是可见行)
并非每一行都在 DOM 中，因此必须有一个对象或其他东西来保存所有表行，我可以从中提取每个表行上每个输入的值并获取它们的 data() 属性。

Answer 1

您提到您熟悉诸如 jQuery 的 $('tr').first().find('input').val() 之类的方法。 .
要使用类似的东西，您可以使用以下内容:

table.rows().every( function ( rowIdx ) {
  var firstVal = $( this.node() ).first().find('input').val();
  console.log( 'Row ' + (rowIdx+1)  + ' first value: ' + firstVal );
} );

在这里，我们 iterate over every row在 DataTable 中，无论该行是否在当前显示的页面上。这意味着我们访问数据表中的数据，但可能不会显示在 DOM 中。
我们使用 row().node() 得到一个节点对象然后在 jQuery 选择器中使用它。
我的测试表:

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" value="X"></td>
                <td><input type="text" value="Y"></td>
                <td><input type="text" value="Z"></td>
            </tr>
            <tr>
                <td><input type="text" value="D"></td>
                <td><input type="text" value="E"></td>
                <td><input type="text" value="F"></td>
            </tr>
            <tr>
                <td><input type="text" value="P"></td>
                <td><input type="text" value="Q"></td>
                <td><input type="text" value="R"></td>
            </tr>
        </tbody>
    </table>

我的数据表:

var table = $('#example').DataTable( {
  "lengthMenu": [ 2 ] // just to force 2 pages of data
} );

控制台输出:

Row 1 first value: X
Row 2 first value: D
Row 3 first value: P

您显然可以改进这一点以使用 jQuery 来处理每个节点中的每个字段——而不仅仅是第一个字段。

行迭代的顺序基于当前的显示顺序(即考虑排序)。
您还可以根据数据的原始加载顺序迭代数据:

table.rows( {order: 'index'} ).every( ... );

这会导致使用内部分配的 DataTables 行索引。当数据被排序时，这个索引值不会改变。
见 selector modifiers详情。