Populate a table dynamically using javascript echoed from php?

Question

I want to populate a table with some data I get from a database using http requests. I get json encoded data with a php script and then I populate the table using jquery echoed from a php script. I doesn't look neat at all and I am wondering how I can do that differently.

I want to have php and js in separate files because at the moment when I view the source of the webpage I have like 3k+ lines as all the javascript code is generated inside a script tag and due to the large amount of data the javascript code gets repeated. The actual data I have to work with will be even bigger than what I use now for testing.

To give you a better idea of what I am doing at the moment I will write some dummy code here:

<?php
require_once ('functions.php');
include 'header.html';
include 'standardTable.html';

$results = file_get_contents("http://url.com");
$decodedResult = json_decode($results, true);

// I have a function that creates and empty table based on how big the data set is 
// This function is placed in functions.php
CreateEmptyTable($decodedResults);

// Then I go ahead and populate the table based on some rules
PopulateTable($decodedResults);

function PopulateTable($res)
{
    $rowNum = 0;
    for ($i=0;$i<count($res);$i++)
    {
        $rowNum++;
        foreach($res as $key => $value)
        {
            if ($key == "something")
                echo '$("tbody tr#row_'.$rowNum.'")
                   .find("td:nth-child(id_based_on_key)").text("'.$value.'");
                ';
            else if ($key == "something_else")
                echo 'some other jquery lines';
        }
    }
}

include 'footer.html';

So as you can see this doesn't look pretty at all so I'm wondering if I can structure my code in another way. The thing to keep in mind is that I have to pass php values to the javascript code.

I will appreciate if you can help me out with this and please let me know if you need more details as I wrote something short as an example and it may not be clear enough.

Cheers!

Haven't read closely but consider this: It is possible to use external javascript (and css) files with .php file extensions. Just add <?php Header("Content-type: application/javascript"); at the top. (Some people insist on x-javascript). Then I would suggest you create a Class and use your functions as methods, which can be easily and simply called after including the Class at the top of your php files. You can create a View method for your class to display the HTML. — Stefan
– Stefan, Commented Aug 11, 2014 at 10:20
@MrUpsidown Thank you for the link! I will definitely make use of it — Raz
– Raz, Commented Aug 11, 2014 at 10:32

Linial · Accepted Answer · 2014-08-11 10:24:29Z

1

Heard of Ajax? or jQuery Ajax?

Well basically this is I would do it:

PHP file - To be the back - end only create response and controll the Database..

HTML file - to be the View.

JS\jQuery - to be the controller.

Ajax allows you to Asynchronously request for data from other servers or send data.

Description of Ajax by jQuery + Examples

So the structure would be more like :

enter image description here

answered Aug 11, 2014 at 10:24

Linial

1,1449 silver badges22 bronze badges

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

2 Comments

Raz Over a year ago

Thank you for the fast reply! This is exactly what I was looking for and it does make sense what you said above. I'm fairly new to web development so I sometimes walk on wrong paths.

Linial Over a year ago

Good Luck I even suggest you before start coding : Plan, Design Web Pattern. it will make your web-app even more powerful and more stable.

NMunro · Accepted Answer · 2014-08-11 10:20:37Z

0

Why not use a XMLHttpRequest to call for the JSON data returned by the PHP page and build a table directly into the DOM?

This is what I'd choose to do, have the PHP do nothing but read the database and spit out the JSON, I'd have the javascript collect that and format a table anyway I needed, making use of CSS etc.

What exactly is in the PHP that you feel you must embed into the JavaScript?

answered Aug 11, 2014 at 10:20

NMunro

9105 silver badges21 bronze badges

Collectives™ on Stack Overflow

Populate a table dynamically using javascript echoed from php?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related