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

Question

我的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代码运行时，它只是从可见页中获取值。

拜托，有人可以告诉我为什么会这样吗？

Answer 1

您知道数据表是动态生成表的，这非常简单，因此，当您在第1页上时，页面上根本没有对应于第2页的输入（40、54、97）。

所以我想你已经把这个代码发布到了全球

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

这只运行一次； 当只有页面1的输入在那里时，在页面的初始加载时，您宁愿需要的是能够每次重新运行datatable时重新运行代码。您可以使用page.dt

将其放在初始化数据表的代码之后

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

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

});