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

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

Forrest LingForrest Ling Posts: 5Questions: 1Answers: 0

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. ?

Replies

  • Forrest LingForrest Ling Posts: 5Questions: 1Answers: 0
    edited January 2023
        <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 LingForrest Ling Posts: 5Questions: 1Answers: 0
    <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?

  • allanallan Posts: 61,627Questions: 1Answers: 10,090 Site admin
    "<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

Sign In or Register to comment.