在PHP中生成HTML表并将其传递给Javascript

Question

Essentially, I am trying to build a booking system. The booking table shows the bookings for an entire week, and the user can switch between weeks.

In PHP, I have a function get_booking_table which returns the html for the booking table, based on an input (which week) and booking availabilities (from mysql):

<?php
  function get_booking_table($week_number) {
    //retrieve various data from mysql database, return html string
  }

I am then loading this html for each week into a JS array, so that the table for each week can be loaded quickly when the user changes week.

My problem is that the HTML string being returned from the PHP function is very long, which I have read is bad practice (as well as being clunky for me to handle). The only way I can think of to avoid this is to instead create a 2D array for the booking table for each week, somehow pass this into JS code, and then generate the HTML code from the JS 2D array. However, this seems even more overly complicated.

What is the correct way to create a dynamic HTML table in PHP and load it into JS?

Answer 1

Pretty much what the others have stated. This used to be my "go-to" method for a long time: have PHP echo out some nice HTML and "spit it out" on the javascript side. Works for some situations, but usually "feels" lazy (to me personally).

The best method is as described: Use an ajax request to your PHP page that outputs a json_encoded PHP array (it's literally just wrapping your normal PHP array in the json_encoded function). Then, in your ajax's "success" method, go to town parsing the json object. You can use a library like DataTables (that was mentioned) to do this REALLY fast, and it gives you a lot of added functionality (sorting, re-ordering columns, etc.)

Also worth noting, it doesn't sound like you're doing anything with the HTML once it's generated. So if you wanted to, you could do exactly as you're already doing and output the HTML from your PHP script. Not pretty (or fun to maintain), but it works...