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

Ng Jo-Yi
Ng Jo-Yi used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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.

Author

Commented:
hmm can u explain briefly as i dont really get it
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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 Developer
Distinguished Expert 2018

Commented:
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

Author

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 Developer
Distinguished Expert 2018

Commented:
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

Author

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"}]

Author

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 Developer
Distinguished Expert 2018

Commented:
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

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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.

Author

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 .

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
>  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?

Author

Commented:
yeah that what i mean

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial