[英]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.