Use Ajax to render a html table

Question

I would like to know how to realize following project

Actually I have a php code which renders a table

<table id = "oldata" class ="table table-bordered">

    <thead>
            <tr class ="success">
                    <th class="text-center">Stage</th>
                    <th class="text-center">REQUEST</th>
                    <th class="text-center">REPLY</th>
            </tr>
        </thead>

    <tbody>
<?php

    foreach($allinfool as $infool){
        print("<tr>");
        print("<td>{$infool["Stage"]}</td>");
        print("<td class='text-left'>" .nl2br($infool["comment"])."</td>");
        print("<td class='text-left'>" .nl2br($infool["resultcom"]). "</td>");
        print("</tr>");
    }

?>
    </tbody>

</table>

So far so good, however I want to build many tables like above based on action from user. I mean he will have a list of items (like choice 1, choice 2, choice 3...) and then by clicking this it will render without reloading the page above html (based on new allinfool array).

My point is I want to do it via Ajax. So far I could manage Ajax but not to render above content of html. I could manage to render back one number or one text but in this case it is more complicated since html is mixed with php. Could you please help me to figure out how to realize this Ajax technique?

Styphon · Accepted Answer · 2015-08-28 15:03:51Z

4

Put your code in file like table.php then from the index.php use Jquery to call it and render the table:

HTML:

<button id="rendertable">Render new table</button>
<div id="render"></div>

JS:

$(document).ready(function () {

    $('#rendertable').click(function () {
        $.ajax({
            url: "table.php",
            success: function (response) {
                $('#render').append(response);
            }
        });
    });

});

Everytime you will click the button it will render a new table appended to render element

edited Aug 28, 2015 at 15:03

Styphon

10.5k9 gold badges54 silver badges87 bronze badges

answered Aug 28, 2015 at 15:02

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oeiloff Over a year ago

Thank you for your reply, Should I do anything special inside table.php to spit out hmtl? Could you please show me?

michelem Over a year ago

No you don't need anything (to render the table as is), if you call table.php from a browser you will see what you will render: the table.

Oeiloff Over a year ago

I tried it, and that's exactly what I expected for. Thanks –

Sachin Tyagi · Accepted Answer · 2015-08-28 17:03:38Z

you need to do this code in you main file from where you want to call table.php file - 
and pass the array variable into your $allinfool variable in table.php like-
$allinfool = array();
$allinfool = $_POST['variable_value'];
You have done.

//this code is for your index.php file or any other file from where you want to call table.php
 <?php 
    $arr = array(
        array("Stage" => "Stage_value1", "comment" => "comment_value1", "resultcom" => "resultcom_value1"),
        array("Stage" => "Stage_value2", "comment" => "comment_value2", "resultcom" => "resultcom_value2"),
        array("Stage" => "Stage_value3", "comment" => "comment_value3", "resultcom" => "resultcom_value3")
    );
    $arr = json_encode($arr);
    ?>
    <button id="button">Click Me</button>
    <div id="success"></div>
    <div id="error"></div>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $("document").ready(function(){
      $("button#button").on("click", function(){
        $( "#success" ).load( "table.php", { 'variable_value' : <?php echo $arr ?> }, function( response, status, xhr ) {
          if ( status == "error" ) {
            var msg = "Sorry but there was an error: ";
            $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
          }
        });
      });
    });
    </script>

Collectives™ on Stack Overflow

Use Ajax to render a html table

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related