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

Question

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

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

个案

大量或 table 行，每 table 行有 10 个输入 (tr)
我需要的是：使用可能为该行设置的 tr.data() and/or 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 中，因此必须有一个对象或其他东西保存所有 table 行，我可以从中提取每个 table 行上每个输入的值并获取它们的 data() 属性。

Answer 1

您可以使用 children()。这必须是 return tr 的所有 td。

如果您需要更多帮助，请为您的代码提供更多信息

Answer 2

您提到您熟悉 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:

    <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。

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

Get data of all rows and extract input values, tr.data() of td.data() attritubes

html

jquery

datatables