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

Question

我正在尝试使用 DataTables 并尝试看看是否可以将其实现到我的网站上。

我尝试搜索 DataTables 和 Stack Overflow 论坛以及谷歌搜索，但还没有找到任何可以回答我的问题的内容。可能我在某处读过它，但我希望有人能帮助我。

案件

• 大量表行，每个表行有 10 个输入 (tr)
• 我需要什么：获取每行（可见或不可见）的所有输入值以及可能为该行设置的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 );
} );

在这里，我们迭代DataTable 中的每一行，无论该行是否位于当前显示的页面上。这意味着我们访问 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 行索引。当数据排序时，该索引值不会改变。

有关详细信息，请参阅选择器修饰符。