0

This is my current setup:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nation</th>
    </tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

The mysql table:

enter image description here

Now, when a function is executed in my JS I simply want to populate the Bootstrap table with certain data fro my DB. What is the best way to perform this?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Alexander Jovric
  • 57
  • 8
  • Use AJAX to retrieve the data from your mySQL table through whatever server side code your server supports. There are *thousands* of questions and tutorials about this already if you take the time to search. – Rory McCrossan Jan 04 '18 at 17:07

1 Answers1

0

You can either dynamically create an tr element using jquery and append it to the tbody for each row of data or copy an existing tr, modify the data, and append it to the tbody.

I use ajax to get Wikipedia search results and create dynamic rows using jquery in this codepen: https://codepen.io/Gander7/pen/jYMMqg Scroll down to the $("#box").keypress portion.

EDIT

since the server side language is PHP. there needs to be a server-side endpoint(URL / route / whatever you want to call it) that returns JSON. Check out how to do that with this question. You could use other formats but JSON is native to javascript and, IMO, is one of the common and the easiest to work with. My codepen example uses the existing Wikipedia URL as the endpoint. If you take that URL and put it into your browser address bar you will get a JSON result. you can test your endpoint the same way.

ie. Put this in your browser for example: https://www.mediawiki.org/w/api.php?action=query&format=json&prop=info&list=search&titles=Main%20Page&inprop=url%7Cdisplaytitle%7Cpreload&srsearch=javascript

Gander7
  • 569
  • 1
  • 6
  • 24
  • I'm looking into this right now, just one question: I have basically never handled JSONs in my code, when you enter the datatype inside the ajax call as "jsonp", have you done anything server-side to make this possible? – Alexander Jovric Jan 04 '18 at 17:46
  • You can pass the data with the html when the user calls the url with the page. I use "jsonp" because right now codepen doesn't like "json". If you want to refresh the data on the page with a button click or timer, use ajax. If you just want the data when the page is called then pass the data with the page. – Gander7 Jan 04 '18 at 18:03
  • Alright, yes I want to use Ajax since the data will be displayed followed by a user interaction. I just can't see how everything will be tied together here.. I think I have the JS & Ajax part of things solved(using datatype JSON), but I am very unsure on how to handle things in PHP. So far I have the query ready(SELECT nation_name FROM nations WHERE queue IS NOT NULL ORDER BY queue ASC), but not sure what to do with the result. – Alexander Jovric Jan 04 '18 at 18:37
  • you need an endpoint(url) that just returns the data in json format (no page) and then put that as the url in the ajax call. check out how to convert an object to json and return it [here](https://stackoverflow.com/questions/21959312/creating-a-rest-api-using-php) – Gander7 Jan 04 '18 at 21:13