时间戳

首页 > 解决方案 > Datatables Jquery Bootstrap 5在行中创建动态下拉列表并将数据发布到php文件

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

问题描述

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

我的问题是，从我的 php 文件中提取的下拉列表中的员工 IDvalue存储在变量中EmployeeId，来自 Datatables 数据的客户端 ID 存储在名称属性中并命名为ClientId. 它们都存在于 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？

标签： javascriptphpjquerydatatables

解决方案

感谢您让我朝着正确的方向前进。当我像这样更改脚本时它正在工作。只需将数据表数据值作为 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>';
     } 
  } ,

推荐阅读