is there a hint of query to add to display the output in table form

import.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);


if ( ! empty($_FILES['csv_file']['name']) ) {

    $file_data = fopen($_FILES['csv_file']['name'], 'r');
    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);

Open in new window


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-data">
<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('submit', function(event){
  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>

Open in new window

grade.csv
Ng Jo-YiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
Please try to edit your question and put the code inside [code]YOUR CODE HERE[/code] tags and try to clarify more what you want to achieve exactly.

The title section it just to describe the nature of the problem you face, then you need to describe as much clear as possible what you're facing as a problem and what you want to achieve so you will get a quick and clear answer as possible.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Since you are using the datatables, your php only needs to output json on a separate page. Then on the page where the table exists you make an Ajax call to the php page that generates json and that is used to populate the table.

Check out the example datatables provides for Ajax. Try first to use the identical example to make sure your set up is correct. Then use some fake test data generated by php and finally your real data and table layout.
Ng Jo-YiAuthor Commented:
hmm can u explain briefly as i dont really get it
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I placed your code in a code snippet box for you.  http://support.experts-exchange.com/customer/en/portal/articles/349945-how-to-add-a-code-snippet-to-a-question-or-comment?b_id=44

After I did that, your question makes a little more sense although I don't know what the actual problem is you are having.

Can you give us a link to your test page?  Make sure you don't have any private data showing.  If you want to trouble shoot your issue on your own, click your f12 button and review any errors in the browser console.

Otherwise, can you explain the details of the error you are seeing with your current code?
Zakaria AcharkiAnalyst DeveloperCommented:
As a first view I could see that your JS will fail for an unexpected token ; in almost all the rows of the ajax function, you need to replace them all by comma's like :

$.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" }
			]
		});
	}
});

Open in new window

Ng Jo-YiAuthor Commented:
ok i get it what u mean but what i needed is the output of json  supposedly be in table form but not as below:
[{"student_id":"AM1701001001","name":"AMIR NAQIUDDIN BIN ABDULLAH","Sem":"4","sec":"1","Chapter_Exam":"49","Practice skill":"50","Assignment":"77","Final_Exam":"30","Total":"47","Grade":"C-","C01":"51","C02":"51","C03":"52","C04":"51","C05":"50","Status":"Pass"},{"student_id":"AM1701001002","name":"JOHAN ARIFF BIN MUHD ZAKRI","Sem":"4","sec":"1","Chapter_Exam":"66","Practice skill":"40","Assignment":"50","Final_Exam":"34","Total":"45","Grade":"C-","C01":"48","C02":"48","C03":"41","C04":"48","C05":"40","Status":"Pass"},{"student_id":"AM1701001003","name":"MOHAMAD AIRIL BIN SHAMSU ","Sem":"4","sec":"1","Chapter_Exam":"70","Practice skill":"48","Assignment":"60","Final_Exam":"22","Total":"44","Grade":"D","C01":"50","C02":"50","C03":"43","C04":"50","C05":"48","Status":"Pass"},{"student_id":"AM1701001004","name":"MOHAMAD NAIM BIN OTHMAN","Sem":"4","sec":"1","Chapter_Exam":"70","Practice skill":"55","Assignment":"83","Final_Exam":"55","Total":"64","Grade":"B-","C01":"66","C02":"66","C03":"64","C04":"66","C05":"55","Status":"Pass"},{"student_id":"AM1701001005","name":"MOHAMAD FIRDAUS BIN ABDUL","Sem":"4","sec":"1","Chapter_Exam":"46","Practice skill":"48","Assignment":"75","Final_Exam":"32","Total":"47","Grade":"C-","C01":"50","C02":"50","C03":"52","C04":"50","C05":"48","Status":"Pass"},{"student_id":"AM1701001006","name":"MOHAMAD IKHWAN BIN JOHAR","Sem":"4","sec":"1","Chapter_Exam":"76","Practice skill":"50","Assignment":"80","Final_Exam":"57","Total":"64","Grade":"B-","C01":"66","C02":"66","C03":"62","C04":"66","C05":"50","Status":"Pass"},{"student_id":"AM1701001007","name":"MOHAMMAD AIMAN BIN ABDULLAH","Sem":"4","sec":"1","Chapter_Exam":"58","Practice skill":"41","Assignment":"83","Final_Exam":"41","Total":"53","Grade":"C","C01":"56","C02":"56","C03":"55","C04":"56","C05":"41","Status":"Pass"},{"student_id":"AM1701001008","name":"MOHAMMAD NASYRIK BIN OTHMAN","Sem":"4","sec":"1","Chapter_Exam":"49","Practice skill":"44","Assignment":"74","Final_Exam":"36","Total":"47","Grade":"C-","C01":"50","C02":"50","C03":"51","C04":"50","C05":"44","Status":"Pass"},{"student_id":"AM1701001009","name":"MOHAMMAD SYAMIL BIN SUKIMI","Sem":"4","sec":"1","Chapter_Exam":"53","Practice skill":"0","Assignment":"12","Final_Exam":"20","Total":"21","Grade":"F","C01":"21","C02":"21","C03":"11","C04":"21","C05":"0","Status":"Fail"}]
Zakaria AcharkiAnalyst DeveloperCommented:
Your JSON looks fine, you need just to adjust two lines in your Import.php file and it should work fine :

$data[] = array(
	'student_id'  => $row[0],
	'name'  => $row[1],
	'Sem'  => $row[2], 
	'sec'  => $row[3],     		//<<<==== This line "sec" should be "Sec"
	'Chapter_Exam'  => $row[4],
	'Practice skill'  => $row[5],   //<<<==== This line "skill" should be "skills"
	'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]
);

Open in new window


Here is a sample of your datatable filled by your json after adjusting the names :

https://codepen.io/acharki-zakaria/pen/BvWmod
Ng Jo-YiAuthor Commented:
ok thx i have changed but the output of json still display as
[{"student_id":"AM1701001001","name":"AMIR NAQIUDDIN BIN ABDULLAH","Sem":"4","Sec":"1","Chapter_Exam":"49","Practice skill":"50","Assignment":"77","Final_Exam":"30","Total":"47","Grade":"C-","C01":"51","C02":"51","C03":"52","C04":"51","C05":"50","Status":"Pass"},{"student_id":"AM1701001002","name":"JOHAN ARIFF BIN MUHD ZAKRI","Sem":"4","Sec":"1","Chapter_Exam":"66","Practice skill":"40","Assignment":"50","Final_Exam":"34","Total":"45","Grade":"C-","C01":"48","C02":"48","C03":"41","C04":"48","C05":"40","Status":"Pass"},{"student_id":"AM1701001003","name":"MOHAMAD AIRIL BIN SHAMSU ","Sem":"4","Sec":"1","Chapter_Exam":"70","Practice skill":"48","Assignment":"60","Final_Exam":"22","Total":"44","Grade":"D","C01":"50","C02":"50","C03":"43","C04":"50","C05":"48","Status":"Pass"},{"student_id":"AM1701001004","name":"MOHAMAD NAIM BIN OTHMAN","Sem":"4","Sec":"1","Chapter_Exam":"70","Practice skill":"55","Assignment":"83","Final_Exam":"55","Total":"64","Grade":"B-","C01":"66","C02":"66","C03":"64","C04":"66","C05":"55","Status":"Pass"},{"student_id":"AM1701001005","name":"MOHAMAD FIRDAUS BIN ABDUL","Sem":"4","Sec":"1","Chapter_Exam":"46","Practice skill":"48","Assignment":"75","Final_Exam":"32","Total":"47","Grade":"C-","C01":"50","C02":"50","C03":"52","C04":"50","C05":"48","Status":"Pass"},{"student_id":"AM1701001006","name":"MOHAMAD IKHWAN BIN JOHAR","Sem":"4","Sec":"1","Chapter_Exam":"76","Practice skill":"50","Assignment":"80","Final_Exam":"57","Total":"64","Grade":"B-","C01":"66","C02":"66","C03":"62","C04":"66","C05":"50","Status":"Pass"},{"student_id":"AM1701001007","name":"MOHAMMAD AIMAN BIN ABDULLAH","Sem":"4","Sec":"1","Chapter_Exam":"58","Practice skill":"41","Assignment":"83","Final_Exam":"41","Total":"53","Grade":"C","C01":"56","C02":"56","C03":"55","C04":"56","C05":"41","Status":"Pass"},{"student_id":"AM1701001008","name":"MOHAMMAD NASYRIK BIN OTHMAN","Sem":"4","Sec":"1","Chapter_Exam":"49","Practice skill":"44","Assignment":"74","Final_Exam":"36","Total":"47","Grade":"C-","C01":"50","C02":"50","C03":"51","C04":"50","C05":"44","Status":"Pass"},{"student_id":"AM1701001009","name":"MOHAMMAD SYAMIL BIN SUKIMI","Sem":"4","Sec":"1","Chapter_Exam":"53","Practice skill":"0","Assignment":"12","Final_Exam":"20","Total":"21","Grade":"F","C01":"21","C02":"21","C03":"11","C04":"21","C05":"0","Status":"Fail"}]
Ng Jo-YiAuthor Commented:
based on the requirement lecturer wanna is the output in json form should be in table form is there any way to do so anyway thx for help as due date on 23/12/18
Zakaria AcharkiAnalyst DeveloperCommented:
wanna is the output in json form should be in table form

That what you've already, when the JSON returned it should be populated in the datatable table :

Have you seen the working example here :

https://codepen.io/acharki-zakaria/pen/BvWmod
Ng Jo-YiAuthor Commented:
yeah i saw it thx for help its helpful  but how bout when click choose file to select which csv file to upload is there a way to make it in simple table form as well
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Keep in mind what datatables is doing is separating your phps/database and front end.

What I find helps with datatables is to look for one of their examples that is similar to yours such as https://datatables.net/examples/data_sources/js_array.html 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />

  
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script>
    var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
    [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
    [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
    [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
    [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
    [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
    [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
    [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
    [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
    [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
    [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
    [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
    [ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
    [ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
    [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
    [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
    [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
    [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
    [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
    [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
    [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
    [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
    [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
    [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
    [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
    [ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
    [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
    [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
    [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
    [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
    [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );
    </script>
</head>
<body>
<table id="example" class="display" width="100%"></table>
</body>
</html>

Open in new window

Now, start replacing your own data and note the errors you are getting
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />

  
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script>
    var dataSet = [{"student_id":"AM1701001001","name":"AMIR NAQIUDDIN BIN ABDULLAH","Sem":"4","Sec":"1","Chapter_Exam":"49","Practice skill":"50","Assignment":"77","Final_Exam":"30","Total":"47","Grade":"C-","C01":"51","C02":"51","C03":"52","C04":"51","C05":"50","Status":"Pass"},{"student_id":"AM1701001002","name":"JOHAN ARIFF BIN MUHD ZAKRI","Sem":"4","Sec":"1","Chapter_Exam":"66","Practice skill":"40","Assignment":"50","Final_Exam":"34","Total":"45","Grade":"C-","C01":"48","C02":"48","C03":"41","C04":"48","C05":"40","Status":"Pass"},{"student_id":"AM1701001003","name":"MOHAMAD AIRIL BIN SHAMSU ","Sem":"4","Sec":"1","Chapter_Exam":"70","Practice skill":"48","Assignment":"60","Final_Exam":"22","Total":"44","Grade":"D","C01":"50","C02":"50","C03":"43","C04":"50","C05":"48","Status":"Pass"},{"student_id":"AM1701001004","name":"MOHAMAD NAIM BIN OTHMAN","Sem":"4","Sec":"1","Chapter_Exam":"70","Practice skill":"55","Assignment":"83","Final_Exam":"55","Total":"64","Grade":"B-","C01":"66","C02":"66","C03":"64","C04":"66","C05":"55","Status":"Pass"},{"student_id":"AM1701001005","name":"MOHAMAD FIRDAUS BIN ABDUL","Sem":"4","Sec":"1","Chapter_Exam":"46","Practice skill":"48","Assignment":"75","Final_Exam":"32","Total":"47","Grade":"C-","C01":"50","C02":"50","C03":"52","C04":"50","C05":"48","Status":"Pass"},{"student_id":"AM1701001006","name":"MOHAMAD IKHWAN BIN JOHAR","Sem":"4","Sec":"1","Chapter_Exam":"76","Practice skill":"50","Assignment":"80","Final_Exam":"57","Total":"64","Grade":"B-","C01":"66","C02":"66","C03":"62","C04":"66","C05":"50","Status":"Pass"},{"student_id":"AM1701001007","name":"MOHAMMAD AIMAN BIN ABDULLAH","Sem":"4","Sec":"1","Chapter_Exam":"58","Practice skill":"41","Assignment":"83","Final_Exam":"41","Total":"53","Grade":"C","C01":"56","C02":"56","C03":"55","C04":"56","C05":"41","Status":"Pass"},{"student_id":"AM1701001008","name":"MOHAMMAD NASYRIK BIN OTHMAN","Sem":"4","Sec":"1","Chapter_Exam":"49","Practice skill":"44","Assignment":"74","Final_Exam":"36","Total":"47","Grade":"C-","C01":"50","C02":"50","C03":"51","C04":"50","C05":"44","Status":"Pass"},{"student_id":"AM1701001009","name":"MOHAMMAD SYAMIL BIN SUKIMI","Sem":"4","Sec":"1","Chapter_Exam":"53","Practice skill":"0","Assignment":"12","Final_Exam":"20","Total":"21","Grade":"F","C01":"21","C02":"21","C03":"11","C04":"21","C05":"0","Status":"Fail"}]
 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        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>
</head>
<body>
<table id="example" class="display" width="100%"></table>
</body>
</html>

Open in new window


Look at your js console by clicking the f12 key.  When I did this, I can get data returned with some small errors.

However, you said, "based on the requirement lecturer wanna is the output in json form should be in table form"  Does that mean you need to output a table in php without using datatables?  Otherwise, datatables is taking your json and injecting the rows to your table body.
Ng Jo-YiAuthor Commented:
what i mean is when select the choose file button have to select file to upload so when click the upload the data will display on separate page .
Ng Jo-YiAuthor Commented:
but the data of csv file that being import in order to  display on separate page also need to be in look like table form
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>  when select the choose file button have to select file to upload so when click the upload the data will display on separate page .

> but the data of csv file that being import in order to  display on separate page also need to be in look like table form

From what you are saying, you are able to upload your csv file to the server and what you need help with is converting your csv file to something that datatables can work with. Does that sound right?
Ng Jo-YiAuthor Commented:
yeah that what i mean
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.