从每个分页的DataTable中获取并保存元素信息

Question

我当前正在使用 sql 查询在页面加载时从数据库中检索信息。查询的结果是一个 php 数组 $data[]，它通过 DataTables 插件 (jquery) $('#table').DataTable() 传递以对结果进行分页，另一方面我调用save_codes()函数用于临时备份表中textarea元素的值，以便稍后用户可以撤消对这些值的更改。

    $(document).ready(function(){
    var id_query = '<?php echo $id_query; ?>';
    $.ajax({
                url: location.origin + '/program/functions.php',
                type: 'POST',
                data: { 
                    consultadatetable: id_query,
                },
                dataType: 'JSON',
                async: true,
                
                success: function(data){
                    var dataSrc = [];
                    $('#table').DataTable({
                        "data":  data.data,
                        "dom": '<"top"lif>rBt<"bottom"ilp><"clear">',
                        "lengthMenu": [[50,100,150,-1], [50,100,150,"All"]],
                        select: true
                    });
                    save_codes();
                }
    });
    });

    var textareas_list = [];

    function save_codes()
    {
        textareas_list = document.querySelectorAll(".code");
        textareas_list_size = textareas_list.length;
        
        for (var i = 0; i < textareas_list_size; i++) 
        {
            var id = textareas_list[i].id;
            var value = textareas_list[i].value;
            code_list.push({identificator: id, code: value});
        }
    }

首次加载页面时，此函数可以完美完成其工作，问题是当我使用 DataTables 分页功能移动到表的另一页时，save_codes() 函数无法更新code_list 中包含的信息，因为页面没有重新加载，并且该函数也没有再次调用。

有谁知道我如何在 DataTables 分页中推断以更新我的函数存储的信息，以便 它保存在 code_list 中的信息始终对应于每个活动分页的结果？

提前非常感谢您。

save_codes()函数临时存储的信息必须始终与表的活动分页结果相对应。

Answer 1

此问题的一个可能的解决方案是将

save_codes

更改如下：

    function save_codes()
    {
        let items = document.querySelectorAll(".code:not(.initialized)");
        if (items.length === 0) {
            return; //no new items
        }
        textareas_list = items;
        textareas_list_size = textareas_list.length;
        
        for (var i = 0; i < textareas_list_size; i++) 
        {
            textareas_list[i].classList.add("initialized");
            var id = textareas_list[i].id;
            var value = textareas_list[i].value;
            code_list.push({identificator: id, code: value});
        }
    }

在成功回调时，您可以执行以下操作，而不仅仅是

save_codes();

：

setTimeout(save_codes, 1000);

每秒运行

save_codes

。