I want to add a "Start Chat" button for every individual user in the last column to this JavaScript based table with data fetched from PHP database. I don't wish to use <TR><TD> table model cause its not attractive as this one. Also this one has a filter, sorting and search option included in the table. Which makes easier usability with more functions.Have Attached photos for the same...
the one with heading "User List" is the output of code written below.
<?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);
?>
