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.
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>
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.
Hi i want to implement DataTable in the table to populate data from my db in my php page, the below code i used, but its not working, not getting the data table, instead i am getting the normal table only -
<head>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/media/css/jquery.dataTables.min.css">
<script src="../DataTables-1.10.7/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/extensions/Responsive/css/dataTables.responsive.css">
<script src="../DataTables-1.10.7/extensions/Responsive/js/dataTables.responsive.js" type="text/javascript"></script>
</head>
<div id="example_wrapper" class="dataTables_wrapper" role="grid">
<div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
<?php
$sql="select product_id,product_name,original_price,offer_price,product_rating,image_main,stock_in_hand from niad_products order by product_id desc";
$result=$linkID1->query($sql);
$c=#mysqli_num_rows($result);
if($c>=1){?>
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<div id="printable">
<table id="example" class="display" cellspacing="0" width="100%" style="color:#FFF">
<thead>
<tr>
<th>Image</th>
<th>Product Name</th>
<th>Original Price</th>
<th>Offer Price</th>
<th>Rating</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<?php while($row=mysqli_fetch_array($result)){?>
<tr>
<td>
<?php echo "<img width='100' height='100' src=../product-images/".$row['image_main'] ." />"; ?></td>
<td>
<?php echo $row['product_name']; ?>
</td>
<td>
<?php echo $row['original_price']; ?>
</td>
<td>
<?php echo $row['offer_price']; ?>
</td>
<td>
<?php echo $row['product_rating']; ?>
</td>
<td>
<?php echo $row['stock_in_hand']; ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php } else {echo "No records";} ?>
</div>
</div>
Can anyone guide me with my mistake. It will be very helpful. Thanks
I recently got this to work on another application I am working on and thought I'd apply it to an existing project, but it's not working for the second thing. I feel like I'm missing some js file or something but I've tried everything I can find. I tried to get it to work on a simple page test and it seems to show the CSS, but not the search or filtering.
Here is my page:
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
<script type="text/javascript" language="javascript" src='https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
<script>
$(document).ready(function(){
$('#myTable').DataTable( {
} );
});
</script>
<table id="myTable" class="display table" width="80%">
<tr>
<th>stuff</th><th>things</th><th>hi</th>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
</table>
Any ideas?
Datatables website states in the usage page you need thead and tbody tags for it to initialize
<table id="myTable" class="display table" width="80%">
<thead> <tr>
<th>stuff</th><th>things</th><th>hi</th>
</tr>
</thead>
<tbody>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
</tbody>
</table>
I am working on a system where I need to upload image files from the back end admin panel.
In the display page of admin panel here I have also implemented a system to change the position of image by selection of position nos from a dropdown list.
In the display page I am using two sql queries, one will fetch and display records row by row and another will fetch the id and position ids into the dropdown list and use selected=selected to by default display the position ids of each row.
Till here all are working fine. Now I need to implement a system where on selection of the position id from the dropdown list of any row the existing position id of the row should be interchange with another row and the record should be updated to the database table.
Suppose if some one selects the position 3 for the first row the position of first row should be updated to 3 where id is 1 and the positon 1 should be updated to the row whose id is 3.
I am just stuck here how to run the query to implement this.
I am showing the php codes below. Here I got the selected position exactly what I have selected but when I pass the id value I only got the id of the last row no.
I don't know why it is happening here.
Please help me.
<?php
session_start();
include('../configuration.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo PROJECT_TITLE;?></title>
<!--style for pagination-->
<link href="pagination/pagination.css" rel="stylesheet" type="text/css" />
<link href="pagination/B_blue.css" rel="stylesheet" type="text/css" />
<!--style for pagination-->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="clockp.js"></script>
<script type="text/javascript" src="clockh.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>
<!--jquery for delete & save in archive pop up-->
<script type="text/javascript" src="jconfirmaction.jquery.js"></script>
<script type="text/javascript" src="jconfirmaction_arcv.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ask').jConfirmAction();
});
$(document).ready(function() {
$('.arc').jConfirmAction1();
});
</script>
<script language="javascript" type="text/javascript" src="niceforms.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type="text/css">
.foto_style img {
width:100px;
height:75px;
}
</style>
<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" />
</head>
<body>
<div id="main_container">
<div class="header">
<div class="right_header">Welcome <?php echo stripslashes($res->fields["name"]); ?>. | Visit site | Logout</div>
<div id="clock_a"></div>
</div>
<div class="main_content">
<div>
<h1>WELCOME TO THE ADMINISTRATION PANEL</h1>
</div>
<div class="center_content">
<div class="left_content">
<?php include("includes/leftcontents.php"); ?>
</div>
<div class="right_content">
<h2>MANAGE PHOTO GALLERY - CME ON CLINICAL PATHIOLOGY & RESEARCH METHODOLOGY:</h2>
<table id="rounded-corner" summary="Table of Assamese Dishes">
<thead>
<tr>
<th scope="col" class="rounded-company" colspan="2">ADD NEW IMAGE:</th>
<th scope="col" class="rounded-q4" colspan="5"> </th>
</tr>
<tr>
<th scope="col" class="rounded" colspan="3">
<form name="reg" id="reg">
<input type="text" name="searchtxt" id="searchtxt" style="width:250px;" value="" /></th>
<th scope="col" class="rounded" colspan="5"><input type="submit" name="btn" id="btn" value="search" onclick="funsrc();" />
</th>
</tr>
</thead>
</form>
<thead>
<tr>
<th scope="col" class="rounded" style="color:#000000;">Image.</th>
<th scope="col" class="rounded" style="color:#000000;">Image Desc.</th>
<th scope="col" class="rounded" style="color:#000000;">Uploaded On.</th>
<th scope="col" class="rounded" style="color:#000000;">Position.</th>
<th scope="col" class="rounded" style="color:#000000;">Edit</th>
<th scope="col" class="rounded" style="color:#000000;">Delete</th>
<th scope="col" class="rounded" style="color:#000000;">Send to Archive</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$query = mysql_query("select * from cme_clinical_table order by position");
if(mysql_num_rows($query)>0)
{
while($data = mysql_fetch_array($query)){
?>
<td class="foto_style"><img src="<?php echo $data["image_thumb"];?>" width="100" height="50" /></td>
<td><?php echo stripslashes($data["image_dtls"]); ?></td>
<td><?php echo stripslashes($data["created_date"]); ?></td>
<td align="center">
<?php
$sql="Select * from cme_clinical_table order by position";
$row = mysql_query($sql);
$total = mysql_num_rows($row);
?>
<form action="" enctype="multipart/form-data" name="pos_chng" id="pos_chng" method="post">
<select name="cnange_pos" id="cnange_pos" style="width:60px;" >
<?php if($total>0) {
while($res = mysql_fetch_array($row))
{
?>
<option value="<?php echo $data["id"]; $id = $data["id"];?>" <?php if(($data["position"]==$res["position"])){ echo 'selected="selected"';}?> ><?php echo $res["position"];?></option>
<?php
}}
//}?>
</select> <input type="submit" name="sub" id="sub" value="save" />
</form>
</td>
<td align="center"><img src="images/user_edit.png" alt="" title="" border="0" /></td>
<td align="center"><img src="images/trash.png" alt="" title="" border="0" /></td>
<td align="center"><img src="images/trash.png" alt="" title="" border="0" /></td>
</tr>
<?php }}else{?>
</tbody>
<tbody>
<tr><td height="30" colspan="7" align="center"><b>No Contents found.</b></td></tr>
</tbody>
<?php } ?>
<tfoot>
<tr>
<td colspan="6" class="rounded-foot-left">
<!-- PAGINATION STARTS -->
<!-- PAGINATION STARTS -->
</td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
</table>
</div><!-- end of right content-->
</div><!--end of center content -->
<div class="clear"></div>
</div> <!--end of main content-->
<div class="footer">
</div>
</div>
</body>
</html>
<?php
include("includes/common_function.php");
if(isset($_POST['sub']))
{
$change_pos = $_REQUEST['cnange_pos'];
$query = mysql_query("update cme_clinical_table
set position =
case
when id = '".$id."' then '".$change_pos."'
when id = '".$change_pos."' then '".$id."'
end
WHERE id in ('".$id."' , '".$change_pos."')");
}
?>