creating datatable for php codes with bootstrap 4 - javascript

hello i created a datatabe to to load my datas sort them and using the search functionality but it dose not work i tried it been 5 days and i am stuck here i do not know what i am missing or what i done wrong this is my codes if any one can help me i would be thankful
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tbody>
<?php
endwhile;
}
?>
</div>
</table>
these are my bootstrap and scripts that i use
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
also this is my data table code
<script type="text/javascript">
$(document).ready(function() {
$('#datas').dataTable( { "ordering": true } );
} );
</script>
the datatable is created but it does not work like the search or the sorting this is picture of what it likes
i am using bootstrap 4


You are missing <tr> both on your <thead> and <tbody>
<thead style="color:black;">
<th>Product</th>
</thead>
should be:
<thead style="color:black;">
<tr>
<th>Product</th>
<tr>
</thead>
and inside you tbody while:
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td>...</td>
</tr>
<?php endwhile; ?>
You're also closing your </tbody> on every while loop:
</tbody>
<?php
endwhile;
?>
</div> //where are you opening this div? Seems it should not be here
</table>
change to:
<?php endwhile; ?>
</tbody>
</table>
This changes should make your DataTable work as expected.


Malformed html, loops wrong, missing tr tag, etc. Should be something like this.
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tr>
?>
<?php endwhile; ?>
<?php } ?>
</tbody>
</table>
</div>

Related

How to delete from json table?

I have a table like below:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key => $value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td><button type="button" name="button2" >Usuń</button></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
how to delete item from this list via clicking on the button in last column of the table?
my php:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
thanks for any help, I don't know how to get value by button clicking :/

It seems that your data is gotten from a file, so to get it done you need to go over all these steps in the same php script:
Get data from this file
Parse data with json_decode
Remove an item using unset($data['id'])
Save new data in the same file
Here is an example:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
// here we go
if(isset($_POST['item_key']) && !empty($_POST['item_key'])) {
$data = array_values($data);
$i=0;
foreach($data as $element) {
//check if it's the right item
if(intval($_POST['item_key']) == $element['id']){ // intval only if you are sure id passed in POST[item_key] always integer
unset($data[$i]);
}
$i++;
}
file_put_contents('data.json', json_encode(array_values($data)));
}
$_POST['item_key'] will come after submiting the form in the html, see below.
In your html code, you will need to add the following:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key =>
$value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td>
<!-- action="#" means you will stay in the same script after submit -->
<form action="#" method="POST">
<input
hidden
type="text"
name="item_key"
value="<?php echo $value['id'];?>"
/>
<input type="submit" value="Remove" />
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
UPDATE
Used unset with array_values after json_decode
Removed header(refre..) since the refresh will be done by form submit to same script

JQuery Datatable is only working with empty (no data) tables

When the table is empty, Datatables works and shows no data available ( with pages and search etc..) But when a single row is inserted, Datatables breaks.
I am getting the data to the table using PHP and has used this method in the past and worked fine.
I am assuming that since it works with empty tables, the problem is not with the linking of scripts etc.
Any help would be great, thank you.
I have tried to see if there is a problem within the HTML by correcting tags etc but I cant seem to identify the problem.
<div class="tab-pane active" id="queries">
<hr>
<table id="table1" class="table table-striped ">
<thead>
<tr class="sticky" >
<th>Date of Complaint</th>
<th>Reference</th>
<th>Name</th>
<th>Surname</th>
<th>Subject</th>
<th> </th>
</tr>
</thead>
<?php
//process $result
echo "<tbody>";
while ($row = mysqli_fetch_assoc($queriesresult2)) {
;
echo "<tr>";
echo "<td>".$row['Data1']."</td>";
echo "<td>".$row['Data2']."</td>";
echo "<td>".$row['Data3']."</td>";
echo "<td>".$row['Data4']."</td>";
echo "<td>".$row['Data5']."</td>";
echo "<td><a class=\"btn btn-danger\" href=\"editQUERY?id=".$row['id']."\">Edit</a></td>";
echo "</tr>";
}
echo "</tbody>";
?>
</table>
<hr>
</div>

I see you use bootstrap dataTables. Try this code, it should work and you will have your search bars:
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<div class="tab-pane active" id="queries">
<hr>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($queriesresult2)) { ?>
<tr>
<td><?= $row['data1'] ?></td>
<td><?= $row['data2'] ?></td>
<td><?= $row['data3'] ?></td>
<td><?= $row['data4'] ?></td>
<td><?= $row['data5'] ?></td>
<td><a class="btn btn-danger" href="editQUERY?id="<?= $row['id'] ?>">Edit</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable( {} );
} );
</script>
</body>
</html>

How to update/add/delete rows in table with AJAX

I'm new to Javascript. I'm trying to implement Ajax system in my coursework in order to update the html table without updating the whole page. My HTML table is basically the table from my database, so Ajax should update the MySQl table, but how can I refresh the actual table on webpage? Another question is can I use different .php files for each action and just call them with ajax? How can I display the forms in the message box for adding the row or should I just redirect to a new page where the will be the forms for a new row?
Here is my table:
<?php
include("audentificate.php");
include ('db.php');
$query = "SELECT * FROM Trains";
$result = mysqli_query($conn, $query);
?>
<html>
<head>
<link href = "style.css" rel = "stylesheet" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Departures table for workers </title>
</head>
<body>
<div class="table" align="center">
<div style = "background-color:#FFFFFF; padding:20px;"><b>Departures Table for workers</b></div>
<table border="1" align="center" width="700">
<thead>
<tr>
<th>Change row</th>
<th>ID</th>
<th>Train Company</th>
<th>Destination</th>
<th>Time</th>
<th>Platform</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><input id = 'tick' type="checkbox" name="name1" /> </td>
<td><?php echo $row['id']?></td>
<td><?php echo $row['Traincompany'] ?></td>
<td><?php echo $row['Destination'] ?></td>
<td><?php echo $row['Time'] ?></td>
<td><?php echo $row['Platform'] ?></td>
<td><?php echo $row['Date'] ?></td>
</tr>
<?php endwhile ?>
</tbody>
</table>
<p class="message">Logout from userLogout
</div>
</body>
</html>

how to properly use DATATABLE

<table id="tbl" class = "table table-striped table-bordered" style="border-top:0px;">
<thead>
<tr>
<th></th>
<th><p style="text-align:center;">Answered</p></th>
<th><p style="text-align:center;">Post</p></th>
<th><p style="text-align:center;">Views</p></th>
</tr>
</thead>
<tbody>
<?php
$res = $db->viewquestion();
$ask_id= '';
foreach ($res as $key => $value) {
$ask_id = $value['iask_id'];
?>
<tr>
<td>
<div align="left" width="400">
<?php echo '<a href="askpriest?iask_title='.$value['iask_title'].'">'?>
<img src="./<?php echo $value['image']; ?>" style="border-radius:50%;float:left" width="20%" height="20%" class="pull-left">
<h5><strong class="font-1-2" style="color:#59960b;border-radius:50%;float:left"><?php echo $value['iask_title']?></strong></h5>
<br><p class="font-1-2" style="color:#000000;border-radius:50%;font-size:12px;float:left">by:<?php echo $value['firstname'].' '.$value['lastname'].' '. $value['date_send'].'<br> in '.$value['iask_topic'] ?> </p>
</a>
</div>
</td>
<td>
<?php
if($value['iask_answered']==1){
?>
<p align="center" style="padding-top:20px;"><span class="fa fa-check" style="color:#59960b;"></span></p>
<?php
}else{
?>
<p align="center" style="padding-top:20px;font-size:30px;"><span style="color:#59960b;"></span></p>
<?php
}
?>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;" width="80"><?php echo $value['iask_post']?></p>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;"><?php echo $value['iask_view']?> </p>
</td>
</div>
</tr>
<?php
}
?>
</tbody>
</table>
so i have this table and im trying to use the datatable js..
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" //code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tbl').DataTable();
});
</script>
but unfortunately nothing happens on the table.. i tried searching on web and they said that the and should be equal.. so i tried to count how many is the and and they are equal.. i dont have any idea how to fix this since the only answer i get was to and should be equal.. hel

Your table has the id equal with "tbl" so the code should be
$(document).ready(function() {
$('#tbl').DataTable();
});

You can use jquery data-table like:
html:
<table id="data_table">
<thead>
<tr>
<th>Emp Code</th>
<th>First Name</th>
<th>Last Name</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<!-- Dynamic Body -->
</tbody>
</table>
Jquery:
$(document).ready(function() {
var data = [];
data.push(
[1,"Sasha","Brenna","0800 1111"],
[2,"Sage","Mia","(01012) 405872"],
[3,"Chelsea","Allistair","076 0578 0265"],
[4,"Uta","Savannah","070 1247 5884"],
[5,"Remedios","Berk","0995 181 0007"],
[6,"Ruby","Wayne","0800 1111"],
[7,"Faith","Fredericka","(01709) 099879"],
[8,"Myra","Harrison","070 4241 9576"],
[9,"Drake","Miriam","0800 733635"],
[10,"Reed","Shannon","076 8597 5067"]
);
$('#data_table').DataTable( {
data: data,
});
});
Working Fiddle

fetch view table values in another page while click on the button in codeigniter

i have one view candidates page in my application..in that page i display all the candidate details..in that page i gave one button called SCHEDULE INTERVIEW..when user click on the button i want to display that particular row candidates values in another page..i want to get only name and email of the particular candidate like:
Name:******
email:*******
like this i want to display that particular candidate details..
View page:
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>experience</th>
<th>CTC</th>
<th>Expected Ctc</th>
<th>role</th>
<th>Current Location</th>
<th>Desired Location</th>
<th>Notice Period</th>
<th>Resume</th>
<th>Actions</th>
</tr>
</thead>
<?php foreach ($view_candidates as $idata) { ?>
<tbody>
<tr id="domain<?php echo $idata->user_id;?>">
<td class="cell checkbox">
<input type="checkbox" class="selectedId" name="selectedId" />
</td>
<td><?php echo $idata->first_name;?></td>
<td><?php echo $idata->last_name;?></td>
<td><?php echo $idata->email;?></td>
<td><?php echo $idata->mobile_number;?></td>
<td><?php echo $idata->experience;?></td>
<td><?php echo $idata->ctc;?></td>
<td><?php echo $idata->expectedctc;?></td>
<td><?php echo $idata->role_name;?></td>
<td><?php echo $idata->current_location;?></td>
<td><?php echo $idata->desired_location;?></td>
<td><?php echo $idata->notice_period;?></td>
<td><?php echo $idata->resume;?></td>
<td>
Schedule interview
</td>
</tr>
</tbody>
Can anyone help me..
How to do this..
Thanks in Advance..

Something like below:
<?php
// controller
function candidate_detail($candidateid)
{
$data = $this->model_name->get_candidate_detail($candidateid);
$viewData['getCandidate'] = $data;
$this->load->view('candidate_view',$viewData);
}
// model
function get_candidate_detail($candidateid)
{
$q = $this->db->query("SELECT * FROM tbl_name WHERE candidate_id = $candidateid");
if($q->num_rows() > 0) {
return $q->row_array();
} else {
return '';
}
}
?>
// view candidate_view
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>experience</th>
<th>CTC</th>
<th>Expected Ctc</th>
<th>role</th>
<th>Current Location</th>
<th>Desired Location</th>
<th>Notice Period</th>
<th>Resume</th>
</tr>
</thead>
<tbody>
<tr id="domain<?php echo $getCandidate['user_id'];?>">
<td class="cell checkbox">
<input type="checkbox" class="selectedId" name="selectedId" />
</td>
<td><?php echo $getCandidate['first_name'];?></td>
<td><?php echo $getCandidate['last_name'];?></td>
<td><?php echo $getCandidate['email'];?></td>
<td><?php echo $getCandidate['mobile_number'];?></td>
<td><?php echo $getCandidate['experience'];?></td>
<td><?php echo $getCandidate['ctc'];?></td>
<td><?php echo $getCandidate['expectedctc'];?></td>
<td><?php echo $getCandidate['role_name'];?></td>
<td><?php echo $getCandidate['current_location'];?></td>
<td><?php echo $getCandidate['desired_location'];?></td>
<td><?php echo $getCandidate['notice_period'];?></td>
<td><?php echo $getCandidate['resume'];?></td>
</tr>
</tbody>

Categories

Resources