Increasing number of columns fails datatable in php - php

im having table reading values from database using PDO and display it in table,Then finally i used Datatable javascript code.Now my table having pagination,searching option.
But now i want to include one more column as 'Action' to do edit, delete fucntion.When i include these fifth column as Action. Then my table appears as normal..not as datatable format (pagination,searching option is not there). My coding below:
<?php
include("config.php");
include("header.php");
try {
$sql = "SELECT * FROM auditplan";
$stmt = $DB->prepare($sql);
$stmt->execute();
$result = $stmt->fetchAll();
} catch (Exception $ex) {
echo $ex->getMessage();
}
?>
<link rel="stylesheet" href="<?=BASE_URL?>/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="<?=BASE_URL?>/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<?=BASE_URL?>js/jquery2.0.2.min.js"></script>
<script type="text/javascript" src="<?=BASE_URL?>js/jquery.dataTables.js"></script>
<script type="text/javascript" src="<?=BASE_URL?>js/jquery.dataTables.min.js"></script>
<link href="<?=BASE_URL?>themecss/datatables/dataTables.bootstrap.css" rel="stylesheet">
<script src="<?=BASE_URL?>themejs/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="<?=BASE_URL?>themejs/jquery-ui-1.10.3.js"></script>
<script src="<?=BASE_URL?>themejs/jquery-ui-1.10.3.min.js"></script>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header"> Audit Plan </h1>
<a href="Auditplanentry.php" class="btn btn-primary" >Add New</a>
<table class="table table-striped" id="auditplantbl">
<thead>
<tr>
<th>Audit ID</th>
<th>Year</th>
<th>Month</th>
<th>Status</th>
<th>Comments</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
foreach($result as $row){ ?>
<tr>
<td><?php echo $row['auditid']?></td>
<td><?php echo $row['year'] ?></td>
<td><?php echo $row['month'] ?></td>
<td><?php echo $row['status']?></td>
<td><?php echo $row['comment']?></td>
</tr>
<?php }
?>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#auditplantbl').dataTable({
"bLengthChange": false,
});
});
</script>

You have 6 columns in your table header but only 5 in your body, you need to match the same number of columns in your header and body for datatable to work fine.
You need to add one in the body to add the buttons or whatever you were planning to do to delete or edit your items :
<?php
foreach($result as $row){ ?>
<tr>
<td><?php echo $row['auditid']?></td>
<td><?php echo $row['year'] ?></td>
<td><?php echo $row['month'] ?></td>
<td><?php echo $row['status']?></td>
<td><?php echo $row['comment']?></td>
<td> edit link / delete link </td>
</tr>
<?php }

Related

JQuery DataTables not displaying properly when populating table from MySql Table

The problem is all in my PHP WHILE Loop somehow, I know this for sure. It turns off all the DataTables features when I use this PHP script inside a table. All the sorts and pagination features are not present when I use "PHP WHILE" in conjuction with DataTables.
But if I type direct text in the "Example_Value" between TD tags it works fine.
It is pulling data from MySql Table and displaying correct value. Somehow the PHP script is turning off all the DataTables features.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://fonts.cdnfonts.com/css/lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
<?php
$dir = '../customer/demo/';
$company_name_array = scandir($dir);
$company_count = count($company_name_array);
$i = 1;
// Loop through array
foreach($company_name_array as $stores){
$storesdisplay[$i] = $stores;
$i=$i+1;
}
require 'dbConfig2.php';
?>
<div class="container-fluid">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Company</th>
<th>Phone</th>
<th>Contact</th>
<th>Email</th>
<th>Last Contact</th>
<th>Send</th>
</tr>
</thead>
<tbody>
<?php
$company_name = $company_name_array;
$i=1;
// Loop through array
while($i <= $company_count ){
$i=$i+1;
$company_name = $storesdisplay[$i];
$stmt = $conn->prepare("SELECT * FROM $company_name WHERE record_id =:record_id");
$stmt->bindValue(':record_id',1, PDO::PARAM_INT);
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
?>
<tr>
<td><a href="<?php echo $dir.$company_name ?>/index.php?company_logo=<?php echo $row['company_logo'] ?>"><?php echo str_replace("_"," ",$company_name) ?></td>
<td><?php echo $row['phone'] ?></td>
<td><?php echo $row['contact'] ?></td>
<td><?php echo $row['email'] ?></td>
<td><?php echo $row['last_contact'] ?></td>
<td><button class="btn">Send</button></td>
</tr>
<?php
}
}
?>
</tbody>
<tfoot>
<tr>
<th>Company</th>
<th>Phone</th>
<th>Contact</th>
<th>Email</th>
<th>last_contact</th>
<th>Send</th>
</tr>
</tfoot>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" ></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
Thank you KIKO Software for leading me down the right path. In-fact you were correct, PHP was throwing an error. As I was loading $company_name into array, the first file read was "..". I corrected this problem with one simple correction. I initialized $i = 1; , rather than $i = 0;

styling a "order by desk" query table

I have made a script that is giving me the top 5 players according to most credits trough a desc 0,5 sql query
This is in a table, but it ain't really doing as i what it to go, what it does is every row it gives the table header, and its not making it as 1 table (see this screenshot)
this is my php and css:
<?php
include('connect.php');
$result = $db->prepare("SELECT * FROM `tbl_users` WHERE `credits` >'0' ORDER BY `credits` DESC LIMIT 0,5");
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="floated_elements">
<table>
<thead>
<tr>
<th> ID </th>
<th> Wie </th>
<th> Hoeveel </th>
<th> email </th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $row['userID']; ?></td>
<td><?php echo $row['userName']; ?></td>
<td><?php echo $row['credits']; ?></td>
<td><?php echo $row['userEmail']; ?></td>
</tr>
</tbody>
</table>
<?php
}
?>
</div> <!-- Closing floated elements -->
<script>
$('table tr').each(function(){
$(this).find('th').first().addClass('first');
$(this).find('th').last().addClass('last');
$(this).find('td').first().addClass('first');
$(this).find('td').last().addClass('last');
});
$('table tr').first().addClass('row-first');
$('table tr').last().addClass('row-last');
</script>
</body>
</html>
i found that for rule and tried to apply it but not really giving the correct results
Edited to give additional code cause asked for
You have started for loop and put everything into that. Its not a right way. Try as below :
<?php
include('connect.php');
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Great+Vibes'
rel='stylesheet' type='text/css'>
</head>
<body>
<div class="floated_elements">
<table>
<thead>
<tr>
<th>ID</th>
<th>Wie</th>
<th>Hoeveel</th>
<th>email</th>
</tr>
</thead>
<tbody>
<?php
$result = $db->prepare("SELECT * FROM `tbl_users` WHERE `credits` >'0' ORDER BY `credits` DESC LIMIT 0,5");
$result->execute();
for($i=0; $row = $result->fetch(); $i++){ ?>
<tr>
<td><?php echo $row['userID']; ?></td>
<td><?php echo $row['userName']; ?></td>
<td><?php echo $row['credits']; ?></td>
<td><?php echo $row['userEmail']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script>
$('table tr').each(function(){
$(this).find('th').first().addClass('first');
$(this).find('th').last().addClass('last');
$(this).find('td').first().addClass('first');
$(this).find('td').last().addClass('last');
});
$('table tr').first().addClass('row-first');
$('table tr').last().addClass('row-last');
</script>
</body>
</html>

jQuery DataTable appears without pagination control

I'm trying to insert Bootstrap pagination to my dynamic table content which I extract from my database as below, but nothing works:
<?php
$sn = $_POST["SN"];
$Reference = $_POST["Reference"];
$Libelle = $_POST["Libelle"];
$NOMENCLATURE = $_POST["NOMENCLATURE"];
$matricule = $_POST["matricule"];
include "./Connections/localhost.php";
$sqlTous = "
select mat.SN, mat.NOMENCLATURE, mat.ID_materiel, mat.Reference, mat.Date_affectation, mat.libelle, mat.Date_Acquisition, mat.Fournisseur,mat.commentaire, mat.Contrat from materiel mat
left join user usr on usr.ID_User = mat.ID_User ";
?>
<div>
<form method="post" action="./consultation.php" id="formClient">
<h4 class="widgettitle" width="10%" >Résultat</h4>
<br/>
<table class="table table-striped" id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<?php
$reponse3 = mysql_query($sqlTous);
while ($rowMat1 = mysql_fetch_array($reponse3)) { ?>
<tbody class="table table-striped" id="example" class="display">
<tr>
<td><?php echo $rowMat1['SN']; ?></td>
<td><?php echo $rowMat1['NOMENCLATURE']; ?></td>
<td><?php echo $rowMat1['Reference']; ?></td>
<td><?php echo $rowMat1['libelle']; ?> </td>
<td><?php echo $rowMat1['Date_Acquisition']; ?></td>
<td><?php echo $rowMat1['Date_affectation']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</form>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
In addition, i have included the following js and css files:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Recherche matériel</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
There are some problems with your code:
tbody element shouldn't have id and class attributes and should be outside of the while loop.
You're including jquery-1.9.1.min.js twice.
<tbody>
<?php
$reponse3 = mysql_query($sqlTous);
while ($rowMat1 = mysql_fetch_array($reponse3)) { ?>
<tr>
<td><?php echo $rowMat1['SN']; ?></td>
<td><?php echo $rowMat1['NOMENCLATURE']; ?></td>
<td><?php echo $rowMat1['Reference']; ?></td>
<td><?php echo $rowMat1['libelle']; ?> </td>
<td><?php echo $rowMat1['Date_Acquisition']; ?></td>
<td><?php echo $rowMat1['Date_affectation']; ?></td>
</tr>
<?php } ?>
</tbody>

datatables pagination, search won't work

I just started using datatables and the instructions to initialize the table seems easy enough.
I am able to get the table to appear and all of the data is inside, however both the pagination and search function doesn't work.
Please help.
This is my code:
<?php
Include 'DBFunctions.php';
?>
<html>
<head>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.9/media/css/jquery.dataTables.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.9/media/js/jquery.dataTables.js"></script>
</head>
<body>
<?php
$queryData = "select c.*, o.officer_name from coa c, officer o WHERE o.persnum = c.importing_officer ORDER BY date_imported DESC";
$resultData = mysqli_query($link, $queryData) or die(mysqli_error($link));
?>
<h1>View All COAs</h1><br>
<table id="myTable" class="display">
<thead>
<tr>
<th>PO Number: </th>
<th>Chemical Name: </th>
<th>COA Date: </th>
<th>Quantity: </th>
<th>Plant Name: </th>
<th>Parameter Results: </th>
<th>Importing Officer: </th>
<th>COA Attempt: </th>
<th>Date Imported: </th>
<th>Pass/Fail: </th>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_array($resultData)) {
?>
<tbody>
<tr>
<td><?php echo $row['po_number']?></td>
<td><?php echo $row['chemical_name']?></td>
<td><?php echo $row['date_coa']?></td>
<td><?php echo $row['quantity']?></td>
<td><?php echo $row['plant_name']?></td>
<td><?php echo $row['parameters_results']?></td>
<td><?php echo $row['officer_name']?></td>
<td><?php echo $row['coa_attempt']?></td>
<td><?php echo $row['date_imported']?></td>
<td><?php echo $row['pass_or_fail']?></td>
</tr>
</tbody>
<?php } ?>
</table>
<script>
$(document).ready( function () {
$('#myTable').DataTable({
});
} );
</script>
</body>
</html>
Take <tbody> out of the while loop so it looks like:
<tbody>
<?php
while ($row = mysqli_fetch_array($resultData)) {
?>
<tr>
<td><?php echo $row['po_number']?></td>
<td><?php echo $row['chemical_name']?></td>
<td><?php echo $row['date_coa']?></td>
<td><?php echo $row['quantity']?></td>
<td><?php echo $row['plant_name']?></td>
<td><?php echo $row['parameters_results']?></td>
<td><?php echo $row['officer_name']?></td>
<td><?php echo $row['coa_attempt']?></td>
<td><?php echo $row['date_imported']?></td>
<td><?php echo $row['pass_or_fail']?></td>
</tr>
<?php } ?>
</tbody>
You will have to enable the various options that datatable provide, for search and pagination you need to do this.
You should check the documentation for other available options
$(document).ready( function () {
$('#myTable').DataTable({
"paging": true,
"searching": true,
});
} );

Trouble using tablesorter jquery plug in with php generated table

I'm asking a user to fill out a form and I want to display that information in table format. Then, I want the user to be able to sort the table from the header row on each column. I am trying to use the jquery tablesorter plug in but cannot seem to get it to work. Does the plug in not work with PHP generated tables?
<!DOCTYPE HTML>
<html>
<head>
<title>Dashboard</title>
<link href ="table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("#sortedtable").tablesorter();
});
</script>
</head>
<body>
<?php
unset($_SESSION['errors_record']);
define("WEB_DB", "server_db");
define("DB_USER", "root");
define("DB_PASS", "prog");
$db_host = "localhost";
MYSQL_CONNECT($db_host,DB_USER,DB_PASS);
mysql_select_db(WEB_DB);
?>
<p><h1>SRG TDE Technical Review Dashboard</h1></p>
<p>
<button>Create a New Review Record</button>
Logout
</p>
<div class="CSSTableGenerator">
<table id = "sortedtable" class = "tablesorter">
<thead>
<tr>
<th>Review Record ID</th>
<th>Project</th>
<th>Date</th>
<th>Author</th>
<th>Moderator</th>
<th>Portfolio Lead</th>
<th>Review Artifact Type</th>
<th>Review Artifact Name</th>
<th>Version</th>
</tr>
$sql = "select record_id,project,date,author,moderator,portlead,rtype,rname,version from dashboard_table ORDER BY date DESC";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
if ($num)
{
while(list($record_id,$project,$date,$author,$moderator,$portlead,$rtype,$rname,$version) = mysql_fetch_row($result))
{
?>
<?php $url="http://localhost/main_tab.php?record=" . $record_id ?>
<tbody>
<tr>
<td><?php echo "<a href = '$url'>$record_id</a>";?></td>
<td><?php echo $project?></td>
<td><?php echo $date?></td>
<td><?php echo $author?></td>
<td><?php echo $moderator?></td>
<td><?php echo $portlead?></td>
<td><?php echo $rtype?></td>
<td><?php echo $rname?></td>
<td><?php echo $version?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</body>
</html>
I'm not that good with php, but it appears that the table being built will have every row wrapped in a new tbody. Move the initial <tbody> outside of the while loop:
if ($num)
{
echo "<tbody>";
while(list($record_id,$project,$date,$author,$moderator,$portlead,$rtype,$rname,$version) = mysql_fetch_row($result))
{
?>
<?php $url="http://localhost/main_tab.php?record=" . $record_id ?>
<tr>
<td><?php echo "<a href = '$url'>$record_id</a>";?></td>
<td><?php echo $project?></td>
<td><?php echo $date?></td>
<td><?php echo $author?></td>
<td><?php echo $moderator?></td>
<td><?php echo $portlead?></td>
<td><?php echo $rtype?></td>
<td><?php echo $rname?></td>
<td><?php echo $version?></td>
</tr>
<?php
}
}
?>
</tbody>

Categories