I am trying to make a table that will display information on a page. I DO NOT want the text to wrap. I've done so much searching and I can't seem to fix it! I'm using bootstrap and I have no idea how to override whatever type of limit is happening here. Please help!
Image of webpage
HTML/PHP for webpage
<?php
function createTable(){
$maxDays=date('t'); //gets the number of days in a month
$currentDayOfMonth=date('j'); //gets the current day
$rows = 14; // define number of rows
$cols = $maxDays;// define number of columns
// loops through and creates the table
for($tr=1;$tr<=$rows;$tr++){
echo "<tr>";
for($td=1;$td<=$cols;$td++){
echo "<td class='tableCells'>654 kwh</td>";
}
echo "</tr>";
}
}
function writeDays(){
$lastDayUTS = mktime (0, 0, 0, date("m"), date('t'), date("Y"));
$lastDay = date("d", $lastDayUTS);
$monthName = date("M", $lastDayUTS);
//writes the days above the table
for($n=1;$n <= $lastDay;$n++){
echo "<th>$monthName $n</th>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<table class='table table-hover'>
<thead>
<!-- writes the days above the table -->
<?php writeDays(); ?>
</thead>
<tbody>
<?php
// loops through and puts values into the table
createTable();
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
The end goal is to have this embedded in a page and overflow the x axis so you can scroll horizontally. I want the text to all be on one line (not wrapped). Any help is greatly appreciated!!!
Related
Goal:
I am trying to make all the table bodies hidden.
When I click on the arrow button, the table body will be shown.
Issue:
I can't hide the table bodies from the beginning.
And only the last table hides his content when I click on the button.
_ I am using a loop to create dynamic id that's why my function get only the last id on the loop
Thank You.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
<link rel="stylesheet" href="css/dfirgo.css" integrity="" crossorigin="anonymous">
<meta charset="UTF-8">
<title>FRIGO</title>
</head>
<body>
<div class="container">
<div class="row">
<?php
include("php/connexion.php");
$rec = mysqli_query($conn, "SELECT * FROM espace");
echo" <div class=\"col\">";
$i=0;
while($row=mysqli_fetch_array($rec)) {
$i++;
echo"<table class=\"table\">
<thead class=\"thead-dark\">
<tr>
<th><img src=\"icones/neige.png\">ESPACE<button class='button12' value='tab".$i."' id='button12'onclick=\"myFunction()\"><img src=\"icones/élément1.png\" align=\"right\"></button></th>
</tr>
</thead>
<tbody>";
$_SESSION['case']='tab'.$i;echo"
<tr id='tab".$i."'>
<td >";
echo $row[1]."-".$row[2]."-".$row[3]."-".$row[4];
echo " </td>
</tr>
</tbody>
</table>";
} echo"</div>";
?>
</div>
<script>
function myFunction() {
var y = <?php echo json_encode($_SESSION['case']); ?>;
var x = document.getElementById(y);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>
So to understand, your problem is that you want to hide and show table bodies on click. Your listener is on your table header. There are several ways to do that. To go with your attempt just add a parameter to the onclick.
onclick="myFunction(this)"
Then you could just follow the hierarchy of your table to find your body element like this:
function myFunction(button) {
//th //thead //table //tbody
var x = button.parentNode.parentNode.parentNode.querySelector("tbody")
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
A different approach would be more understandable but I guess its fine. I also want to mention that toggling a class to the body would be better because then you don't have to worry about the initial display of the body which also could be flex or anything else. Something like...
.hide {
display: none;
}
if (x.classList.contains("hide")) {
x.classList.remove("hide")
} else {
x.classList.add("hide")
}
Another approach:
define a data-attribute on the button which contains the id of the body and use document.getElementById ( / )
with my small knowledge coding PHP I struggled about 4 days to make DataTable show exact entries what customer chose. Below is my code for getting data from Mysql DataBase
<?php
include("check.php");
include("config.php");
// Create connection
//$conn = new mysqli($servername, $username, $password, $dbname);
$sql = 'SELECT * from transaction';
if (mysqli_query($db, $sql)) {
echo "";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($db);
}
$count=0;
$result = mysqli_query($db, $sql);
?>
And here is my html for displaying Table which one must have pagination and customer could choose how much cells he want to see (ex: 10, 25, 50, 100)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>მთავარი გვერდი</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap core CSS-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- Custom fonts for this template-->
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet"><!-- Page level plugin CSS-->
<link href="css/sb-admin.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<?php include("template/navigbar.php"); ?>
<!-- Breadcrumbs-->
<?php include("template/breadc.php"); ?>
<!-- Icon Cards-->
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Data Table Example</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="myTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>თქვენი ID</th>
<th>თარიღი</th>
<th>ობიექტი</th>
<th>ტერმინალი</th>
<th>თანხა</th>
<th>ჯამი</th>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_assoc($result))
{
$count =$count + $row['amount'];
echo '
<tbody>
<tr>
<td>'.$row["trID"].'</td>
<td>'.$row['userID'].'</td>
<td>'.$row['trDate'].'</td>
<td>'.$row['obName'].'</td>
<td>'.$row['terName'].'</td>
<td>'.$row['amount'].'</td>
<td>'.$count.'</td>
</tr>
</tbody>
';
}
?>
</table>
</div>
</body>
</html>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
});
</script>
But the result is always full Table with Showing 1 to 1 of 1 entries but in the table it shows me more then 25 cell.See Screenshot attached
Please let me know what I m doing wrong?
I posted this as an answer because it solves the issue.
<tbody> must be outside of loop
Put your tbody tags outside of while statement.
I Hope this code will help you
'aLengthMenu': [[50, 100, 150, -1], [50, 100, 150, "All"]],
'iDisplayLength': '50'
You have to add the tbody BEFORE start the loop.
In your code, you are creating a new tbody for each row instead just a row.
Dont forget to close the tbody after the php close tag
tbody must be out site of the loop
Please help,
I have problem with a data table. The data table does not work when I use this but it's working when it's outside of this. Please help:
<div id="content">
<?php
$pages_dir = 'pages/admin';
if(!empty($_GET['p'])){
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p = $_GET['p'];
if(in_array($p.'.php', $pages)){
include($pages_dir.'/'.$p.'.php');
}
else {
echo 'Page Not Found :(';
}
}
else {include($pages_dir.'/profile.php');}
?>
</div>
Then the other full script page, in this page data table is not working, but when I try this outside code before, it works.
<?php
$connect = mysqli_connect("localhost", "root", "", "keep");
$query ="SELECT * FROM barang ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Datatables Jquery Plugin with Php MySql and Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Datatables Jquery Plugin with Php MySql and Bootstrap</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>ID</td>
<td>Nama</td>
<td>Kategori</td>
<td>Harga</td>
<td>Jumlah</td>
<td>Supplier</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["nama"].'</td>
<td>'.$row["kategori"].'</td>
<td>'.$row["harga"].'</td>
<td>'.$row["jumlah"].'</td>
<td>'.$row["supplier"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
</script>
Please help, I'm new to PHP programming. Sorry for the bad English.
I have this code, which checks a database and returns some rows to my PHP code containing 4 values (id, playerA, playerB, turn, all INT).
I would like to use that array to build up a table and then append the table to a specific location in the DOM, but i dont know how i could do that.
I could do it another way (get the rows via JS Ajax and then use JS to build and append the table), which i know how, but i dont want to do that.
Is it possible to create a table and append it to a div using php/html/css ?
thanks
<?php
if (isset($_SESSION["userid"])){
$dbManager = DBManager::app();
$manager = new Manager($_SESSION["userid"]);
$gameList = $manager->getGames();
if ($gameList) {
Debug::log("got active games: ".sizeof($gameList);
}
else {
Debug::log("no games");
}
}
else {
Debug::log("no user id");
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="jquery-2.1.1.min.js"></script>
<script src='script.js'></script>
<script src='ajax.js'></script>
</head>
<body>
<input type="button" value="createGame" onclick="createGame()">
<divid="gameListDiv">
<div>LOGOUT</div>
</body>
</html>
EDIT
<?php
$table = "";
if ($gameList) {
foreach ($gameList as $game){
$table += "<tr>";
$table += "<td>";
$table += $game["name"];
$table += "</td>";
$table += "</tr>";
}
$table += "</table>";
}
?>
<body>
<input type="form" id="gameName" placeholder="Enter Game Name here"></input>
<input type="button" value="createGame" onclick="createGame()"></input>
<div>
<span>Active Games</span>
<?php echo $table; ?>
</div>
<div>LOGOUT</div>
</body>
You need to understand that the DOM does not yet exist - it is created by the browser, and the browser builds it based on the output of your combined PHP & HTML.
There are many ways to solve this problem without resorting to Ajax calls etc.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="jquery-2.1.1.min.js"></script>
<script src='script.js'></script>
<script src='ajax.js'></script>
</head>
<body>
<input type="button" value="createGame" onclick="createGame()">
<div id="gameListDiv">
<?php
if (isset($_SESSION["userid"])){
$dbManager = DBManager::app();
$manager = new Manager($_SESSION["userid"]);
$gameList = $manager->getGames();
if ($gameList) {
Debug::log("got active games: ".sizeof($gameList);
echo '<table style="width:100%">';
//assuming we can iterate over the $gameList value
foreach($gameList as &$game)
{
//here i assume that the result returned is an object with these properties - it might be the case that you need to do something like $game['playerA'] or $game->getData('playerA') - i am not sure what database lib you are using.
echo '<tr>
<td>'.$game->playerA.'</td>
<td>'.$game->playerB.'</td>
<td>'.$game->turn.'</td>
</tr>';
}
echo '</table>';
}
else {
Debug::log("no games");
}
}
else {
Debug::log("no user id");
}
?>
</div>
<div>LOGOUT</div>
</body>
</html>
In this example we are just running the PHP in-line with the HTML.
You could also do something like this if you wanted to keep all of your database logic at the top of the page and not in-line with the HTML:
<?php
/* Database logic here */
$variable = '<span>this variable could contain any old html that came from the database logic</span>';
?>
<html>
<head>
</head>
<body>
<php echo $variable; ?>
</body>
</html>
If you want to build the list before page load, you can just insert something like this where you want the table to go:
<table>
<?php foreach($gamelist as $game){ ?>
<tr>
<td><?=$game.id></td>
<td><?=$game.playerA></td>
<td><?=$game.playerB></td>
<td><?=$game.turn></td>
</tr>
<? } ?>
</table>
This will work because with PHP, the page hasn't been built and displayed to the user yet when you've got your data in $gamelist. All of your PHP code will be run before the page is actually sent to the user--which means you don't need to "update" the page later, you can just build it now.
If you're looking to collect or update your data after page load (it's unclear from your comments), this is impossible with only PHP as it's a server-side language. You would need to either reload the page or use AJAX for that.
Good morning everyone!
I've got a question, I am not sure which language I should really be using. I'm assuming javascript since the slideshow is javascript.
I need to create a slideshow where a user can change the time in between slides. There are about 100 slides and they want to be able to set the timing in between each individually.
I've put all the pics on the server and created a db with the links to them and the slideshow works just fine, except I can't seem to figure out a way to make the timeout have different values. Any help is greatly appreciated.
Here's the code:
<?php include_once 'includes/db_connect.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Weather Show</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="responsiveslides.css">
<link rel="stylesheet" href="demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var strcount
var x = new Date()
document.getElementById('ct').innerHTML = x;
tt=display_c();
}
</script>
<?php
echo "<script>
$(function () {
$('#slider1').responsiveSlides({
maxwidth: 1080,
speed: 1000,
timeout: 5000
});
});
</script>";
echo "</head>
<body style='background-color: #000;' onload=display_ct();>
<div id='wrapper'>";
$result = mysqli_query($mysqli,"SELECT * FROM weather WHERE status = '1'");
?>
<!-- Slideshow 1 -->
<ul class="rslides" id="slider1">
<?php while($row = mysqli_fetch_array($result))
{
echo "<li><img src='"; echo $row['link']; echo "' alt='"; echo $row['link']; echo "'></li>";
}
?>
</ul>
</div><!-- end wrapper -->
<div style=" margin-top:-30px; ">
<span id='ct' style="font-weight:bold; font-size:36px; color:#FFF; margin-left:30px;"></span>
</div>
</body>
</html>
I was going to use PHP variables for the time, that's why I'm just echo(ing) the javascript. That did not work too well for me. So if anyone knows how to do this and wants to let me know, it would be amazing! Thank you!
You can do all of this at the javascript side if you put the refresh and mytime variable more global.
Keep track of your mytime-variable (from display_c()). Add your edit box and whatever event you need to track that a new interval was specified.
As soon as that event is triggered you call clearTimeout(mytime); to stop the time, update the refresh variable with the new value and call display_c() again to start the process anew:
<?php
$refresh = 1000; // Current value from database
echo <<<JAVAVSCRIPT
<script>
$(function () {
$('#slider1').responsiveSlides({
maxwidth: 1080,
speed: $refresh,
timeout: 5000
});
});
$('#speed-input-id').change(function(e) {
refresh = parseInt($(this).val());
$.ajax('/updateTheDatbaseTimeoutValueUrl', {data: {refresh: refresh}});
// I can't help you on reconfiguring the plugin, too little information
updateTheResponsiveSlidesTimeout(refresh);
e.preventDefault();
});
});