i have php file for get value from database.
i have trouble get an id button dynamical from the result.
Am i doing wrong?
this is my code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script>src="jquery-3.3.1.js"</script>
</head>
<body>
<div class="container">
<?php
include("koneksi.php");
$sql = "SELECT * FROM data_cv";
$result = $conn->query($sql);
?>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Nama</th>
<th>Nomor Identitas</th>
<th>Tempat Lahir</th>
<th>Tanggal Lahir</th>
<th>Jenis SIM</th>
<th>Masa SIM</th>
<th>Nomor SKCK</th>
<th>Pendidikan</th>
<th>Nomor Telepon (Handphone)</th>
<th>Keterangan</th>
<th>Terima Berkas</th>
<th>Tindakan</th>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_array($result)) {
echo '
<tr>
<td>'.$row["nama"].'</td>
<td>'.$row["id_ktp"].'</td>
<td>'.$row["tempat_lahir"].'</td>
<td>'.$row["tanggal_lahir"].'</td>
<td>'.$row["jenis_sim"].'</td>
<td>'.$row["masa_sim"].'</td>
<td>'.$row["no_skck"].'</td>
<td>'.$row["pendidikan"].'</td>
<td>'.$row["no_telp"].'</td>
<td>'.$row["keterangan"].'</td>
<td>'.$row["terima_berkas"].'</td>
<td><button id= "'.$row['id_ktp'].'" value="Accept"">Panggil</button></td>
</tr>
';
}
$conn->close();
?>
<script>
$("button").click(function() {
alert(this.id);
});
</table>
</div>
</div>
</body>
</html>
my php file result is this
i want when i click the button, i get alert from their id base on php values.
please give me advice.
Dont use an id instead use data- attributes, then use a class to target the buttons, for example:
<button data-id="'.$row['id_ktp'].'" class="valueButton"></button>
Then in your jQuery you can get the value using the data api.
<script>
$(".valueButton").click(function() {
alert($(this).data('id'));
});
</script>
I over overlooked the following:
The script tag is wrong <script>src="jquery-3.3.1.js"</script>
Missing <tbody>
And careful with them auto's """ which some editors just add in as you type to keep you on your toes.
Related
How to make jQuery datatables collapse/expand option with mysql php
I don't want to go for ajax option because in view source fetch.php page can see data
I dont have idea to secure that. when someone that php page open can read all data. so go other method.
But somebody help me to make collapse/expand
$(document).ready(function(){
$('#employee_data').DataTable();
});
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query ="SELECT * FROM tbl_employee ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<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>Name</td>
<td>Address</td>
<td>Gender</td>
<td>Designation</td>
<td>Age</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["name"].'</td>
<td>'.$row["address"].'</td>
<td>'.$row["gender"].'</td>
<td>'.$row["designation"].'</td>
<td>'.$row["age"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
Currently, I am working on my datatable to display the detail from the database. I am using the php myadmin for the database. But it only manage to display the detail only but not the pagination, sorting and searching is not working. I have followed some other tutorials but it still doesn't work.
<?php
$conn = mysqli_connect("localhost", "root", "", "jiaen");
$sql = "SELECT * FROM stock LEFT OUTER JOIN category ON stock.categoryid=category.categoryid order by stockCode";
//Execute connection
$result = mysqli_query($conn,$sql);
?>
<!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" />
</script>
</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="stock" class="table table-striped table-bordered" >
<thead>
<tr>
<td>Stock Code</td>
<td>Stock Name</td>
<td>Stock Category</td>
<td>Quantity</td>
<td>Price (RM)</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["stockCode"].'</td>
<td>'.$row["stockName"].'</td>
<td>'.$row["categoryName"].'</td>
<td>'.$row["quantity"].'</td>
<td>'.$row["price"].'</td>
<td>Stock In</td>
<td>R&D</td>
<td>Remark Stock</td>
<td>Modify</td>
<td>Delete</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
//Javascript part for datatable
<script>
$(document).ready(function() {
$('#stock').DataTable();
} );
</script>
</body>
</html>
Your <thead> contains a <tr> which is full of <td> tags instead of <th> tags.
It has 6 tags, so your table will have 6 columns.
Your <tbody> on the other hand has 10 <td> tags inside each <tr> tag.
10 will not fit into 6.
I'm new to PHP and still learning the language. I created a php page that can show all records in my database on a table (called view_users.php). I also created two buttons "Edit" and "Delete".
I want to be able to edit records on a particular row when I click the "Edit" button attached to it. Is there a way I can do this on the same page (view_users.php).
Below is my source code for view_users.php
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css"> <!--css file link in bootstrap folder-->
<title>View Users</title>
</head>
<style>
.login-panel {
margin-top: 150px;
}
.table {
margin-top: 50px;
}
</style>
<body>
<div class="table-scrol">
<h1 align="center">All the Users</h1>
<div class="table-responsive"><!--this is used for responsive display in mobile and other devices-->
<table class="table table-bordered table-hover table-striped" style="table-layout: fixed">
<thead>
<tr>
<th>User Id</th>
<th>User Name</th>
<th>User E-mail</th>
<th>User Pass</th>
<th>Action</th>
</tr>
</thead>
<?php
include("database/db_conection.php");
$view_users_query="select * from users";//select query for viewing users.
$run=mysqli_query($dbcon,$view_users_query);//here run the sql query.
while($row=mysqli_fetch_array($run))//while look to fetch the result and store in a array $row.
{
$user_id=$row[0];
$user_name=$row[1];
$user_email=$row[2];
$user_pass=$row[3];
?>
<tr>
<!--here showing results in the table -->
<td><?php echo $user_id; ?></td>
<td><?php echo $user_name; ?></td>
<td><?php echo $user_email; ?></td>
<td><?php echo $user_pass; ?></td>
<td> <button type="button" class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button></td>
</tr>
<?php } ?>
</table>
</div>
</div>
</body>
</html>
In your HTML page you can add the following code in the action column
Basically your sending the respective id by GET parameter.
<td>
<a href="editpage.php?id="<?php echo $userid; ?>>Edit</a>
</td>
In your PHP code you can access the id as follows :
<?php
if(!empty($_GET['id'])){ //Make sure that id parameter is set in your url
$userid = $filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT); //Now use the
//$userid = $_GET['id']; //The above line is safer then this line
//Now do what ever you want with the id
}
make your edit button:
<button type="button" name="<?php echo'edit[$i]'; ?>" class="btn btn-primary">Edit</button>
$i is the current id of the row in mysql of the record in the while loop.
then at the top of your view_users.php page add something like:
if(isset($_POST['edit']))
{
$row = $_POST['edit']
....have form to edit this row
....update row $i in database
....submit button
}
I have no clue anymore how I can solve this problem, components of Datatables have dissapeared : Searchbox, Pagination, number of length.
i thought it was caused by myself in the PHP code, but this is not the case.
there are many errors that are showing, id=example, error JSON response Second one AJAX error.
and now I found this, that is why I am asking my question now.
The code below shows just name but other components of the table are gone.
<table cellpadding="1" cellspacing="1" id="datatable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>City</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
require_once("Connection.php");
$connection = new Connection();
$conn = $connection->getConnection();
try{
$sql = "SELECT * FROM identitas";
$getData = $conn->prepare($sql);
$getData->execute();
$result = $getData->fetchAll(PDO::FETCH_ASSOC);
foreach($result as $data){
?>
<tr>
<td><?php echo $data['nama']?></td>
</tr>
<?php
}
}catch(PDOException $e){
echo "ERROR : " . $e->getMessage();
}
?>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Phone</th>
<th>City</th>
<th>Email</th>
</tr>
</tfoot>
</table>
how to call Datatables
<!-- for data table-->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.11/media/css/jquery.dataTables.css">
<script type="text/javascript" src="DataTables-1.10.11/media/js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.11/media/js/jquery.dataTables.min.js"></script>
<!-- javascript-->
<script type="text/javascript">
$(document).ready(function(){
$('#datatable').dataTable({
"dom": '<"top"fl>rt<"bottom"ip><"clear">'
});
});
</script>
Hello people i have this code....
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com /ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$(".mytableCol3").click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});
</script>
<style>
.on { background-color:red; color:#ffffff; }
</style>
</head>
<body>
<table class="mytable" border=1>
<tbody>
<tr>
<td class="mytableCol3">google</td>
</tr>
<tr>
<td class="mytableCol3">yahoo</td>
</tr>
<tr>
<td class="mytableCol3">bing</td>
</tr>
</tbody>
</table>
<table class="mytable" border=1>
</body>
</html>
above code is working fine by toggling red color between cells and it also redirects page to "specific location" when clicked on it.please check the demo ,you can observ first the cell goes red color then it will be redirected to google/yahoo/bing ,but now what iam need to do when they come back to by clicking back button /(code what i write) ,specific cell which was selected should still be highlighted with red color.... i reied doing this by session but not exactly.. can any one plzz help me to fix this....
You can do that with $.cookie
Assign an ID for each line and set cookie, then check that cookie for an available id:
<table class="mytable" border=1>
<tbody>
<tr>
<td class="mytableCol3" id="google">google</td>
</tr>
<tr>
<td class="mytableCol3" id="yahoo">yahoo</td>
</tr>
<tr>
<td class="mytableCol3" id="bing">bing</td>
</tr>
</tbody>
</table>
and javascript:
$(function(){
$(".mytableCol3").click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
$.cookie('clicked', $(this).attr('id'));
});
if($('#'+$.cookie('clicked'))){
$('#'+$.cookie('clicked')).addClass('on');
}
});
You can use plain javascript for cookie, I used that plugin for example.