Replies

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

  January 2023 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 Ling Posts: 5Questions: 1Answers: 0

  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 ) { 
              } 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 Posts: 63,935Questions: 1Answers: 10,538 Site admin

  January 2023

  "<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