I have a table based on a SQL query that I'm running through PHP that I would like to apply Datatables to for presentation and sorting purposes. However, when I run the page in the browser, I receive an error that indicates that I have an invalid JSON response.
Here is my code:
PHP script (with HTML):
<?php
session_start();
include 'connect.php';
$sql = "SELECT *
FROM SCHEMA.DETAIL_TABLE";
$result = mysql_query($sql);
$row_count=mysql_num_rows($result);
?>
<!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>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.3.3/css/colReorder.dataTables.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="javascript/detail_sorter.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.3.3/js/dataTables.colReorder.min.js"></script>
</head>
<body>
<table id="disposalDetailTable" class="display">
<thead>
<tr>
<th>Ticket Number</th>
<th>Bay Number</th>
<th>Date Time</th>
<th>Customer</th>
<th>Driver</th>
<th>Total</th>
<th>Unload Time</th>
</tr>
</thead>
<tbody>
<?php
//This is the main detail data table. We loop through the SELECT statement.
while ($row = mysql_fetch_row($result)) {
echo "<tr>
<td>".($row[15])."</td>
<td>".($row[1])."</td>
<td>".($row[2])."</td>
<td>".($row[5])."</td>
<td>".($row[8])."</td>
<td>".(round($row[12], 1))."</td>
<td>".(round($row[13], 1))."</td>
</tr>";
}
?>
</tbody>
</table>
</body>
Here is my jQuery (filename = detail_sorter.js):
$(document).ready(function(){
$('#disposalDetailTable').DataTable();
});
I feel like I'm trying to keep it too simple. When use a static table the Datatables functionality works perfect. However, when I add the PHP dynamically I get the error that I mentioned.
Any help is appreciated.
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>
Im trying to generate report but all im getting is this:
The PDF output I wanted to print out date from my database but instead im only getting this one word. I think it has to do with php error but im not able to find my mistake. im new to this, i hope u guys can help me out. thanks.
My model:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class GeneratePdfController extends CI_Controller {
function index()
{
$this->load->model('model_user');
$this->load->library('pdf');
$post_id = $this->uri->segment(3);
$x['data'] = $this->model_user->get_user_by_nip($post_id);
$html = $this->load->view('GeneratePdfView', $x, [], true);
$this->pdf->createPDF($html, 'mypdf', false);
}
}
?>
My View file
<?php
$b = $data->row_array();
?>
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="utf-8">
<title>Create PDF from View in CodeIgniter Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1 class="text-center bg-info">Generate PDF from View using DomPDF</h1>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Nama</th>
<th>Nip Baru</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><?php echo $b['n']; ?></td>
<td><?php echo $b['nipBaru']; ?></td>
</tr>
<tbody>
</table>
</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.
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
when ever i am putting all the style in the style tag it is working fine but if i put those codes in an external stylesheet it is not showing any style in frontend.
<!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 $title; ?></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<th>post ID</th>
<th>post title</th>
<th>post Description</th>
<th>Author</th>
<th>Date</th>
</tr>
<?php
foreach($posts as $post)
{
echo "
<tr>
<td>".$post->Post_id."</td>
<td>".$post->post_title."</td>
<td>".$post->Post_description."</td>
<td>".$post->author."</td>
<td>".$post->date."</td>
</tr>
" ;
}
?>
</table>
<body>
</body>
</html>
and my external stylesheet is
/* CSS Document */
table{
width:1000px;
text-align:center;
margin:auto;
}
th{
background:#0CC;
animation-direction:normal;
height:50px;
}
td{
height:50px;
background:#396;
color:#FFF;
}
i donot understand what is wrong.
Your HTML <table> should be placed between the <body></body>.
Ummm, why is the table tag in the head part? There you should place only meta data, script data and all like, as far as I know / meta tags, script tags, title tag, link to bootstrap for example /. You should place your table tag in the body part and everything should be fine. Remember, the part in the head is NOT visible on you web page, only the things you put in the body. Hope that fixes your problem. :)
Try this:
<!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 $title; ?></title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<th>post ID</th>
<th>post title</th>
<th>post Description</th>
<th>Author</th>
<th>Date</th>
</tr>
<?php
foreach($posts as $post)
{
echo "
<tr>
<td>".$post->Post_id."</td>
<td>".$post->post_title."</td>
<td>".$post->Post_description."</td>
<td>".$post->author."</td>
<td>".$post->date."</td>
</tr>
" ;
}
?>
</table>
</body>
</html>