以模式更新数据表（ajax javascript）

Question

我有一个包含从另一个主数据表调用的数据表的模态，为了提升模态，我使用它们各自的验证执行以下函数

   var getDataDiseases = function (tbody, table)
    {
        $(tbody).on("click", "button.disease-button", function ()
        {
            var data = table.row($(this).parents("tr")).data();
           
            var id = data.id;
            var fullName = data.fullName;

            if (id != null)
            {
                GetDiseases(id, fullName);
            }
            else
            {
                toastr.error('Ha ocurrido un problema, intente más tarde', "Error");
            }
        });
    }    

    getDataDiseases("#TableUsers tbody", table); 


 function GetDiseases(id, fullName)
    {  
        $.ajax({
            type: "POST",
            url: "/DiseaseTypes/GetDiseasesByUser",
            data: { id: id },
            success: function (response)
            {
                ReloadDataTableModal(response);       

                var nombreUser = document.getElementById('title-strong-diseases');
                nombreUser.innerHTML = fullName

                $("#diseases-modal").modal();
            },
            error: function (xhr, status, error)
            {
                console.log("error");
                toastr.error(error, "Error");
            }
        });     
     
    }

在 getDiseases 函数中，如果 ajax 调用返回成功，则加载或重新加载数据表以及通过另一个名为 ReloadDataTableModal 的函数回答的信息，该函数将信息作为参数接收

   function ReloadDataTableModal(response)
    {
        //Se destrute el Dt
        $('#TableDiseasesUser').DataTable().clear();
        $('#TableDiseasesUser').DataTable().destroy();

        var tableModal = $('#TableDiseasesUser').DataTable({          
            "processing": true,
            "responsive": true,
            "destroy": true,
            data: response,
            "columns": [
                { "data": "diseaseId", "autoWidth": true },
                { "data": "diseaseName", "autoWidth": true },
                { "data": "diseasedStatus", render: getToggleSwitch },

            ],
            fixedColumns: {
                heightMatch: 'none'
            },
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
            },
            "aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "Todos"]
            ]
        });

        var getDataDiseasesByUser = function (tbody, tableModal)
        {
            $(tbody).on("click", "input.toggle-disease", function ()
            { 
                var data = tableModal.row($(this).parents("tr")).data();

                console.log($(this));
                console.log(data);

                ActionAddDiseaseToUser(data);
            });
        }

        getDataDiseasesByUser("#TableDiseasesUser tbody", tableModal);

    }

在同一个函数中，我还加载了开关打开或关闭时的“点击”监听事件，从而更新数据表

出现的问题是开关只在第一次执行时起作用，当第二次执行时，在箭头标记的行中找不到数据，因此该变量的值为 undefined

为此，我打印调用模式按钮的行的每个“TR”的值

ActionAddDiseaseToUser 方法的作用是更新数据库中的列并返回新的 Json（通过后端）以再次填充（更新）模态的数据表

  function ActionAddDiseaseToUser(data)
    {
        var userDiseaseObject = {};

        userDiseaseObject.userId = data.userId;
        userDiseaseObject.firstName = data.firstName;
        userDiseaseObject.lastName = data.lastName;
        userDiseaseObject.diseaseId = data.diseaseId;
        userDiseaseObject.diseaseName = data.diseaseName;
        userDiseaseObject.diseasedStatus = data.diseasedStatus;        

        $.ajax({
            type: "POST",
            url: "/Users/AddDiseaseToUser",
            data: JSON.stringify(userDiseaseObject),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response)
            {
                if (response)
                {                   
                    ReloadDataTableModal(response);

                    toastr.success('Se ha actualizado la enfermedad ' + data.diseaseName + ' al usuario ' + data.firstName + ' ' + data.lastName, "Guardado");                
                }
            },
            error: function (xhr, status, error)
            {
                toastr.error(error, "Error");
            }
        });
    }

发生了什么事？为什么我的逻辑只在开关第一次激活或停用时才起作用？为什么我第二次点击开关，却找不到对应行的数据？我已经销毁并清理了数据表，但它并没有解决问题……对我有什么帮助吗？

当前行为：

Answer 1

在您的模式中，定义一个带有 ID、<thead> 和空的 <tbody> 的表。

<table id="TableDiseasesUser" style="width: 100%;">
    <thead>
        <tr>
            <th>Disease ID</th>
            <th>Disease Name</th>
            <th>Disease Status</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

在您的 JavaScript 中，定义您的 DataTable 并将其分配给一个变量。因为您使用的是 POST，所以 ajax 属性需要是一个对象：

const tableModal = $('#TableDiseasesUser').DataTable({          
    "processing": true,
    "responsive": true,
    "ajax": {
        method: "POST",
        url: "/DiseaseTypes/GetDiseasesByUser",
        data: { id: '' }
    }
    "columns": [
        { "data": "diseaseId", "autoWidth": true },
        { "data": "diseaseName", "autoWidth": true },
        { "data": "diseasedStatus", render: getToggleSwitch },
    ],
    fixedColumns: {
        heightMatch: 'none'
    },
    "language": {
        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
    },
    "aLengthMenu": [
        [25, 50, 100, 200, -1],
        [25, 50, 100, 200, "Todos"]
    ]
});

在您的服务器端代码中，以 JSON 格式返回您的数据。你没有给我看所以我不知道你用的是哪种语言，但我用的是 PHP

$data = getMyData(); // returns an array
echo json_encode(["data" => $data]); // echo an object with property "data" that has value the $data array

然后，当您想要（重新）填充您的表格时，您可以设置 ajax.data 属性并调用它的 reload() 函数

function ReloadDataTableModal(newID) {
    tableModal.ajax.data = { id: newID };
    tableModal.ajax.reload();
}

对于你的点击事件，参考你之前定义的表变量

tableModal.on('click', 'input.toggle-disease', function() {
    const data = tableModal.row($(this).closest('tr')).data();
}

就是这样。无需致电destroy() 或任何其他方式。