Datatables Jquery Bootstrap 5在行中创建动态下拉列表并将数据发布到php文件

Posted 2023-05-08

【中文标题】Datatables Jquery Bootstrap 5在行中创建动态下拉列表并将数据发布到php文件

【英文标题】：Datatables Jquery Bootstrap 5 Create dynamic dropdown in row and post data to php file

【发布时间】：2021-12-16 14:06:39

【问题描述】：

我正在使用 Datatables，我正在尝试使用 php/Sql 从数据库中获取用户详细信息，并创建一个 bootstrap 5 下拉菜单以将员工显示为选项。到目前为止一切顺利，下拉列表显示了员工。用户然后选择一个员工来完成任务，我使用 jquery 将其发布到 php 文件中。

我的问题，从我的 php 文件中提取的下拉列表中的员工 ID 为 value 存储在变量 EmployeeId 中，来自 Datatables 数据的客户端 ID 存储在名称属性中并命名为 @ 987654324@。它们都存在于 html 中。不，我希望将两者都发布到我的更新 php，但只有 EmployeeId 发布到我的服务器。

我的问题。基于以下代码（我是编码新手，我不知道如何在 snipchat 或其他东西中重现我需要的东西，对不起各位）。如何将数据表行名称属性中的ClientId 与 php 中提取的下拉列表中的我的名称属性一起发布？

获取下拉结果的php：

$stmt8 = $mysqli->prepare("SELECT naam,id FROM gebruikers WHERE group_name = ? GROUP BY naam");
$stmt8->bind_param("s",$groupname);
$stmt8->execute();
$result = $stmt8->get_result(); 


// Build the options
while ($row = $result->fetch_array()) 
    
    $options .= '<li><button value= "' . $row["id"] . '" aria-label="ChangeEmployee" class="dropdown-item ChangeEmployee" type="button"><i class="fas fa-user-tie styleicon"></i>' . $row["naam"] . '</button></li>';



echo $options;

显示选项的脚本和数据表部分：

  $.ajax(  // New ajax
    url: './PlanningSelectUserRealtime.php',
    method: 'GET',
    dataType: 'text',
    success:function(data)
    
      ChangeEmployee = data;
    
    ,
    error:function(xhr, status, err)
    
      console.log('PlanningSelectUserRealtime.php error ' + err);
    
  );

//数据表部分

data: 'resposible_client',
            render: function ( data, type, row, meta ) 
            return ' <div class="intplan_menudropdown dropdown" ><span>'+data+' </span><span aria-label="ChangeEmployeeResponsible" id="dropdownMenu' + row.client_id + '" data-bs-toggle="dropdown" aria-expanded="false" class="badge bg-secondary" name="' + row.client_id + '"><i class="fas fa-exchange-alt"></i></span><ul class="dropdown-menu" aria-labelledby="dropdownMenu' + row.client_id + '" >' + ChangeEmployee + '</ul></div>';
              ,

将详细信息发布到我的更新 php 以及我需要这两个变量的位置的脚本。

 $(document).ready(function()
     var table = $('#planningTable').DataTable();
     
     $("#planningTable").on("click", ".ChangeEmployee", function () 
        
     var EmployeeId = $(this).val();
var ClientId = $(this).attr('name');
 bootbox.confirm(
    title: "Administratie Bijgewerkt?",
    message: "Weet je zeker dat deze medewerker deze administratie gaat bijwerken?",
    buttons: 
        cancel: 
            label: '<i class="fa fa-times"></i> Nee, niet aanpassen'
        ,
        confirm: 
            label: '<i class="fa fa-check"></i> Ja, aanpassen'
        
    ,
    callback: function (result) 
    
        var p = loadPrompt();
        if(result === false)
  
        p.inform('Medewerker is niet aangepast'); 
        
        else 
        $.ajax(
        type: "POST",
        url: "RealtimeUpdateEmployee.php",
        data: ClientId: ClientId,EmployeeId,EmployeeId,
        success: function(data) 
        $.ajax(  
                     url:"../oomkb_menu/oomkb_index_menu.php",  
                     method:"POST",  
                    data: refreshdata: refreshdata, 
                     dataType : 'json', 
                    
                     success:function(data)  
                      if (data.code == "200")
    $('#planningTable').DataTable().ajax.reload();
        p.success('Medewerker is aangepast');
        $(".CountQ").html(""+data.msg+"");
                    $(".CountQP").html(""+data.msg2+"");
                    $(".CountM").html(""+data.msg3+"");
                    $(".CountMP").html(""+data.msg4+"");
                    $(".CountReal").html(""+data.msg5+"");
                    $(".CountRealP").html(""+data.msg6+""); 
                        
                      
                
                );     
        ,
        error: function(xhr, status, error) 
         if(xhr.status&&xhr.status==401)
       p.error('De Sessie is verbroken. Log opnieuw in en probeer opnieuw.'); 
        setTimeout(window.location.reload.bind(window.location), 4000);
else
alert("Er is iets onbekends misgegaan. Probeer later nogmaals."); 
                
    );

     
);
  );
);

我希望这里有人可以帮助我，我尝试将名称部分放在很多地方，但我认为它不会起作用，因为我点击的员工是用 ID 的名称属性表示的。但是无论选择什么用户，行 ID 和客户端 ID 都是一样的。那么如何将该 ID 存储到变量中以发布到我的更新 php？

【问题讨论】：

你不应该在span 之类的任意元素上添加name 属性，这是表单字段（和锚点）的属性，你实际上没有这些属性这里。使用额外的自定义数据属性。如果你把它放在ul 开始，它会更容易。然后，您只需从单击的按钮导航到该父元素 (api.jquery.com/parents) 并读取属性值；如果你把它留在跨度上，那么你必须先到 div 父级，然后在那里找到跨度。

感谢您的反应。附加自定义数据属性是什么意思？你有如何做到这一点的例子吗？

【参考方案1】：

感谢您为我指明了正确的方向。当我像这样更改脚本时它正在工作。只是获取数据表数据值作为 id。

  $("#planningTable").on("click", ".ChangeEmployee", function () 
    var dataTable = $('#planningTable').DataTable();
    const rowData = dataTable.row($(this).closest('tr')).data();
    var ClientId = rowData.client_id;
    var EmployeeId = $(this).val();

    data: 'resposible_client',
     render: function ( data, type, row, meta ) 
       return ' <div class="intplan_menudropdown dropdown" ><span>'+data+' </span><span aria-label="editdetails" id="dropdownMenu' + row.client_id + '" data-bs-toggle="dropdown" aria-expanded="false" class="badge bg-secondary" ><i class="fas fa-exchange-alt"></i></span><ul class="dropdown-menu" data-clientid="' + row.client_id + '" aria-labelledby="dropdownMenu' + row.client_id + '" >' + ChangeEmployee + '</ul></div>';
      
   ,