Generate variable HTML table for DataTables with JavaScript

Question

Background

I am trying to generate a variable HTML table for use with DataTables.

I've built a web viewer with a couple of selectboxes which are dependable on each other. When you select an option in "Select tabel", "Select column" changes. When you alter "Select column", "Select attribute" changes. Etc.

The results from "Select attribute" are placed in an array, which I want to use to generate the tableheaders that DataTables need.

Example:

Say myArray looks something like ["aaa", "bbb", "ccc", "ddd", "eee"], the generated report should look something like the code below.

Question

Because myArray has no fixed size and content, I can't just make a static HTML table in my index file.

~~How do I make a function that loops through myArray and generates a report based on the data in myArray?~~

Edit:

I've got my code working in JSfiddle now, however when I try to incorporate it in my web viewer code, I get an error: The report is messed up and looks like this:

What causes this and how do I get my code to work outside of JSfiddle?

Code

<div id="report_comes_here">
  <table id="report">
      <thead>
        <tr>
            <th>aaa</th>
            <th>bbb</th>
            <th>ccc</th>
            <th>ddd</th>       
            <th>eee</th>
        </tr>
      </thead>
    </table>
</div>

I think that what you're looking for is datatables.net/reference/api/destroy(). This will allow you to update a table that has already been made into a datatable. @Ramkee's answer is grand but won't allow you to edit it easily after the table has been initialised once - not with different columns anyway. — annoyingmouse
– annoyingmouse, Commented Jun 1, 2016 at 11:38
I already use something like that to destroy and rebuild my current (static) report. Now I just need to make it dynamic. — Jordi Z
– Jordi Z, Commented Jun 2, 2016 at 9:26

Ramkee · Accepted Answer · 2016-06-01 11:00:53Z

2

var array = ["aaa","bbb","ccc","ddd"] ;
var count = array.length;

var TABLE = ' <table id="report" class= "table table-striped table-bordered">';
    TABLE += '<thead ><tr><th>Sample Head</th></tr></thead>'
    TABLE += '<tbody>';
    for (i = 0; i < count; i++) {
        TABLE += "<tr>";
        TABLE += "<td>" + array[i] + "</td>"
        TABLE += "</tr>";
    }
    TABLE += "</tbody></table>";

Now you can append TABLE variable to your required DIV ID using Jquery

$("#report_comes_here").html(TABLE);
$('#report').DataTable();

You can find Demo at JSfiddle

If you find any difficulties please let me know.

edited Jun 1, 2016 at 11:00

answered Jun 1, 2016 at 10:12

Ramkee

9361 gold badge10 silver badges28 bronze badges

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

1 Comment

Jordi Z Over a year ago

I should have been a bit more clear. I wanted table headers, not table rows/data. I've edited your code a bit to generate what I meant. However, I can't get the code to work outside of JSfiddle, see my edited question.

Collectives™ on Stack Overflow

Generate variable HTML table for DataTables with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related