How to Render datatable into a different html element?

How to Render datatable into a different html element?

celvincelvin Posts: 1Questions: 1Answers: 0

It's possible to render your datatable into an specific html element?

By example the "renderTo" option contained in highcharts:

http://api.highcharts.com/highcharts/chart.renderTo

http://www.java2s.com/Tutorials/highcharts/Example/Chart/Create_a_div_and_render_to_it.htm

Answers

  • DirceuNazarethDirceuNazareth Posts: 44Questions: 1Answers: 12

    You can use the JQuery to do a appendTo, on the table before initialize the DataTable on it.

    If you have some reason to not do that you can use the code below.

    function createIntoDiv() {
        var container = document.createElement('div');
        container.id = "myContainer";
        document.body.appendChild(container);
    
           /* Fictitious table begin (replace for your table)  */
           var newTable = document.createElement('table');
       
           var newTrHead =    document.createElement('tr');
           var newTrRow =    document.createElement('tr');
       
           var newTh = document.createElement("th");
           newTh.innerHTML = "placeholder columns";
    
           var newTd = document.createElement("td");
           newTd.innerHTML = "placeholder content";
       
           newTrHead.appendChild(newTh);
           newTrRow.appendChild(newTd);
           newTable.appendChild(newTrHead);
           newTable.appendChild(newTrRow);
           /* Fictitious table end  */
    
        document.getElementById("myContainer").appendChild(newTable);
    
       $("#myContainer table").DataTable( /* Your properties */);
    }
    

    The code above will generate the DT bug gonna fail in the console because it is missing some parameters. I've just create an example that need your real inputs to works.

This discussion has been closed.