Create html table by jquery, ajax, php
Client side presentation: index.html
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="showTable.js"></script> </head> <body> <button id="myBtn" type="submit" value='submit'>Create Table</button> <div id="forTable"></div> <br> <br> <br> <div id="eachTable"></div> </body> </html>
Client side Javascript and JQuery: showTable.js
$(document).ready(function(){ $("#myBtn").click(function(){ //disable the submit button $(this).attr('disabled','true');$(this).css('cursor','progress');$(this).html('processing'); $.ajax({ url: 'createTable.php', success: function(data,status) { createTableByForLoop(data); createTableByJqueryEach(data); //enable the submit button $('#myBtn').css('cursor','pointer');$('#myBtn').html('Submit');$('#myBtn').removeAttr('disabled'); }, async: true, dataType: 'json' }); }); }); function createTableByForLoop(data) { var eTable="<table><thead><tr><th colspan='3'>Created by for loop</th></tr><tr><th>Name</th><th>Title</th><th>Salary</th</tr></thead><tbody>" for(var i=0; i<data.length;i++) { eTable += "<tr>"; eTable += "<td>"+data[i]['name']+"</td>"; eTable += "<td>"+data[i]['title']+"</td>"; eTable += "<td>"+data[i]['salary']+"</td>"; eTable += "</tr>"; } eTable +="</tbody></table>"; $('#forTable').html(eTable); } function createTableByJqueryEach(data) { var eTable="<table><thead><tr><th colspan='3'>Created by Jquery each</th></tr><tr><th>Name</th><th>Title</th><th>Salary</th</tr></thead><tbody>" $.each(data,function(index, row){ // eTable += "<tr>"; // eTable += "<td>"+value['name']+"</td>"; // eTable += "<td>"+value['title']+"</td>"; // eTable += "<td>"+value['salary']+"</td>"; // eTable += "</tr>"; eTable += "<tr>"; $.each(row,function(key,value){ eTable += "<td>"+value+"</td>"; }); eTable += "</tr>"; }); eTable +="</tbody></table>"; $('#eachTable').html(eTable); }
Server side PHP:
<?php header("Content-type: application/json"); $employees = array( array ( "name" => "Jack", "title" => "Magager", "salary" => "$60,000", ), array ( "name" => "Joe", "title" => "Developer", "salary" => "$50,000", ), array ( "name" => "Susan", "title" => "Marketer", "salary" => "$50,000", ) ); echo json_encode($employees); ?>
Search within Codexpedia
Custom Search
Search the entire web
Custom Search
Related Posts