Dynamically Created Tables from Javascript

Technodawg

Hello, I have a situation where a JSON file is being produced that contains 1-n tables worth of data. The JSON is structured such that it's easy to pull out columnar data in four or five different batches. The key here is that I don't have the tables on the page until after $(document).ready executes.

For each batch, I create a string like that includes the HTML for the various tables and then pop that into the DOM via $('#test').html(tablestring). At the end of the process, I have four or five dynamically created tables.

The code looks something like this:

$.getJSON("file.json", function(data){
  $.each(data, function(i, item){
                var teamId = item.teamId;
                var teamName = item.teamName;
                        var teamLoc = item.teamLoc;
                        var positions = item.positions;         
                                
                for (var i = 0, len = positions.length; i < len; i++)   
                {   
                    var aPos = positions[i];

                    // Create a new table for each position

                    posString += '<br><br><table id="' + aPos.posName + '">';
                    posString += "<thead><tr><th class='sorting_asc'>Number</th><th>Name</th></tr></thead><tbody>";
                                            
           // Populate the table
                        for (var j = 0, len2 = positions[i].players.length; j < len2; j++)
                        {
                            aPlayer = aPos.players[j];

                            posString += "<tr><td>";
                            posString += aPlayer.uniNbr + '</td>';
                            posString += '<td><a href="' + aPlayer.url + '" target="_new">' + aPlayer.name + '</a></td></tr>';
                            
                        }
          //Close the table and start another       
                
                        posString += '</tbody></table>';
                        
                  }
                });
            
    //Push the end results into a div
    
                $('#test').html(posString);
            
        });
        
        
        
        $("#ROS").DataTable();
        $("#myTable").DataTable(); 

    } 
);

The tables show up fine in the document with the right data. That part works. The problem is that I can try applying the Datatables function to any of these tables in the document and it simply doesn't work.

In this example, a table with the id ROS was created dynamically and the MyTable was hard-coded into the HTML. The former doesn't work, but the latter does.

Any advice for this noob?

allan

Assuming aPos.posName is ROS, that looks like it should work to me. Can you link to the page so I can take a look please?

Allan

Technodawg

(Link removed)

As you can see, I'm trying to create sortable rosters for a football team. It's not curing cancer, but I'd like to get it to work anyway.

Top example is a hard-coded HTML table, which works fine. After that are 4-5 dynamically created tables.

Technodawg

After struggling with this for hours, I simply moved the DataTables call for the roster table to sit inside the getJSON function at the bottom and it worked. I just put it right after $('test').html(posString) and it started working.

Thanks for the help regardless, though. I'm going to leave this here in case there are other folks who find themselves in my position.

allan

Ah - got it. I've just run the code through a beautifier to check the indentation and that was throwing me off earlier.

The DataTable initialisation for #ROS is not inside your Ajax callback - it is being called before the Ajax data has been loaded. Thus there is no table to enhance at that point.

Using:

$('#test').html(posString);
$("#ROS").DataTable();

Would solve it.

Allan