I'm trying to add DataTables to my webpage, but the DataTable isn't displaying as expected. In order to troubleshoot the issue, I copied the key contents into another PHP file (see code below) and it seems that it an error occurs whenever data is displayed into the table using the SELECT SQL query.
PHP code where it displays incorrectly. See this image for context.
<?php
include 'includes/config.inc.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta meta name="viewport" content ="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Troubleshoot page</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Theme</th>
<th>Visual Idea</th>
<th>Caption</th>
<th>Date</th>
<th>Visual</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$table = mysqli_query($conn ,"SELECT * FROM content WHERE uidCompany='" . $_SESSION[ "userCid" ] . "'");
while($row = mysqli_fetch_array($table)){ ?>
<tr id="<?php echo $row['uidContent']; ?>">
<td style = "display:none" data-target="uidContent"><?php echo $row['uidContent']; ?></td>
<td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>
<td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>
<td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>
<td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>
<td><img src="<?php echo $row['visualContent']; ?>"width="100"/></td>
<td style = "display:none" width="100" data-target="linkContent"><?php echo $row['linkContent']; ?></td>
<td style = "display:none" width="100" data-target="visualContent"><?php echo $row['visualContent']; ?></td>
<td width="170">
<a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”>Link</a>
<a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
<a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
</td>
</tr>
<?php }
?>
</tbody>
</table>
</body>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</html>
PHP code where it displays correctly. See this image for context.
<?php
$title = "My Calendar";
include 'includes/config.inc.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta meta name="viewport" content ="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Title</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Theme</th>
<th>Visual Idea</th>
<th>Caption</th>
<th>Date</th>
<th>Visual</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is</td>
<td>Some Example</td>
<td>Data</td>
<td>2019-08-08</td>
<td>image here</td>
<td>
<a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”>Link</a>
<a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
<a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
</td>
</tr>
<tr>
<td>This is</td>
<td>Some More</td>
<td>Sample Data</td>
<td>2019-08-08</td>
<td>image here</td>
<td>
<a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”>Link</a>
<a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
<a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
</td>
</tr>
<tr>
<td>This is</td>
<td>Another row</td>
<td>Of sample data</td>
<td>2019-08-08</td>
<td>image here</td>
<td>
<a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”>Link</a>
<a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
<a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
</td>
</tr>
</tbody>
</table>
</body>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</html>
What's wrong with the first set of code?
Problem inside <tbody></tbody> code. You have added more <td> then <th>.
You have to remove all <td style = "display:none">. You have 6 header and every row must contain exactly same number of <td>.
<tbody>
<?php
$table = mysqli_query($conn ,"SELECT * FROM content WHERE uidCompany='" . $_SESSION[ "userCid" ] . "'");
while($row = mysqli_fetch_array($table)){ ?>
<tr id="<?php echo $row['uidContent']; ?>">
<td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>
<td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>
<td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>
<td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>
<td><img src="<?php echo $row['visualContent']; ?>"width="100"/></td>
<td width="170">
<a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”>Link</a>
<a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
<a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
</td>
</tr>
<?php }
?>
</tbody>
You are loading datatable js before Jquery library in PHP code page.
Load js and css in below order, it should work.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
Related
I have datatable but it shows in half of the page. I want to show in the whole page.
Following is the image of table shows in half-page
<style>
.table {
text-transform: uppercase;
}
</style>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/custom/css/custom_style.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css">
<link rel=" https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel=" https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.bootstrap4.min.css">
<section class="content">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<table id="example1" class="table table-bordered table-striped" style="overflow-x: auto;">
<thead class="bg-info">
<tr>
<th>E.Id</th>
<th>Name</th>
<th>Update</th>
<th>Disable</th>
<th>Upload</th>
</tr>
</thead>
<tbody class="table-hover">
<?php foreach($employees as $post){?>
<tr>
<td><?php echo $post->user_id;?></td>
<td><?php echo $user_full_name;?></td>
<td><a class="btn btn-success btn-sm"><i class="fa fa-pencil"> Update</i></td>
<td><a class="btn btn-danger btn-sm"><i class="fa fa-trash"> Update</i></td>
<td><a class="btn btn-success btn-sm"><i class="fa fa-trash"> Update</i></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function() {
var table = $('#example1').DataTable( {
scrollY: "500px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
});
});
</script>
In the table, I add overflow-x auto style="overflow-x: auto;" but it not working.
I do not know how what is missing in my code.
Add the below style
<table id="example1" class="table table-bordered table-striped" style="width: 100%;">
I have one table and in this table, I have two button Update and Disable I want to hide those buttons
I trying like this
<table id="example1" class="table table-bordered table-striped table-sm" style=" overflow: auto; ">
<tr>
<th>Dispatch Challan No</th>
<th>Date</th>
<th>From</th>
<?php
$hide = 'OFF';
if($hide == 'ON') { ?>
<th>Update</th>
<th>Delete</th>
<?php } ?>
</tr>
<?php foreach($dispatch as $dis){?>
<tr>
<td><?php echo $dis->disp_ch_no;?></td>
<td><?php echo date("d-m-Y", strtotime($dis->disp_ch_date));?></td>
<td><?php echo $dis->from_branch_name;?></td>
<td><a class="btn btn-success btn-sm" href="<?php echo base_url(); ?>booking/dispatch_challan/DispatchChallanController/updateDispatchChallanPage?disp_id=<?php echo $dis->disp_id; ?>"><i class="fa fa-pencil" > Update</i></a></td>
<td><a class="btn btn-danger btn-sm" onclick="delete_dispatch('<?php echo $dis->disp_id; ?>');" title="Click here to delete your Dispatch record"><i class="fa fa-trash" style="color: #fff;"> Disable </i> </a>
</td>
</tr>
<?php }?>
</table>
this is my table
How can I hide these buttons
Try this,
<?php
$thswitch = 'OFF';
if($thswitch == 'ON') { ?>
<th>Update</th>
<th>Delete</th>
<?php } ?>
whenever you want to show just $thswitch = 'ON'; it
You have to check the if () for each row as we did in th. Like:
<table id="example1" class="table table-bordered table-striped table-sm" style="overflow: auto;">
<tr>
<th>Dispatch Challan No</th>
<th>Date</th>
<th>From</th>
<?php $hide = 'OFF';
if ($hide == 'ON') { ?>
<th>Update</th>
<th>Delete</th>
<?php } ?>
</tr>
<?php foreach($dispatch as $dis) { ?>
<tr>
<td> <?php echo $dis->disp_ch_no;?> </td>
<td> <?php echo date("d-m-Y", strtotime($dis->disp_ch_date));?> </td>
<td> <?php echo $dis->from_branch_name;?> </td>
<?php if ($hide == 'ON') { ?>
<td>
<a class="btn btn-success btn-sm" href="<?php echo base_url(); ?>booking/dispatch_challan/DispatchChallanController/updateDispatchChallanPage?disp_id=<?php echo $dis->disp_id; ?>"><i class="fa fa-pencil" > Update</i></a>
</td>
<td>
<a class="btn btn-danger btn-sm" onclick="delete_dispatch('<?php echo $dis->disp_id; ?>');" title="Click here to delete your Dispatch record"><i class="fa fa-trash" style="color: #fff;"> Disable </i> </a>
</td>
<?php } ?>
</tr>
<?php } ?>
</table>
Or by using CSS you can hide this columns as:
Create a CSS class like:
.hidethisColumn { display: none !important; }
Use it in you table as:
<th class="<?=(($hide == 'ON')? 'hidethisColumn' : '')?>">Update</th>
<th class="<?=(($hide == 'ON')? 'hidethisColumn' : '')?>">Delete</th>
Similarly in rows inside foreach():
<td class="<?=(($hide == 'ON')? 'hidethisColumn' : '')?>">
<a class="btn btn-success btn-sm" href="<?php echo base_url(); ?>booking/dispatch_challan/DispatchChallanController/updateDispatchChallanPage?disp_id=<?php echo $dis->disp_id; ?>"><i class="fa fa-pencil" > Update</i></a>
</td>
So, i have this code that returns me a simple table with the correct db values:
<?php
echo "<table border='1'>
<tr>
<th>Código</th>
<th>Nome</th>
<th>Indicou</th>
</tr>";
while($coluna_bd_tabela = mysqli_fetch_array($sql_indicador_resul)){
echo "<tr>";
echo "<td>" . $coluna_bd_tabela['usu_codigo'] . "</td>";
echo "<td>" . $coluna_bd_tabela['usu_nome'] . "</td>";
echo "<td>" . $coluna_bd_tabela['usu_indicador_codigo'] . "</td>";
echo "</tr>";
}
echo "</table>";
?>
And this one is the stylized table without the querys working:
<table class="table table-striped projects">
<thead>
<tr>
<th style="width: 1%">#</th>
<th style="width: 20%">Nome</th>
<th>Membros Recentes</th>
<th>Project Progress</th>
<th>Status</th>
<th style="width: 20%">#Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>echo $coluna_bd_tabela['usu_codigo']</td>
<td>
<a> echo $coluna_bd_tabela['usu_nome']</a>
<br />
<small>echo $coluna_bd_tabela['usu_indicou']</small>
</td>
<td>
<ul class="list-inline">
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
</ul>
</td>
<td class="project_progress">
<div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" data-transitiongoal="57"></div>
</div>
<small>57% Complete</small>
</td>
<td>
<button type="button" class="btn btn-success btn-xs">Success</button>
</td>
<td>
<i class="fa fa-folder"></i> View
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-trash-o"></i> Delete
</td>
</tr>
</tbody>
I want to show the stylized table with the values of the querys, but this is destroying me. The database connection is fine, these are the querys on a include connection, they are working fine too, as have been shown on the simple table:
$sql_indicador = "SELECT * FROM esc_usuarios WHERE usu_indicador_codigo = '" . $_SESSION['codigo'] . "'";
$sql_indicador_resul = mysqli_query($conexao, $sql_indicador);
To provide a full solution:
<table class="table table-striped projects">
<thead>
<tr>
<th style="width: 1%">#</th>
<th style="width: 20%">Nome</th>
<th>Membros Recentes</th>
<th>Project Progress</th>
<th>Status</th>
<th style="width: 20%">#Edit</th>
</tr>
</thead>
<?php while($coluna_bd_tabela = mysqli_fetch_array($sql_indicador_resul)){ ?>
<tbody>
<tr>
<td><?php echo $coluna_bd_tabela['usu_codigo']; ?></td>
<td>
<a><?php echo $coluna_bd_tabela['usu_nome']; ?></a>
<br />
<small><?php echo $coluna_bd_tabela['usu_indicou']; ?></small>
</td>
<td>
<ul class="list-inline">
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
<li>
<img src="images/user.png" class="avatar" alt="Avatar">
</li>
</ul>
</td>
<td class="project_progress">
<div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" data-transitiongoal="57"></div>
</div>
<small>57% Complete</small>
</td>
<td>
<button type="button" class="btn btn-success btn-xs">Success</button>
</td>
<td>
<i class="fa fa-folder"></i> View
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-trash-o"></i> Delete
</td>
</tr>
</tbody>
<?php } ?>
</table>
You forgot to use the <?php and ?> opening and closing tags around the echo statements. Furthermore, you missed the ; at the end of each statement. I've also moved the beginning and the end of the table out of PHP's echo since I believe it looks much clearer this way.
Trying to open a new window using a tag using target attribute but it is not working. Here is my code:
<tr>
<td>
<?php echo $count;?>
</td>
<td><a class="oiu" href=<?php echo "eventdetail.php?idno=".$row[ 'E_id'];?>><u><?php echo $row['E_name'];?></u></a>
</td>
<td><a class="oiu" href=<?php echo "http://maps.google.com/maps?saddr=".$cadd. "&daddr=".$vadd;?> target="_blank" ><u><?php echo $row['Venue'];?><u></a>
</td>
<td>
<?php echo $row[ 'EDate']. ' '.$time;?>
</td>
<!-- <td><div id="remain"><?php echo "$days, $hours:$minutes:$seconds";?></div></td> -->
<td> <a class="icon1" href=<?php echo "update.php?idno=".$eid;?>><span class="glyphicon glyphicon-pencil pencil"></span></a><a class="icon2" href="#myModal2" data-toggle="modal"><span class="glyphicon glyphicon-trash trash"></span></a>
</td>
</tr>
<?php $count++;
Make your target="_blank" first then give your href="link" as given below and close the underline tag </u>.
Try the following code:
<tr>
<td><?php echo $count;?></td>
<td ><a class="oiu" href=<?php echo "eventdetail.php?idno=".$row['E_id'];?>><u><?php echo $row['E_name'];?></u></a></td>
<td><a class="oiu" target="_blank" href=<?php echo "http://maps.google.com/maps?saddr=".$cadd."&daddr=".$vadd;?> ><u><?php echo $row['Venue'];?></u></a></td>
<td><?php echo $row['EDate'].' '.$time;?></td>
<!-- <td><div id="remain"><?php echo "$days, $hours:$minutes:$seconds";?></div></td> -->
<td> <a class="icon1" href=<?php echo "update.php?idno=".$eid;?>><span class="glyphicon glyphicon-pencil pencil"></span></a><a class="icon2" href="#myModal2" data-toggle="modal"><span class="glyphicon glyphicon-trash trash"></span></a></td>
</tr>
I make search form and I'm using it as ajax searchform.
I have problems in html(data), when I put the html(data) it will display the loading image and the table too it will double here's my code:
$(document).ready(function(){
$("#loading").hide();
<?php $type_temp = (!empty($type)) ? 'company/' .$type:'company';?>
$("#search_id").click(function(){
$("#loading").show();
$.post("<?php echo url_for('/AdmSys_dev.php/' .$type_temp); ?>", $("#send_search").serialize(), function(data){
$(".result").html(data);
});
});
});
How will I put the result into the page?
heres my html code below
<div id="sf_admin_content">
<h2>Company</h2><br />
<div style="margin-bottom:20px;">
<form id="send_search" action="" method="get">
<input type="text" name="search" placeholder="Search: " value="<?php echo $search; ?>" />
<input id="search_id" type="button" value="Search" />
</form>
</div>
Add
<div id="loading" style="margin-left:186px; margin-top:30px;">
<img alt="" src="/images/preloader_transparent.gif" />
</div>
<table class="location" cellspacing="0" style="width:500px;">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Photo</th>
<th>Option</th>
</tr>
</thead>
<tbody class="result">
<?php foreach($company as $x => $companies): ?>
<tr id="company<?php echo $companies->getId(); ?>" class="<?php echo ($x&1) ? 'even':'odd'; ?>">
<td align="right"><?php echo $companies->getId(); ?></td>
<td><?php echo $companies->getName(); ?></td>
<td><?php echo $companies->getDescription(); ?></td>
<td><img alt="" src="/uploads/company/<?php echo $companies->getImageFull(); ?>" /></td>
<td align="right">
<a href="<?php echo url_for('company/edit?id=' .$companies->getId() )?>">
<img alt="edit" src="/images/pencil.png" />
</a>
<a href="#delete" title="delete" onclick="return goDelete(<?php echo $companies->getId(); ?>)">
<img alt="delete" src="/images/delete.png" />
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php
$type_temp = (!empty($type))?'company/'.$type:'company';
$data = array(
'maxPerPage' => $company->getmaxPerPage(),
'lastPage' => $company->getlastPage(),
'nbResults' => $company->getnbResults(),
'curPage' => $curPage,
'linkPage' => '/AdmSys.php/company'.$type_temp. '?search'.$search
);
include_partial('event/pager',$data); ?>
</div>
as youve notice i put the class results in the <tbody class="result></tbody>