[英]How to add button to a JavaScript based Table with Data from PHP Database?
我想為這個基於 JavaScript 的表格的最后一列中的每個用戶添加一個“開始聊天”按鈕，數據從 PHP 數據庫中提取。 我不想使用<TR><TD>表模型，因為它不像這個模型那么有吸引力。 此外，該表還包含過濾器、排序和搜索選項。 這使更多功能更易於使用。已附上相同的照片...標題為“用戶列表”的是下面編寫的代碼的輸出。
<?php
session_start();
include("include/connection.php");
if(isset($_SESSION['Username1']))
{
//print_r($_SESSION['Username']);
}
else{
header("location:AdminSignIn.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type href="Images/favicon.ico">
<title>Admin Panel</title>
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/Admin.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/Admin.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<style>
</style>
</head>
<body>
<div class="navigation"> The Admin Panel </div>
<div class="split Sidebar" id="SB" style="color:#000000;">
<div class="sidebar_text" id="Connect">Connect</div>
</div>
<!--- Start Of Admin Connection --->
<div class="split Connect_Content" id="Connect_Cnt">
<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet">
<div class="container" style="width:100%;height:95%;margin:1%;">
<div class="col-md-12">
<div class="panel panel-success" style="background-color:#ffffff;color:#000000;font-size:20px;">
<div class="panel-heading" style="background-color:#000000;color:#ffffff;font-family:Monotype Corsiva; font-size:30px; font-weight:bold;">
User List
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table style="text-align:center;" id="table"
data-show-columns="true"
data-auto-refresh="true"
>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
var $table = $('#table');
$table.bootstrapTable({
url: 'include/UserConnectList.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 3,
columns: [{
field: 'TbID',
title: 'ID',
sortable: true,
},
{
field: 'TbUsername',
title: 'Username',
sortable: true,
},
{
field: 'TbAge',
title: 'Age',
sortable: true,
},
{
field: 'TbGender',
title: 'Gender',
sortable: true,
},
{
field: 'TbCountry',
title: 'Country',
sortable: true,
},
{
field: 'TbOnline',
title: 'Status',
sortable: true,
},
{
field: 'TbLogin',
title: 'Last Login Time',
sortable: true,
},
{
field: 'TbAccess',
title: 'Access',
sortable: true,
},
{
field: '<button type="submit" class="btn btn-info btn-xl start_chat"></button>',
title: 'Start Chat',
sortable: false,
},
],
});
$(function() {
var auto_refresh = setInterval(function () {
var t = Date.now();
$('#show').load('UserConnectList.php' + t);
}, 5);
});
</script>
</div>
<!--- End Of Admin Connection --->
</body>
</html>
<?php
/* UserConnectList.php*/
require 'connection.php';
$sqltran = mysqli_query($connection, "SELECT * FROM users ")or die(mysqli_error($connection));
$arrVal = array();
$i=1;
while ($rowList = mysqli_fetch_array($sqltran)) {
$name = array(
'TbID' => $i,
'TbUsername' => $rowList['Username'],
'TbGender' => $rowList['Gender'],
'TbAge' => $rowList['Age'],
'TbCountry' => $rowList['Country'],
'TbOnline' => $rowList['Online'],
'TbLogin' => $rowList['LoginDate'],
'TbAccess' => $rowList['Status'],
);
array_push($arrVal, $name);
$i++;
}
echo json_encode($arrVal);
mysqli_close($connection);
?>
使用render生成 HTML。 請注意，我在該行使用了反引號，以便可以將 ID 變量插入到data-id
{
field: 'TbID',
title: '',
render: value => `<button class="btn btn-info btn-xl start_chat" data-id="${value}">Start Chat</button>`
}
然后為您的按鈕創建一個偵聽器
$table.on('click', '.start_chat', function() {
const userId = this.getAttribute('data-id');
// function code here
}
JavaScript onClick，通過函數和按鈕從表（使用PHP從數據庫填充）中獲取數據（id）
[英]JavaScript onClick, getting data (id) from a table (populated from a database with PHP) through function and button
如何在 javascript 中添加按鈕，因為在 html 表中導入的數據來自 JSON 文件
[英]how to add button in javascript since the data that import in the html table is from JSON file
如何將表格數據從PHP傳遞到javascript，以html形式顯示它，點擊提交按鈕
[英]How to pass table data from PHP to javascript to display it in the html form onclick of a submit button
如何使用PHP在mysql數據庫中動態添加html表數據？
[英]How to add dynamically html table data in mysql database using PHP?
如何根據 Firebase 中的數據向按鈕添加條件（顏色、文本）
[英]How to add conditions ( colour, text) to button based on data from Firebase
如何使用javascript從數據庫向動態表添加不同的列
[英]How to add different columns to a dynamic table from database with javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.