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>
Related
I would like to ask why is the DataTable can't read more than 1 data in my Database? I would appreciate any help since I'm relatively new with the Data Table, thank you.
As you can see it's only showing 1 to 1 of 1 entries. But as seen in the table I have 5 retrieved data.
and when I am trying to search in the search bar this shows up.
Here's the code for the table.
<table class="table table-striped table-hover table-condense" id="tbl_research">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Resarch Title</th>
<th scope="col">Research Type</th>
<th scope="col">Research Author</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<?php
include 'includes/connection_operation.php';
$sql = "SELECT * FROM tbl_repository";
$query = mysqli_query($conn,$sql);
if($query)
{
while($row = mysqli_fetch_assoc($query))
{
?>
<th><?php echo $row['ID']; ?></th>
<td><?php echo $row['research_title']; ?></td>
<td><?php echo $row['research_type']; ?></td>
<td><?php echo $row['research_author']; ?></td>
<td>
<input type="submit" name="submit" id="submit" value="View" class="btn btn-info"
data-toggle="modal" data-target="#viewResearchModal<?php echo $row["ID"];?>">
</td>
</tr>
</tbody>
<?php
include './helper/modal_viewresearch.php';
}
}
?>
</table>
Here's my code for my plugins/cdn
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CRR | View Research</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<script>
$(document).ready(function() {
$(function () {
$('[data-toggle="popover"]').popover()
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
</script>
<script>
$(document).ready(function() {
$('#tbl_research').DataTable( {
} );
} );
</script>
</body>
</html>
I had to re-read my whole code for 3 times and the reason it only shows 1 is that the tbody was inside the loop, so it only sees 1. I had to move it outside the while loop so the data should be in one tbody thank you.
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.
I want to turn my table into a datatable so that user can read data displayed more easily and the I could add live filters to select only some type of datas. This is my code, I already wrote the code needed to make it possible.
Despite all, if the code is ran, the table isn't dinamic and doesn't turn into a datatable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FILTRARE PER GENE</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div>
<div id="holder">
<h1><?php echo "FILTRO PER GENE DELLE VARIANTI";?></h1></div>
<hr />
<br>
<div id="sidebar" style="width:50%">
NUOVA RICERCA
  |
DATI UTENTE
  |
HOME
<P> </P>
</div>
<input type="text" id="search" placeholder="Live Search...">
<BR>
<form action="filtro_per_gene_selezione_per_var_RICERCA_PAZ.php" method="POST">
GENE <select name="gene">
<option></option>
<option>CFH</option>
<option>CD46</option>
<option>CFI</option>
<option>CFB</option>
<option>C3</option>
<option>ADAMTS13</option>
<option>THBD</option>
<option>DGKE</option>
<input type='submit' name='vai' value'Invia'>
</form><BR /><BR />
<div class="container">
<div class="row">
<div class="col-mid-8 col-mid-offset-2">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td width="9%"><b>RISULTATO</b></td>
<td width="9%"><b>dnaCode</b></td>
<td width="9%"><b>Chr</b></td>
<td width="9%"><b>Start</b></td>
<td width="9%"><b>End</b></td>
<td width="5%"><b>Alt</b></td>
<td width="5%"><b>Ref</b></td>
<td width="9%"><b>Zigosity</b></td>
<td width="9%"><b>Gene</b></td>
<td width="9%"><b>Func</b></td>
<td width="9%"><b>Gene Context</b></td>
<td width="9%"><b>Dist</b></td>
</tr>
</thead>
<tbody>
<?php
$conn= mysql_connect("local", "user", "pass");
if (!$conn)
{
die("Connessione non riuscita <br>" . mysql_error());
//}else{
//echo "Connessione al database stabilita con successo<br><br>";
}
mysql_select_db("database_var", $conn);
if(isset($_POST["vai"])){
$dna=$_POST["dna"];
}
$sql="SELECT V.dnaCode, V.Chr, V.Start, V.End, V.Alt, V.Ref, V.zygosity, A.gene, A.Func, A.GeneContext, A.Dist FROM variante as V JOIN annotazioni as A ON V.Start = A.Start AND V.Alt=A.Alt AND V.Ref=A.Ref WHERE V.dnaCode='" .$dna. "'";
$result_gene = mysql_query($sql, $conn) or die(mysql_error());
$record_gene=mysql_fetch_array($result_gene);
$index=1;
while ($record_gene=mysql_fetch_array($result_gene)){
echo '
<tr>
<b><td>'.$index.'</td></b>
<td>'.$record_gene['dnaCode'].'</td>
<td>'.$record_gene['Chr'].'</td>
<td>'.$record_gene['Start'].'</td>
<td>'.$record_gene['End'].'</td>
<td>'.$record_gene['Alt'].'</td>
<td>'.$record_gene['Ref'].'</td>
<td>'.$record_gene['zygosity'].'</td>
<td>'.$record_gene['gene'].'</td>
<td>'.$record_gene['Func'].'></td>
<td>'.$record_gene['GeneContext'].'</td>
<td>'.$record_gene['Dist'].'</td>
</tr>
';
++$index;
};
?>
</tbody>
</table>
</div>
</div>
</div>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script type="text/javascript" src="file:///C|/xampp/htdocs/DB/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="file:///C|/xampp/htdocs/DB/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.table').DataTable();
});
</script>
</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 am using datatable to display data. I have large database nearly 15k rows and it takes times to load data so I am displaying only 200 rows in datatable. But search filter in the datatable are most important thing needed here. Therefore I need to search data directly from database by php through ajax call on keyup event. So how can i do that ?
This is what I have done till here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Trail 2</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="datatable/css/jquery.dataTables.min.css" rel="stylesheet">
<!--<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet">-->
<style>
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>City</th>
<th>Mobile No</th>
</tr>
</thead>
<tfoot>
<tr>
<th><input type="text" name="name" id="name" placeholder="Search by NAME"></th>
<th>Surname</th>
<th>City</th>
<th>Mobile No</th>
</tr>
</tfoot>
<tbody>
<?php
require('connectivity2.php');
$query1 = "SELECT * FROM member LIMIT 200;";
$result1 = mysqli_query($con, $query1);
while($row = mysqli_fetch_assoc($result1)){
$name = $row['m_name'];
$surname = $row['m_sec_surname'];
$city = $row['m_city'];
$no = $row['m_mobile'];
?>
<tr>
<td><?php echo $name; ?></td>
<td><?php echo $surname; ?></td>
<td><?php echo $city; ?></td>
<td><?php echo $no; ?></td>
</tr>
<?php } //End of while loop
?>
</tbody>
</table>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="datatable/js/jquery.dataTables.min.js"></script>
<!--<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
// DataTable
var table = $('#example').DataTable();
// Search
$("#name").keyup(function(){
var m_name = $("input[name='name']").val();
//window.alert(m_name);
$.ajax({
type: 'POST',
url: 'trial2php.php',
data: {member name:m_name},
cache: true,
datatype: 'html',
success: function(){
$('#example').DataTable();
}
});
});
} );
</script>
</body>
</html>
Here I have taken just one input text in footer of the table for testing search.
Something is wrong in ajax function. Please help me out here.
Select only needed columns:
SELECT ItemCode, ItemName, RackNo, ItemSrNo
Create indexes for columns:
ItemCode, ItemName, RackNo, ItemSrNo
See:
https://dev.mysql.com/doc/refman/5.7/en/create-index.html
You should use Server Side processing with Pipeline feature of DataTables. This way fetching, rendering and filtering data in DataTables will be smooth.
Follow the link below to know more about the process with example -
DataTables Server Side Processing with Pipeline