Create a table and populate it in a popup window

Question

I have an HTML file. I want to dynamically create a table, fill it in a popup window. The table data will be retrieved from the local database. Can someone give me an idea how to approach this? I am new to javascript, so any help is greatly appreciated.

Thanks,

Answer 1

If you have jQuery and Bootstrap available to use, this will be a great example where both libraries can work together to help you.

If yes,

Requesting your data through Ajax will be your best bet. Take a look at the jQuery $ .post () method. Internally, jQuery ajax implementation has over 800 lines of code to receive a cross-browser complaint. I would recommend using the work of other developers, against writing an ajax implementation without jQuery.

http://api.jquery.com/jQuery.post/

Once you have the data, you can enter it into the table using a view template or JavaScript.

If you have Bootstrap, css "framework", you can use this to really give your tables a neat look. Assign your table element to the "table" and "strip-striped" class, this will give your tables a neat and clean look. Here is the documentation for Bootstrap,

http://twitter.github.com/bootstrap/base-css.html#tables

As for the popup, the modal offered by bootstrap is a very easy implementation of a convenient popup.

http://twitter.github.com/bootstrap/javascript.html#modals

If you do not have these tools, I would suggest using them or starting a campaign to use them. This is a cross-browser complaint and can save a lot of time.

Good luck

Answer 2

You can also find Knockout.JS http://knockoutjs.com/ useful in combination with the sentences of the previous answers that help fill and process the data in your table once you received it through jQuery AJAX.