I am a fresh graduate I am studying Codeigniter for the first time and I am having a hard time pls help me to fix my issue. I created a system that records employees information. I included a live search in my code. There are no error in syntax but there is no results shown. Below is my code.
Here is the controller. It's file name is Crud.php
Controller
public function fetch()
{
$output = '';
$query = '';
if($this->input->post('query'))
{
$query = $this->input->post('query');
}
$data = $this->Crudmodel->fetch();
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
';
if($data->num_rows() > 0)
{
foreach($data->result() as $row)
{
$output .= '
<tr>
<td>'.$row->fname.'</td>
<td>'.$row->lname.'</td>
<td>'.$row->job_title.'</td>
</tr>
';
}
}
else
{
$output .= '<tr>
<td colspan="5">No Data Found</td>
</tr>';
}
$output .= '</table>';
echo $output;
}
Here is the model. File name: Crudmodel.php
Model
public function fetch_data($query){
$this->db->select("*");
$this->db->from("employees");
if($query != ''){
$this->db->or_like('fname', $query);
$this->db->or_like('lname', $query);
$this->db->or_like('job_title', $query);
}
$this->db->order_by('id');
return $this->db->get();
}
View
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Employee Registation</h2>
</div><br>
<div class="pull-right">
<a class="btn btn-success" href="<?php echo base_url('crud/create') ?>"> Add Employee</a>
<a type="button" class="btn btn-danger" href="crud/logout">Logout</a>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Search Employee" class="form-control" />
</div>
</div>
<div id="result"></div>
<div style="clear:both"></div>
<table class="table table-bordered">
<thead>
<tr>
<!-- <th>Full Name</th> -->
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $employees)
{
?>
<tr>
<td> <?php echo $employees->fname; ?></td>
<td> <?php echo $employees->lname; ?></td>
<td> <?php echo $employees->job_title; ?></td>
<td>
<form method="DELETE" action="<?php echo base_url('crud/delete/'.$employees->id); ?>">
<a class="btn btn-info" href="<?php echo base_url('crud/show/'.$employees->id) ?>"> View</a>
<a class="btn btn-primary" href="<?php echo base_url('crud/edit/'.$employees->id) ?>"> Edit</a>
<button type="submit" class="btn btn-danger"> Delete</button>
</form>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
<script>
$(document).ready(function () {
load_data();
function load_data(query)
{
$.ajax({
url: "<?php echo base_url('crud/fetch'); ?>",
method: "POST",
data: {query: query},
success: function (data) {
$('#result').html(data);
}
})
}
$('#search_text').keyup(function () {
var search = $(this).val();
if (search != '')
{
load_data(search);
} else
{
load_data();
}
});
});
</script>
Please help me to figure it out. Your help will be appreciated!
First, in your controller you are trying to call a method that may not exist:
$data = $this->Crudmodel->fetch();
Because in your model the method is named "fetch_data". So I think you intend to do this:
$data = $this->Crudmodel->fetch_data();
Second, you are not passing the query parameter to your model's method. It should be like this:
$data = $this->Crudmodel->fetch_data( $query );
These are two essential things that should help get you started.
Also note that it is not shown if crudmodel is loaded. You may need:
$this->load->model('crudmodel');
When you have a Crudmodel loaded, you don't need to uppercase your object usage. So in the end, you should probably have this line:
$data = $this->crudmodel->fetch_data( $query );
Besides the problems I pointed out in my other answer, I thought I'd help by cleaning things up a bit. Although not tested, this might help:
How about this:
Controller
public function fetch()
{
$data = $this->crudmodel->fetch_data();
echo $this->load->view('snippet', ['data' => $data], TRUE );
}
New view snippet.php
$output = '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
';
if( ! empty( $data ) )
{
foreach($data as $row)
{
$output .= '
<tr>
<td>'.$row->fname.'</td>
<td>'.$row->lname.'</td>
<td>'.$row->job_title.'</td>
</tr>
';
}
}
else
{
$output .= '<tr>
<td colspan="5">No Data Found</td>
</tr>';
}
$output .= '</table>';
echo $output;
Model
public function fetch_data()
{
$query = $this->input->post('query');
$this->db->from("employees");
if( ! empty($query) )
{
$this->db->or_like('fname', $query);
$this->db->or_like('lname', $query);
$this->db->or_like('job_title', $query);
}
$this->db->order_by('id','ASC');
$data = $this->db->get();
if( $data->num_rows() > 0 )
return $data->result();
return NULL;
}
In your existing view
<script>
$(document).ready(function () {
load_data();
function load_data(query)
{
if(query == undefined)
query = '';
$.ajax({
url: "<?php echo site_url('crud/fetch'); ?>",
method: "POST",
data: {'query': query},
dataType: "html",
success: function (data) {
$('#result').html(data);
}
})
}
$('#search_text').keyup(function () {
var search = $(this).val();
if (search != '')
{
load_data(search);
} else
{
load_data();
}
});
});
</script>
Related
Trying to create/learn ajax search results using Laravel. Im at the following stage where I can get the data from the DB but the query string appears to not be captured into the controller and querying the data. I expect its an issue with my Ajax or where I am posting the data from the view to the URL. I am new to Laravel so any advice will be welcome. Thanks
search.blade.php
<form class="navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-lightblue border-0 small text-white border-dark" name="search" id="search" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-success" type="button"></button>
</form>
<div class="col-md-12">
<table class="table table-hover table-responsive-sm">
<thead class="thead-dark">
<tr>
<th scope="col">Total Data : <span id="total_records"></span></th>
<th scope="col">Company Name</th>
<th scope="col">Immediate Contact</th>
<th scope="col">Address</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('search.action') }}",
//url: 'user-figures/action',
method: 'GET',
data: {"query":query},
dataType:'json',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
}
});
</script>
Controller
public function ajaxindex()
{
return view('search.index');
}
public function ajaxaction(Request $request)
{
if($request->ajax())
{
$total_row = '';
$output = '';
$query = $request->get('query');
if($query != '')
{
$data = figures::where('name', 'like', '%'.$query.'%')
->get();
}
else
{
$data = figures::orderBy('id', 'desc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '
<tr>
<td>'.$row->name.'</td>
<td>poopppp</td>
</tr>
';
}
}
else
{
$output = '
<tr>
<td colspan="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row
);
return response()->json($data);
// $str_data = implode(" ", $data);
// echo $str_data;
}
}
web.php
Route::get('/search', 'figuresController#ajaxindex')->name('search');
Route::get('/search/action', 'figuresController#ajaxaction')->name('search.action');
I used your code and followed this tutorial https://www.cloudways.com/blog/live-search-laravel-ajax/ and have got this to work. Here is my full code and hopefully you can figure out how to get yours working
Search controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use App\Product;
class SearchController extends Controller
{
public function index()
{
return view('search.index');
}
public function search(Request $request)
{
if($request->ajax())
{
$output="";
$products=DB::table('products')->where('title','LIKE','%'.$request->search."%")->get();
if($products)
{
foreach ($products as $key => $product) {
$output.='<tr>'.
'<td>'.$product->id.'</td>'.
'<td>'.$product->title.'</td>'.
'<td>'.$product->description.'</td>'.
'<td>'.$product->price.'</td>'.
'</tr>';
}
return Response($output);
}
}
}
}
Just one view file
<!DOCTYPE html>
<html>
<head>
<meta name="_token" content="{{ csrf_token() }}">
<title>Live Search</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Products info </h3>
</div>
<div class="panel-body">
<div class="form-group">
<input type="text" class="form-controller" id="search" name="search"></input>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#search').on('keyup',function(){
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{URL::to('search/action')}}',
data:{'search':$value},
success:function(data){
$('tbody').html(data);
}
});
})
</script>
<script type="text/javascript">
$.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>
</body>
</html>
Routes
Route::get('/search','SearchController#index');
Route::get('/search/action','SearchController#search')->name('search.action');
view:
<script>
$(document).ready(function(){
$(".uid").click(function(){
jid = $(".jid").attr("id");
uid = $(':checked').map(function() {
return this.id;
}).get().join(',');
$.ajax({
type:"POST",
data:{"jid":jid, "uid":uid},
url:"<?php echo base_url(); ?>shortlist",
success:function(data){
$(".stage_shortlist").html(data);
}
});
});
$(document).on("click",".uid_short",function(){
jid_short = $(".jid_short").attr("id");
uid_short = $(':checked').map(function() {
return this.id;
}).get().join(',');
alert(jid_short);
alert(uid_short);
});
});
</script>
<h2>Received</h2>
<section>
<table class="table table-hover js-basic-example dataTable table-custom m-b-0">
<thead>
<tr>
<th>Name</th>
<th>Shortlist</th>
</tr>
</thead>
<tbody>
<?php
$this->db->select('*');
$this->db->from('upload_detail');
$where = "jid='".$row['job_id']."' and share_with_emp='1'";
$this->db->where($where);
$sql = $this->db->get();
if($sql->num_rows() > 0)
{
$result = $sql->result_array();
foreach($result as $recieve)
{
?>
<tr>
<td><?php echo $recieve['fname']; ?></td>
<td>
<div class="fancy-checkbox">
<label>
<input type="hidden" name="jid" class="jid" id="<?php echo $recieve['jid']; ?>"/>
<?php
if($recieve['shortlist']=='1')
{
echo '<input type="checkbox" name="uid" id="" class="uid" checked disabled><span>Shortlist</span>';
}
else
{
echo '<input type="checkbox" name="uid" id="'.$recieve["uid"].'" class="uid"><span>Shortlist</span>';
}
?>
</label>
</div>
</td>
</tr>
<?php
}
}
else
{
echo "<p>No resume Found</p>";
}
?>
</tbody>
</table>
</section>
<h2>Shortlisted</h2>
<section>
<table class="table table-hover js-basic-example dataTable table-custom m-b-0">
<thead>
<tr>
<th>Name</th>
<th>Shortlist</th>
</tr>
</thead>
<tbody class="stage_shortlist">
<?php
$this->db->select('*');
$this->db->from('upload_detail');
$where = "jid='".$row['job_id']."' and shortlist='1'";
$this->db->where($where);
$sql_short = $this->db->get();
$result_short = $sql_short->result_array();
foreach($result_short as $short)
{
?>
<tr>
<td><?php echo $short['fname']; ?></td>
<td>
<div class="fancy-checkbox">
<label>
<input type="hidden" name="jid_short" class="jid_short" id="<?php echo $short['jid']; ?>"/>
<?php
if($short['interview']=='1')
{
echo '<input type="checkbox" name="uid_short" id="" class="uid_short" checked disabled><span>Shortlist</span>';
}
else
{
echo '<input type="checkbox" name="uid_short" id="'.$short["uid"].'" class="uid_short"><span>Shortlist</span>';
}
?>
</label>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</section>
controller:
<?php
public function shortlist()
{
$jid = $this->input->post('jid');
$uid = explode(",",$this->input->post('uid'));
$data = array('shortlist'=>'1');
foreach($uid as $user_id)
{
$where = "uid='".$user_id."' and jid='".$jid."'";
$this->db->where($where);
$sql = $this->db->update('upload_detail',$data);
}
if($sql==true)
{
$this->db->select('*');
$this->db->from('upload_detail');
$where = "jid='".$jid."' and shortlist='1'";
$this->db->where($where);
$sql_short = $this->db->get();
$result_short = $sql_short->result_array();
foreach($result_short as $short)
{
?>
<tr>
<td><?php echo $short['fname']; ?></td>
<td>
<div class="fancy-checkbox">
<label>
<input type="hidden" name="jid_short" class="jid_short" id="<?php echo $short['jid']; ?>"/>
<?php
if($short['interview']=='1')
{
echo '<input type="checkbox" name="uid_short" id="" class="uid_short" checked disabled><span>Shortlist</span>';
}
else
{
echo '<input type="checkbox" name="uid_short" id="'.$short["uid"].'" class="uid_short"><span>Shortlist</span>';
}
?>
</label>
</div>
</td>
</tr>
<?php
}
}
else
{
echo '<p>Unable to proceed!</p>';
}
}
?>
In this code I am update shortlist value 1 onclick uid which is the part of recieved heading section and response call from shortlist controller which is work perfectly but problem is that when I click on class uid_short it alert multiple value inside the alert(uid_short); I don't know what where am I doing wrong? Please help me to solve this issue.
Thank You
im trying to loaded the vehicle details using ajax and data modal dialog. but seem that the data does not loaded correctly and i cant seem to figured out what is wrong with codes.
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
data modal dialog used to display the details.
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Vehicles Details</h4>
</div>
<div class="modal-body" id="vehicle_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
this is the select.php that i used
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms");
$query = "SELECT * FROM vehicle WHERE id_vehicle = '".$_POST["vehicle_id"]."'";
$result = mysqli_query($link, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Plate No</label></td>
<td width="70%">'.$row["plateNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Number</label></td>
<td width="70%">'.$row["engineNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Capacity</label></td>
<td width="70%">'.$row["engineCapacity_vehicle"].'</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
script used
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("id_vehicle");
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
Have a look at your select.php file:
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms"); <========
TYPO. It should've been:
$link=mysqli_connect("localhost","root","root","vms");
Also,
Add a data-vehicleid attribute to your view_data button:
<td><input type="button" data-vehicleid="<?php echo $row["id_vehicle"]; ?>" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data " /></td>
And then change your script to receive that attribute value:
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("data-vehicleid"); <=====
$.ajax({
....
});
});
});
</script>
Right now, you've set it to :
var vehicle_id = $(this).attr("id_vehicle");
which won't work as you don't have an attribute called id_vehicle="..." on that button. I'm guessing you meant attr("id");
Add this code on your while loop
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" data-vehicle-id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
And in script change your id var vehicle_id = $(this).attr("data-vehicle-id");
Hope this code work
in order to get the id of this this you need to add onclick
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" onclick="getId(this.id)"/></td>
function getId(clicked_id){
var vehicle_id = clicked_id;
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
}
Here is updated code for view:
view:
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td>more</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
Script:
<script>
$('#dataModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var vehicle_id = button.data('vehicle_id')
var modal = $(this)
$.ajax({
url:"select.php",
method:"POST",
data:{vehicle_id:vehicle_id},
success:function(data){
modal.find('.modal-body').html('No Response');
modal.find('.modal-body').html(data);
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
</script>
I have the below table:
<input type="search" class="light-table-filter" id="search" data-
table="order-table" placeholder="Kerko">
<table border="0" class=" table table-striped table-hover table-bordered table-condensed tableDemo bordered order-table table" >
<tr id="header">
<th>ID</th>
<th>emri</th>
<th>mbiemri</th>
<th>username</th>
<th>password</th>
<th>email</th>
<th>Nr Tel</th>
<th>ACTION</th>
</tr>
<?php
if(count($records)){
$i = 1;
$eachRecord= 0;
foreach($records as $key=>$eachRecord){
?>
<tr id="<?=$eachRecord['ID'];?>">
<td><?=$eachRecord['ID'];?></td>
<td class="Emri"><?=$eachRecord['Emri'];?></td>
<td class="Mbiemri"><?=$eachRecord['Mbiemri'];?></td>
<td class="Username"><?=$eachRecord['Username'];?></td>
<td class="Password"><?=$eachRecord['Password'];?></td>
<td class="Email"><?=$eachRecord['Email'];?></td>
<td class="nrtel"><?=$eachRecord['nrtel'];?></td>
<td>
<img src="" class="eimage"> <span class="glyphicon glyphicon-pencil"></span>
<img src="" class="dimage"> <span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
<?php }
}
?>
</table>
Also,i want to make a real time search and i have the below jquery code:
<script type="text/javascript">
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
Everything it works perfectly.But I want to search all rows except the header of table that has id #header.I can't change the jquery code.Also I have tried some different jquery but only the above jquery code works perfect for me. The only issue is that the code when I write something,it find the row but the header hidded.
Good afternoon Team,
I've been searching the internet/stackoverflow for a long time now and i am unable to wrap my head around one issue that keeps bothering me for quite some time.Tried to avoid it ( you don't want to see my browser history).
The thing is , this issue leads to another and maybe some advices from you might help.
Before TL;DR - here is the issue:
Ingredients:
1. 1 database (phpmyadmin)
2. 1 table
3. 3 files(filter.html/ raport.php / export.php )
Issue that leads to another :
What i am trying to do is , i want to filter the results from the table by date-range( which works ) and also by the dropdown (which does not work).
Please see code from filter.html:
<html>
<head>
<title> Raport</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center"> Raport</h2>
<h3 align="center">Order Data</h3><br />
<div class="col-md-3">
<input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />
</div>
<div class="col-md-3">
<input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />
</div>
<div class="col-md-4">
<select type="text" name="team" id="team" class="form-control ">
<option value="">Select team</option>
<option value="pt">pt</option>
<option value="it">it</option>
</select>
</div>
<div class="col-md-4">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
</div>
<form method="post" action="export.php" id="export_form">
<input type="hidden" name="from_date" id="from_date1" class="form-control" />
<input type="hidden" name="to_date" id="to_date1" class="form-control" />
<input type="submit" name="export" id="export_btn" class="btn btn-success" value="Export" />
</form>
<div style="clear:both"></div>
<br />
<div id="order_table">
<table class="table table-bordered">
<tr>
<th width="5%">Id</th>
<th width="30%">name1</th>
<th width="43%">name2</th>
<th width="43%">name3</th>
<th width="10%">name4</th>
<th width="12%">name5</th>
<th width="12%">name6</th>
<th width="12%">name7</th>
<th width="12%">name8</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['name1'];?></td>
<td><?php echo $row['name2'];?></td>
<td><?php echo $row['name3'];?></td>
<td><?php echo $row['name4'];?></td>
<td><?php echo $row['name5'];?></td>
<td><?php echo $row['name6'];?></td>
<td><?php echo $row['name7'];?></td>
<td><?php echo $row['name8'];?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#from_date").datepicker({
onSelect: function(dateText, inst){
$('#from_date1').val(dateText);
}
});
$("#to_date").datepicker({
onSelect: function(dateText, inst){
$('#to_date1').val(dateText);
}
});
});
if($("#from_date").val() != ''){
$('#from_date1').val($("#from_date").val());
}
if($("#to_date").val() != ''){
$('#to_date1').val($("#to_date").val());
}
$('#filter').click(function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
if(from_date != '' && to_date != '')
{
$.ajax({
url:"raport.php",
method:"POST",
data:{from_date:from_date, to_date:to_date},
success:function(data)
{
$('#order_table').html(data);
}
});
}
else
{
alert("Please Select Date");
}
});
});
</script>
Please see code from raport.php:
<?php
if(isset($_POST["from_date"], $_POST["to_date"]))
{
$connect = mysqli_connect("localhost", "root", "", "database");
$output = '';
$query = "
SELECT * FROM fp_data
WHERE submitdate BETWEEN '".$_POST["from_date"]."' AND '".$_POST["to_date"]."'
";
$result = mysqli_query($connect, $query);
$output .= '
<table class="table table-bordered">
<tr>
<th width="5%">Id</th>
<th width="30%">name1</th>
<th width="43%">name2</th>
<th width="43%">name3</th>
<th width="10%">name4</th>
<th width="12%">name5</th>
<th width="12%">name6</th>
<th width="12%">name7</th>
<th width="12%">name8</th>
</tr>
';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["name1"].'</td>
<td>'.$row["name2"].'</td>
<td>'.$row["name3"].'</td>
<td>'.$row["name4"].'</td>
<td>'.$row["name5"].'</td>
<td>'.$row["name6"].'</td>
<td>'.$row["name7"].'</td>
<td>'.$row["name8"].'</td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="12">No data found</td>
</tr>
';
}
$output .= '</table>';
echo $output;
}
?>
Please see code from export.php:
<?php
//export.php
$connect = mysqli_connect("localhost", "root", "", "database");
$output = '';
if(isset($_POST["export"]))
{
$from_date = $_POST["from_date"];
if(!empty($from_date)) {
$from_date = $from_date." 00:00:00";
} else{
$from_date = date("Y-m-d")." 00:00:00";
}
$to_date = $_POST["to_date"];
if(!empty($to_date)) {
$to_date = $to_date." 23:59:59";
} else {
$to_date = date("Y-m-d")." 23:59:59";
}
$query = "SELECT * FROM fp_data WHERE submitdate >= '$from_date' AND submitdate <= '$to_date'";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
$output .= '
<table class="table" bordered="1" style="border: 1px solid #000">
<tr>
<th>id</th>
<th>name1</th>
<th>name2</th>
<th>name3</th>
<th>name4</th>
<th>name5</th>
<th>name6</th>
<th>name7</th>
<th>name8</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["name1"].'</td>
<td>'.$row["name2"].'</td>
<td>'.$row["name3"].'</td>
<td>'.$row["name4"].'</td>
<td>'.$row["name5"].'</td>
<td>'.$row["name6"].'</td>
<td>'.$row["name7"].'</td>
<td>'.$row["name8"].'</td>
</tr>
';
}
$output .= '</table>';
header('Content-Type: application/xls');
header('Content-Disposition: attachment; filename=raportlte.xls');
echo $output;
}
}
?>
The other issue is how do i export it?
All in all is that i want to filter the data by date-range and also by the dropdown and then export what is in the table to excel.
Any help is apreciated.