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

Posted 2023-05-09

【中文标题】以模式更新数据表（ajax javascript）

【英文标题】：Update datatable in a modal (ajax javascript)

【发布时间】：2021-12-31 13:20:01

【问题描述】：

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

   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");
            
        );
    

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

当前行为：

【问题讨论】：

不用jQuery Ajax，使用DataTables自带的Ajax功能，简单多了。 datatables.net/manual/ajax

它到底暗示了什么？使用ajax 以另一种方式填充dt？还是占用一些额外的参数？你能补充你的答案吗？ @mark_b

【参考方案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() 或任何其他方式。

【讨论】：

您的解决方案在处理同一个模态时可以正常工作，但是当转到一般列表并提出另一个不同的模态时，我不断收到错误，我已经在我附加的当前行为部分中更新了我的问题代码结果的 gif 图像

@CristofherAmbiado dataModal 是什么？我在您的代码中的任何地方都看不到它被引用。

tableModal.on('click', 'input.toggle-disease', function () var dataModal = tableModal.row($(this).closest('tr')).data(); ActionAddDiseaseToUser(dataModal, tableModal); ); 我已经更改了变量的名称，认为其中有问题，但是您可以看到它基本上是相同的代码，发生了什么？这让我保持清醒！ @mark_b