Display Data In Table Using AJAX JSON PHP In Correct Way

Question

I am making an admin panel. So I want to display data from database in table when page is load. I am Confused that, I display whole table from backend side in div or put data only ??

For Example :

success:function(response){
    $("#result").html(result);
}

That Will Display Whole Table In result div. That will Come From Backend side.

OR

 success:function(response){
        $("#result").html('<table><tr><td>'+response.name+'</td><td>'+response.password+'</td></tr>');
    }

If This is The Way for printing data in table then It will Print Only the row at once. Not full data in each .

Please Help me to solve this problem.

It is good to show data in paging wise table. It depend what you want to show your user , some time all data is not much relevant to user, so it good to show a partial of all records — Hitesh Jangid
– Hitesh Jangid, Commented Nov 14, 2016 at 4:48
So... where to display an id from json for editing purpose of form. It is bydefault or set id in hidden field — Sachin Sanchaniya
– Sachin Sanchaniya, Commented Nov 14, 2016 at 5:04
@SachinSanchaniya Do you wanna accept any of the following answers? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Nov 18, 2016 at 13:00

Praveen Kumar Purushothaman · Accepted Answer · 2016-11-14 04:44:37Z

3

It would be obviously better to get the data from the backend as a JSON output and use the JSON from the response to construct the table in the client side. The main reasons being:

Lesser code footprint between the client and server.
Ability to change the view, if JSON, it is not tied with HTML.

In future, if you want to change the structure or if you need to use the same output in a different page, in a different way, you don't need to change the underlying PHP, instead, you can just change the rendering mechanism.

Have the server sent out a JSON output like this:

[{
  "name": "Praveen",
  "age": 27
}, {
  "name": "Kumar",
  "age": 25
}]

And make the JavaScript do the rest.

var jsonResponse = [{
  "name": "Praveen",
  "age": 27
}, {
  "name": "Kumar",
  "age": 25
}];
$('body').append(function () {
  var table = $('<table />');
  var headr = $('<tr />');
  headr.append('<th>Name</th>');
  headr.append('<th>Age</th>');
  headr.appendTo(table);
  $.each(jsonResponse, function (i, v) {
    var tr = $('<tr />');
    tr.append('<td>' + v.name + '</td>');
    tr.append('<td>' + v.age + '</td>');
    tr.appendTo(table);
  });
  return table;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Nov 14, 2016 at 4:44

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

2 Comments

Sachin Sanchaniya Over a year ago

I think. It is time consuming.. At Backend side, i will use while loop for create json array and at front side i will use foreach loop for set json variable. So it is better to use direct table from backend in Response ??

Praveen Kumar Purushothaman Over a year ago

@SachinSanchaniya Giving out a table is not a good idea IMO. But yeah, if you feel that's better, you can go ahead.

Community · Accepted Answer · 2017-05-23 12:16:42Z

0

Your both options correct but I found it is good practice separating logic and views, means it is good to generate html view in front-end.

Now, to generate table view with multiple rows, your response data should be properly structured for example json object array.

If you got my explanation then you can follow this post: Loop through a JSON array to create a Table

Let me know for any queries

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Nov 14, 2016 at 4:44

Muhammed Imran Hussain

2,13318 silver badges24 bronze badges

5 Comments

Praveen Kumar Purushothaman Over a year ago

LoL. Wow. That was quick! :D

Sachin Sanchaniya Over a year ago

Ok. but after getting response in ajax as shown in my second example than it will affect the pagination and searching when i create the code of pagination ??

Muhammed Imran Hussain Over a year ago

In your second example you hard coded only one row. Follow the example as Praveen provided and the link I given. Now If the scenario is you have 100 rows for example and you want to show 10 rows at a time. Then you also need to keep track of your page number. You can paste your code so that I can write sample code for you as your needs. I would also like to recommend Datatable JS library for you to check.

Sachin Sanchaniya Over a year ago

I think. It is time consuming.. At Backend side, i will use while loop for create json array and at front side i will use foreach loop for set json variable. So it is better to use direct table from backend in Response ??

Muhammed Imran Hussain Over a year ago

In terms of time both solution time consuming. In server side or client side you need time to process loop. As per my knowledge and practice separating business logic from presentation is a popular fashion. Again if we think about time, you know a PHP requests handled in a queue in server thus is it not better to reduce the load of server and make it free asap?

Collectives™ on Stack Overflow

Display Data In Table Using AJAX JSON PHP In Correct Way

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related