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

Это действительно просто, вы знаете, datatable генерирует таблицу на лету, поэтому, когда вы находитесь на странице 1, входные данные, соответствующие странице 2 (40, 54, 97) , вообще отсутствуют на странице.

Так что я предполагаю, что вы поместили этот код в глобальный

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

Это выполняется только один раз; при начальной загрузке вашей страницы, когда есть входные данные только со страницы 1, вам скорее всего нужно иметь возможность запускать ваш код каждый раз при визуализации данных с датой. Есть ловушка, которую вы можете использовать page.dt

Поставьте это после кода, где вы инициализируете datatable

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

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

});