Ng Jo-Yi
asked on
i need a query to display my output in table form
Upload2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Import CSV File into Jquery Datatables using PHP Ajax</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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.box
{
max-width:600px;
width:90%;
margin: 0 auto;;
}
</style>
</head>
<body>
<?php include ("db.php");?>
<div class="container">
<br />
<h3 align="center">Mark distribution Sheet</h3>
<h3 align="center">Cisco Discovery 1</h3>
<br />
<form action="import2.php" method="post" enctype="multipart/form-da
<div class="col-md-3">
<br />
<label>Add More Data</label>
</div>
<div class="col-md-4">
<input type="file" name="csv_file">
</div>
<div class="col-md-5">
<input type="submit" value="Upload">
</div>
<div style="clear:both"></div>
</form>
<br />
<br />
<div class="table-responsive" >
<table class="table table-striped table-bordered" id="data-table">
<thead>
<tr>
<th width=10%>Student ID</th>
<th width=14%> Name</th>
<th width=2%> Sem</th>
<th> Sec</th>
<th> Chapter_Exam</th>
<th width=15%> Practice skills</th>
<th> Assignment</th>
<th> Final_Exam</th>
<th> Total </th>
<th> Grade</th>
<th> C01</th>
<th> C02</th>
<th >C03</th>
<th >C04</th>
<th >C05</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>AM1701001000</th>
<th>AKMAL NABIL BIN MUHAMAD ISA</th>
<th>4</th>
<th>1</th>
<th>82</th>
<th>92</th>
<th>90</th>
<th>67</th>
<th>80</th>
<th>A-</th>
<th>83</th>
<th>83</th>
<th>83</th>
<th>83</th>
<th>92</th>
<th>Pass</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function
$('#upload_csv').on('submi
event.preventDefault();
$.ajax({
url:"import2.php";
method:"POST";
data:new FormData(this);
dataType:'json';
contentType:false;
cache:false;
processData:false;
success:function(jsonData)
{
$('#csv_file').val('');
$('#data-table').DataTable
data : jsonData,
columns : [
{ data : "student_id" };
{ data : "name" };
{ data : "Sem" };
{ data : "Sec" };
{ data : "Chapter_Exam" };
{ data : "Practice skills" };
{ data : "Assignment" };
{ data : "Final_Exam" };
{ data : "Total" };
{ data : "Grade" };
{ data : "C01" };
{ data : "C02" };
{ data : "C03" };
{ data : "C04" };
{ data : "C05" };
{ data : "Status" }
]
});
}
});
});
});
</script>
</body>
</html>
import.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
if ( ! empty($_FILES['csv_file'][
$file_data = fopen($_FILES['csv_file'][
fgetcsv($file_data);
while($row = fgetcsv($file_data) ) {
if( count($row)>15):
//now you know you have at least 16 element
$data[] = array(
'student_id' => $row[0],
'name' => $row[1],
'Sem' => $row[2],
'sec' => $row[3],
'Chapter_Exam' => $row[4],
'Practice skill' => $row[5],
'Assignment' => $row[6],
'Final_Exam' => $row[7],
'Total' => $row[8],
'Grade' => $row[9],
'C01' => $row[10],
'C02' => $row[11],
'C03' => $row[12],
'C04' => $row[13],
'C05' => $row[14],
'Status' => $row[15]
);
endif;
};
echo json_encode($data);
}
Output shown as below but what the requirement is the output must be in table form and without the bracket or quotation:
[{"student_id":"AM17010010
grade.csv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Import CSV File into Jquery Datatables using PHP Ajax</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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.box
{
max-width:600px;
width:90%;
margin: 0 auto;;
}
</style>
</head>
<body>
<?php include ("db.php");?>
<div class="container">
<br />
<h3 align="center">Mark distribution Sheet</h3>
<h3 align="center">Cisco Discovery 1</h3>
<br />
<form action="import2.php" method="post" enctype="multipart/form-da
<div class="col-md-3">
<br />
<label>Add More Data</label>
</div>
<div class="col-md-4">
<input type="file" name="csv_file">
</div>
<div class="col-md-5">
<input type="submit" value="Upload">
</div>
<div style="clear:both"></div>
</form>
<br />
<br />
<div class="table-responsive" >
<table class="table table-striped table-bordered" id="data-table">
<thead>
<tr>
<th width=10%>Student ID</th>
<th width=14%> Name</th>
<th width=2%> Sem</th>
<th> Sec</th>
<th> Chapter_Exam</th>
<th width=15%> Practice skills</th>
<th> Assignment</th>
<th> Final_Exam</th>
<th> Total </th>
<th> Grade</th>
<th> C01</th>
<th> C02</th>
<th >C03</th>
<th >C04</th>
<th >C05</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>AM1701001000</th>
<th>AKMAL NABIL BIN MUHAMAD ISA</th>
<th>4</th>
<th>1</th>
<th>82</th>
<th>92</th>
<th>90</th>
<th>67</th>
<th>80</th>
<th>A-</th>
<th>83</th>
<th>83</th>
<th>83</th>
<th>83</th>
<th>92</th>
<th>Pass</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function
$('#upload_csv').on('submi
event.preventDefault();
$.ajax({
url:"import2.php";
method:"POST";
data:new FormData(this);
dataType:'json';
contentType:false;
cache:false;
processData:false;
success:function(jsonData)
{
$('#csv_file').val('');
$('#data-table').DataTable
data : jsonData,
columns : [
{ data : "student_id" };
{ data : "name" };
{ data : "Sem" };
{ data : "Sec" };
{ data : "Chapter_Exam" };
{ data : "Practice skills" };
{ data : "Assignment" };
{ data : "Final_Exam" };
{ data : "Total" };
{ data : "Grade" };
{ data : "C01" };
{ data : "C02" };
{ data : "C03" };
{ data : "C04" };
{ data : "C05" };
{ data : "Status" }
]
});
}
});
});
});
</script>
</body>
</html>
import.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
if ( ! empty($_FILES['csv_file'][
$file_data = fopen($_FILES['csv_file'][
fgetcsv($file_data);
while($row = fgetcsv($file_data) ) {
if( count($row)>15):
//now you know you have at least 16 element
$data[] = array(
'student_id' => $row[0],
'name' => $row[1],
'Sem' => $row[2],
'sec' => $row[3],
'Chapter_Exam' => $row[4],
'Practice skill' => $row[5],
'Assignment' => $row[6],
'Final_Exam' => $row[7],
'Total' => $row[8],
'Grade' => $row[9],
'C01' => $row[10],
'C02' => $row[11],
'C03' => $row[12],
'C04' => $row[13],
'C05' => $row[14],
'Status' => $row[15]
);
endif;
};
echo json_encode($data);
}
Output shown as below but what the requirement is the output must be in table form and without the bracket or quotation:
[{"student_id":"AM17010010
grade.csv
ASKER
ok what i'm trying to say actually is like tis
1. upload1.html file need to show the data in datatable . it's being settle thx for help but what i need now is as lecturer wanna we need to display total 2 data that is in upload1.html and in import.php is display data of csv.file both is in table form.
1. upload1.html file need to show the data in datatable . it's being settle thx for help but what i need now is as lecturer wanna we need to display total 2 data that is in upload1.html and in import.php is display data of csv.file both is in table form.
The information you need is in the datatables manual link I posted as item #3. You need to take the JSON from your CSV import and use that as the datasource for your table. Read how to initialize the data table using data stored in an object.
https://datatables.net/manual/data/#Objects
https://datatables.net/manual/data/#Objects
ASKER
ok thx but the link given is it put on import.php
It should be put where ever you need to initialize your datatable.
ASKER
if display data in import.php and upload.html use datatable form impossible is it as in upload.html able to display data as datatable but ;
import.php data display as below lecturer requirement is if possible make both side into datatable
[{"student_id":"AM17010010
import.php data display as below lecturer requirement is if possible make both side into datatable
[{"student_id":"AM17010010
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
1) http://www.catb.org/esr/faqs/smart-questions.html. Yes, the whole thing.
2) Use code blocks.
3) https://datatables.net/manual/data/