example code of put html code in javascript to insert table by listen on a click

Forrest Ling

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Could any expert advise if I can put HTML

in javascript section to insert the table dynamically by clients clicking a button. ?

Forrest Ling

    <script>
        const Parent=document.querySelector("#navbarVerticalNav");
        Parent.addEventListener("click", dosomething, false) ;
        function dosomething (e) {
            if (e.target !== e.currentTarget) {
                const clickeditem = e.target.id;
                const insertContent = document.querySelector("#content-card-id");
                const dynContent = document.getElementById("content-card-id");
                if ( clickeditem.indexOf("/usr/bin/") == 0 ) { 
 <!--                   console.log ( clickeditem ); 
                    fetch( clickeditem )
                    .then ( res => res.text(res) )
                    .then ( data => insertContent.innerHTML = data ); 
 -->
               } else if ( clickeditem.indexOf("/doc/ajax") == 0 ) {
                    console.log ( clickeditem ); 
                    insertContent.innerHTML = "<div class='card-body'><table id='example' class='display' cellspacing='0' width='100%'>"
                        "<thead>"
                            "<tr>"
                                "<th>First name</th>"
                                "<th>Last name</th>"
                                "<th>Phone #</th>"
                                "<th>Location</th>"
                            "</tr>"
                        "</thead>"
                        "<tfoot>"
                            "<tr>"
                                "<th>First name</th>"
                                "<th>Last name</th>"
                                "<th>Phone #</th>"
                                "<th>Location</th>"
                            "</tr>"
                        "</tfoot>"
                    "</table></div>";
                    
                    var editor; // use a global for the submit and return data rendering in the examples
     
                    $(document).ready(function() {
                          editor = new $.fn.dataTable.Editor( {
                              ajax: "/post/editor",
                              table: "#example",
                              fields: [ {
                                      label: "First name:",
                                      name: "users.first_name"
                                  }, {
                                      label: "Last name:",
                                      name: "users.last_name"
                                  }, {
                                      label: "Phone #:",
                                      name: "users.phone"
                                  }, {
                                      label: "Site:",
                                      name: "users.site",
                                      type: "select"
                                  }
                              ]
                          } );
                        
                          var table = $('#example').DataTable( {
                              dom: "Bfrtip",
                              ajax: {
                                  url: "/doc/ajax/array.json",
                                  type: 'POST'
                              },
                              columns: [
                                  { data: "users.first_name" },
                                  { data: "users.last_name" },
                                  { data: "users.phone" },
                                  { data: "sites.name" }
                              ],
                              select: true,
                              buttons: [
                                  { extend: "create", editor: editor },
                                  { extend: "edit",   editor: editor },
                                  {
                                      extend: "selected",
                                      text: 'Duplicate',
                                      action: function ( e, dt, node, config ) {
                                          // Start in edit mode, and then change to create
                                          editor
                                              .edit( table.rows( {selected: true} ).indexes(), {
                                                  title: 'Duplicate record',
                                                  buttons: 'Create from existing'
                                              } )
                                              .mode( 'create' );
                                      }
                                  },
                                  { extend: "remove", editor: editor }
                              ]
                          } );
                      } );
                }
            }
            e.stopPropagation();
        }
    
    </script>

This is the sample code. Any example code of putting HTML of

<

table> combining with table data in JSON sent from server side to client <script> for rendering?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Forrest Ling

<script>
    const Parent=document.querySelector("#navbarVerticalNav");
    Parent.addEventListener("click", dosomething, false) ;
    function dosomething (e) {
        if (e.target !== e.currentTarget) {
            const clickeditem = e.target.id;
            const insertContent = document.querySelector("#content-card-id");
            const dynContent = document.getElementById("content-card-id");
            if ( clickeditem.indexOf("/usr/bin/") == 0 ) { 
            } else if ( clickeditem.indexOf("/doc/ajax") == 0 ) {
                console.log ( clickeditem ); 
                insertContent.innerHTML = "<div class='card-body'><table id='example' class='display' cellspacing='0' width='100%'>"
                    "<thead>"
                        "<tr>"
                            "<th>First name</th>"
                            "<th>Last name</th>"
                            "<th>Phone #</th>"
                            "<th>Location</th>"
                        "</tr>"
                    "</thead>"
                    "<tfoot>"
                        "<tr>"
                            "<th>First name</th>"
                            "<th>Last name</th>"
                            "<th>Phone #</th>"
                            "<th>Location</th>"
                        "</tr>"
                    "</tfoot>"
                "</table></div>";

                var editor; // use a global for the submit and return data rendering in the examples

                $(document).ready(function() {
                      editor = new $.fn.dataTable.Editor( {
                          ajax: "/post/editor",
                          table: "#example",
                          fields: [ {
                                  label: "First name:",
                                  name: "users.first_name"
                              }, {
                                  label: "Last name:",
                                  name: "users.last_name"
                              }, {
                                  label: "Phone #:",
                                  name: "users.phone"
                              }, {
                                  label: "Site:",
                                  name: "users.site",
                                  type: "select"
                              }
                          ]
                      } );

                      var table = $('#example').DataTable( {
                          dom: "Bfrtip",
                          ajax: {
                              url: "/doc/ajax/array.json",
                              type: 'POST'
                          },
                          columns: [
                              { data: "users.first_name" },
                              { data: "users.last_name" },
                              { data: "users.phone" },
                              { data: "sites.name" }
                          ],
                          select: true,
                          buttons: [
                              { extend: "create", editor: editor },
                              { extend: "edit",   editor: editor },
                              {
                                  extend: "selected",
                                  text: 'Duplicate',
                                  action: function ( e, dt, node, config ) {
                                      // Start in edit mode, and then change to create
                                      editor
                                          .edit( table.rows( {selected: true} ).indexes(), {
                                              title: 'Duplicate record',
                                              buttons: 'Create from existing'
                                          } )
                                          .mode( 'create' );
                                  }
                              },
                              { extend: "remove", editor: editor }
                          ]
                      } );
                  } );
            }
        }
        e.stopPropagation();
    }

</script>

I want to put HTML

<

table> tags together with Table data in the ajax json response, is it possible?

allan

"<div class='card-body'><table id='example' class='display' cellspacing='0' width='100%'>"
                    "<thead>"
                        "<tr>"

Isn't valid Javascript.

Assuming you can target modern browsers use a template literal which makes multi-line string so much easier. Otherwise add a + concatenation operator between each string.

Allan