jQuery Datatables - 无法从隐藏页面获取输入值

Posted 2023-05-09

【中文标题】jQuery Datatables - 无法从隐藏页面获取输入值

【英文标题】：jQuery Datatables - Can't get input value from hidden pages

【发布时间】：2019-04-13 04:02:36

【问题描述】：

我的 html 中有这个表格：

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Actual weight</th>
            <th>New weight</th>
        </tr>      
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>10</td>
            <td><input data-id=" object.id " type="number" name="input_new_weight" /></td>
        </tr>

        <tr>
            <td>1</td>
            <td>20</td>
            <td><input data-id=" object.id " type="number" name="input_new_weight" /></td>
        </tr>

        <!-- multiply by 10 the number of trs -->
    </tbody>
</table>

我在我的 javascript 中有这段代码来获取输入值：

var new_weights = []
$("input[name='input_new_weight']").each(function(index, element)

    if( $(this).val() != "" )
        var object_new_weight =
            id: $(this).data('id'),
            new_weight: $(this).val()
        
        new_weights.push(object_new_weight);
    

);
console.log(new_weights);

我正在使用 jQuery DataTables 插件来生成表格，并且可以进行过滤、分页、排序等操作。

在某些表格中，我有超过 10 个条目，因此分页在这里有效。在上面的示例中，它将是 2 页：1 和 2。

当我的 javascript 代码被执行时，它只会从可见的表格页面中获取输入值。隐藏页面的输入没有得到！

假设在第 1 页中，我将新的权重值设置为 35、75 和 80，在第 2 页中，我设置了 40、54、97。当我的 javascript 代码运行时，它只是从可见页面获取值.

请问，有人能告诉我为什么会这样吗？

【问题讨论】：

是的，这是真的。但我正在使用 jQuery DataTables。分页是在同一页面中进行的，没有重定向。

我没有使用过 JQuery 数据表，但是你在 DOM 中看到了什么？使用开发人员工具 (F12)，您应该可以看到有多少行数据是隐藏的。我怀疑这些行是根据内存中的数据逐页绘制的。所以 DOM 只有当前页面的输入字段。一个建议是读取页面更改的数据并存储它。然后处理来自存储而不是 DOM 本身的值。

使用 Datatables API 访问数据。对于过滤和分页，仅呈现关联的行...所有其他内容都存储在插件内的缓存中

明白了...所以我必须使用带有 table.cell().cache() 的 API 来尝试获取输入值？

【参考方案1】：

很简单，您知道 datatable 会即时生成表格，因此当您在第 1 页时，与第 2 页 (40, 54, 97) 对应的输入 根本不存在 .

所以我猜你已经把你的这段代码放到了全局中

$("input[name='input_new_weight']").each(function(index, element)
    //stuff
);

这只运行一次；当只有第 1 页的输入时，在初始加载页面时，您更需要的是能够在每次数据表重新呈现时运行您的代码。您可以使用一个挂钩 page.dt

把它放在初始化数据表的代码之后

$('#yourtable').on('page.dt', function()

    $("input[name='input_new_weight']").each(function(index, element)
        //stuff
    );

);