簡體   English   中英

數據表 Jquery Bootstrap 5 在行中創建動態下拉列表並將數據發布到 php 文件

[英]Datatables Jquery Bootstrap 5 Create dynamic dropdown in row and post data to php file

我正在使用 Datatables,我正在嘗試使用 Php/Sql 從數據庫中獲取用戶詳細信息,並創建一個 bootstrap 5 下拉列表以將員工顯示為選項。 到目前為止一切順利,下拉菜單顯示的是員工。 用戶然后選擇一名員工來完成任務,我使用 jquery 將其發布到 php 文件中。

我的問題,從下拉列表中取出的員工ID value從我的PHP文件被存儲在變量EmployeeId和從數據表正在添加的數據存儲在名稱屬性附加傷害,並命名為客戶端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?

謝謝你把我放在正確的方向。 當我像這樣更改腳本時,它正在工作。 只是獲取數據表數據值作為 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>';
                } } ,  

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM