Как внести необходимые изменения в javascript, чтобы код работал - PullRequest
Новая
       4

Как внести необходимые изменения в javascript, чтобы код работал

0 голосов
/ 23 апреля 2020

Вот код, я проверял его снова и снова, не уверен, где ошибка.

В функции я принимаю переменную JSON в качестве параметра, и функция создает таблицу из этого.

Кроме того, я использую некоторые CSS и js для превращения этой таблицы в таблицу данных. Я уверен, что это небольшая ошибка, но не уверен, где эта ошибка. Извините за то, что выложил это здесь, но я не понимаю ошибку. помогите пожалуйста Кто-нибудь может внести необходимые изменения, чтобы он работал ?? 

$(document).ready(function() {
  var table = $('#example').DataTable( {
                 scrollY:        "300px",
                 scrollX:        true,
          scrollCollapse: true,
                  paging:         false,
            fixedColumns:   {
                 leftColumns: 1,
                rightColumns: 1
            }
          } );
} );
    
          var myContacts = [{
            "owner": "swapneil",
            "fleet_name": "RancorService",
            "creation_date": "09-03-2020",
            "environment": "RancorService/JP",
            "vip_port": 80,
            "partition": "YES",
            "protocol": "HTTP",
            "monitor": "Consistent (http-ping)",
            "lbset": "Consistent",
            "predictor": "Consistent",
            "spillover": "Consistent",
            "vip_cka": "Consistent :(NO)",
            "max_conns": "Consistent : (36)",
            "vip_cipher": null,
            "vip_cip": "Consistent",
            "vip_tier": "Consistent(Tier1)",
            "vip_siloed": "Consistent(Non-SILOED)",
            "vip_globalized": "Consistent(Non-GLOBALIZED)",
            "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
            "vip_retail_tag": "Consistent(RETAIL_TAG)",
            "down_stat_flush": "Consistent :(ENABLED)",
            "vip_type": "Consistent (BACKEND)",
            "server_port": "Consistent",
            "vip_server_timeout": "Consistent",
            "vip_client_timeout": "Consistent",
            "persistent_method": "Consistent",
            "persistent_timeout": "Consistent"
    
          },
          {
            "owner": "swapneil",
            "fleet_name": "RancorService",
            "creation_date": "09-03-2020",
            "environment": "RancorService/JP",
            "vip_port": 443,
            "partition": "YES",
            "protocol": "TCP",
            "monitor": "NC",
            "lbset": "NC (>1 Vip's in same LB)",
            "predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
            "spillover": "Consistent",
            "vip_cka": "Consistent :(NO)",
            "max_conns": "Consistent : (9000)",
            "vip_cipher": null,
            "vip_cip": "Consistent",
            "vip_tier": "Consistent(Non-Tier1)",
            "vip_siloed": "Consistent(Non-SILOED)",
            "vip_globalized": "Consistent(Non-GLOBALIZED)",
            "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
            "vip_retail_tag": "Consistent(RETAIL_TAG)",
            "down_stat_flush": "Consistent :(ENABLED)",
            "vip_type": "Consistent (BACKEND)",
            "server_port": "Consistent",
            "vip_server_timeout": "Consistent",
            "vip_client_timeout": "Consistent",
            "persistent_method": "Consistent",
            "persistent_timeout": "Consistent"
    
          },
          {
            "owner": "swapneil",
            "fleet_name": "RegionAwareBaseLayer",
            "creation_date": "09-03-2020",
            "environment": "RegionAwareBaseLayer/NA",
            "vip_port": 80,
            "partition": "YES",
            "protocol": "HTTP",
            "monitor": "Consistent (http-ping)",
            "lbset": "Consistent",
            "predictor": "Consistent",
            "spillover": "Consistent",
            "vip_cka": "Consistent :(NO)",
            "max_conns": "Consistent : (56)",
            "vip_cipher": null,
            "vip_cip": "Consistent",
            "vip_tier": "NC : >1 VIP's MISSING TIER-1 TAG",
            "vip_siloed": "Consistent(Non-SILOED)",
            "vip_globalized": "Consistent(GLOBALIZED)",
            "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
            "vip_retail_tag": "Consistent(RETAIL_TAG)",
            "down_stat_flush": "Consistent :(ENABLED)",
            "vip_type": "Consistent (BACKEND)",
            "server_port": "Consistent",
            "vip_server_timeout": "Consistent",
            "vip_client_timeout": "Consistent",
            "persistent_method": "Consistent",
            "persistent_timeout": "Consistent"
    
          },
          {
            "owner": "swapneil",
            "fleet_name": "RegionAwareBaseLayer",
            "creation_date": "09-03-2020",
            "environment": "RegionAwareBaseLayer/NA",
            "vip_port": 443,
            "partition": "NO",
            "protocol": "TCP",
            "monitor": "Consistent (ssl-ping)",
            "lbset": "Consistent",
            "predictor": "NC :SHOULD BE ROUNDROBIN",
            "spillover": "Consistent",
            "vip_cka": "NC : SHOULD BE DISABLED (YES)",
            "max_conns": "Consistent : (9000)",
            "vip_cipher": null,
            "vip_cip": "Consistent",
            "vip_tier": "Consistent(Tier1)",
            "vip_siloed": "Consistent(Non-SILOED)",
            "vip_globalized": "Consistent(Non-GLOBALIZED)",
            "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
            "vip_retail_tag": "Consistent(RETAIL_TAG)",
            "down_stat_flush": "Consistent :(ENABLED)",
            "vip_type": "Consistent (BACKEND)",
            "server_port": "Consistent",
            "vip_server_timeout": "Consistent",
            "vip_client_timeout": "Consistent",
            "persistent_method": "Consistent",
            "persistent_timeout": "Consistent"
    
          },
          {
            "owner": "swapneil",
            "fleet_name": "RegionMappingService",
            "creation_date": "09-03-2020",
            "environment": "RegionMappingService/EU",
            "vip_port": 80,
            "partition": "YES",
            "protocol": "HTTP",
            "monitor": "Consistent (http-ping)",
            "lbset": "Consistent",
            "predictor": "Consistent",
            "spillover": "Consistent",
            "vip_cka": "Consistent :(NO)",
            "max_conns": "Consistent : (16)",
            "vip_cipher": null,
            "vip_cip": "Consistent",
            "vip_tier": "Consistent(Tier1)",
            "vip_siloed": "Consistent(Non-SILOED)",
            "vip_globalized": "Consistent(Non-GLOBALIZED)",
            "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
            "vip_retail_tag": "Consistent(RETAIL_TAG)",
            "down_stat_flush": "Consistent :(ENABLED)",
            "vip_type": "Consistent (BACKEND)",
            "server_port": "Consistent",
            "vip_server_timeout": "Consistent",
            "vip_client_timeout": "Consistent",
            "persistent_method": "Consistent",
            "persistent_timeout": "Consistent"
    
          },
          {
            "owner": "swapneil",
            "fleet_name": "RegionMappingService",
            "creation_date": "09-03-2020",
            "environment": "RegionMappingService/JP",
            "vip_port": 443,
            "partition": "YES",
            "protocol": "TCP",
            "monitor": "NC",
            "lbset": "NC (>1 Vip's in same LB)",
            "predictor": "NC :SHOULD BE ROUNDROBIN",
            "spillover": "Consistent",
            "vip_cka": "Consistent :(NO)",
            "max_conns": "Consistent : (9000)",
            "vip_cipher": null,
            "vip_cip": "Consistent",
            "vip_tier": "Consistent(Non-Tier1)",
            "vip_siloed": "Consistent(Non-SILOED)",
            "vip_globalized": "Consistent(Non-GLOBALIZED)",
            "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
            "vip_retail_tag": "Consistent(RETAIL_TAG)",
            "down_stat_flush": "Consistent :(ENABLED)",
            "vip_type": "Consistent (BACKEND)",
            "server_port": "Consistent",
            "vip_server_timeout": "Consistent",
            "vip_client_timeout": "Consistent",
            "persistent_method": "Consistent",
            "persistent_timeout": "Consistent"
    
          }
        ];
    
          function generateDynamicTable(myContacts) {
          var noOfContacts = myContacts.length;
    
          if (noOfContacts > 0) {
    
    
            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");
            table.style.width = '50%';
            table.setAttribute('id','example');
            table.setAttribute('class', 'stripe row-border order-column');
            table.setAttribute('border', '1');
            table.setAttribute('cellspacing', '0');
            table.setAttribute('cellpadding', '5');
    
            // retrieve column header ('Name', 'Email', and 'Mobile')
    
            var col = []; // define an empty array
            for (var i = 0; i < noOfContacts; i++) {
              for (var key in myContacts[i]) {
                if (col.indexOf(key) === -1) {
                  col.push(key);
                }
              }
            }
    
            // CREATE TABLE HEAD .
            var tHead = document.createElement("thead");
    
    
            // CREATE ROW FOR TABLE HEAD .
            var hRow = document.createElement("tr");
    
            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
            for (var i = 0; i < col.length; i++) {
              var th = document.createElement("th");
              th.innerHTML = col[i];
              hRow.appendChild(th);
            }
            tHead.appendChild(hRow);
            table.appendChild(tHead);
    
            // CREATE TABLE BODY .
            var tBody = document.createElement("tbody");
    
            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
            for (var i = 0; i < noOfContacts; i++) {
    
              var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD
    
    
              for (var j = 0; j < col.length; j++) {
                var td = document.createElement("td");
                if (col[j] == 'monitor' && myContacts[i][col[j]] == 'NC') {
                  var a = document.createElement('a');
                  var linkText = document.createTextNode("Ext. link");
                  a.appendChild(linkText);
                  a.title = "Check details";
                  a.href = "http://example.com";
                  td.appendChild( a );
                } else {
                  td.innerHTML = myContacts[i][col[j]];
                };
                bRow.appendChild(td);
              }
              tBody.appendChild(bRow)
    
            }
            table.appendChild(tBody);
    
    
            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("demo");
            divContainer.appendChild(table);
    
          }
        };
         generateDynamicTable(myContacts);
    
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
            <style type="text/css">
                /* Ensure that the demo table scrolls */
                th, td { white-space: nowrap; }
                div.dataTables_wrapper {
                    width: 800px;
                    margin: 0 auto;
                }
            </style>
            <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
            <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
            <script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script> 
            
        </head>
        <body>
        <div id="demo"></div>
        </body>
        </html>

1 Ответ

0 голосов
/ 23 апреля 2020

работает следующий код: 

$(document).ready(function() {
  var table = $('#example').DataTable( {
    scrollY: "300px",
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns:   {
      leftColumns: 1,
      rightColumns: 1
    }
  });
});

window.addEventListener('DOMContentLoaded', (event) => {
  generateDynamicTable(myContacts);
});
            
var myContacts = [{
  "owner": "swapneil",
  "fleet_name": "RancorService",
  "creation_date": "09-03-2020",
  "environment": "RancorService/JP",
  "vip_port": 80,
  "partition": "YES",
  "protocol": "HTTP",
  "monitor": "Consistent (http-ping)",
  "lbset": "Consistent",
  "predictor": "Consistent",
  "spillover": "Consistent",
  "vip_cka": "Consistent :(NO)",
  "max_conns": "Consistent : (36)",
  "vip_cipher": null,
  "vip_cip": "Consistent",
  "vip_tier": "Consistent(Tier1)",
  "vip_siloed": "Consistent(Non-SILOED)",
  "vip_globalized": "Consistent(Non-GLOBALIZED)",
  "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
  "vip_retail_tag": "Consistent(RETAIL_TAG)",
  "down_stat_flush": "Consistent :(ENABLED)",
  "vip_type": "Consistent (BACKEND)",
  "server_port": "Consistent",
  "vip_server_timeout": "Consistent",
  "vip_client_timeout": "Consistent",
  "persistent_method": "Consistent",
  "persistent_timeout": "Consistent"
},
{
  "owner": "swapneil",
  "fleet_name": "RancorService",
  "creation_date": "09-03-2020",
  "environment": "RancorService/JP",
  "vip_port": 443,
  "partition": "YES",
  "protocol": "TCP",
  "monitor": "NC",
  "lbset": "NC (>1 Vip's in same LB)",
  "predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
  "spillover": "Consistent",
  "vip_cka": "Consistent :(NO)",
  "max_conns": "Consistent : (9000)",
  "vip_cipher": null,
  "vip_cip": "Consistent",
  "vip_tier": "Consistent(Non-Tier1)",
  "vip_siloed": "Consistent(Non-SILOED)",
  "vip_globalized": "Consistent(Non-GLOBALIZED)",
  "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
  "vip_retail_tag": "Consistent(RETAIL_TAG)",
  "down_stat_flush": "Consistent :(ENABLED)",
  "vip_type": "Consistent (BACKEND)",
  "server_port": "Consistent",
  "vip_server_timeout": "Consistent",
  "vip_client_timeout": "Consistent",
  "persistent_method": "Consistent",
  "persistent_timeout": "Consistent"

},
{
  "owner": "swapneil",
  "fleet_name": "RegionAwareBaseLayer",
  "creation_date": "09-03-2020",
  "environment": "RegionAwareBaseLayer/NA",
  "vip_port": 80,
  "partition": "YES",
  "protocol": "HTTP",
  "monitor": "Consistent (http-ping)",
  "lbset": "Consistent",
  "predictor": "Consistent",
  "spillover": "Consistent",
  "vip_cka": "Consistent :(NO)",
  "max_conns": "Consistent : (56)",
  "vip_cipher": null,
  "vip_cip": "Consistent",
  "vip_tier": "NC : >1 VIP's MISSING TIER-1 TAG",
  "vip_siloed": "Consistent(Non-SILOED)",
  "vip_globalized": "Consistent(GLOBALIZED)",
  "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
  "vip_retail_tag": "Consistent(RETAIL_TAG)",
  "down_stat_flush": "Consistent :(ENABLED)",
  "vip_type": "Consistent (BACKEND)",
  "server_port": "Consistent",
  "vip_server_timeout": "Consistent",
  "vip_client_timeout": "Consistent",
  "persistent_method": "Consistent",
  "persistent_timeout": "Consistent"
},
{
  "owner": "swapneil",
  "fleet_name": "RegionAwareBaseLayer",
  "creation_date": "09-03-2020",
  "environment": "RegionAwareBaseLayer/NA",
  "vip_port": 443,
  "partition": "NO",
  "protocol": "TCP",
  "monitor": "Consistent (ssl-ping)",
  "lbset": "Consistent",
  "predictor": "NC :SHOULD BE ROUNDROBIN",
  "spillover": "Consistent",
  "vip_cka": "NC : SHOULD BE DISABLED (YES)",
  "max_conns": "Consistent : (9000)",
  "vip_cipher": null,
  "vip_cip": "Consistent",
  "vip_tier": "Consistent(Tier1)",
  "vip_siloed": "Consistent(Non-SILOED)",
  "vip_globalized": "Consistent(Non-GLOBALIZED)",
  "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
  "vip_retail_tag": "Consistent(RETAIL_TAG)",
  "down_stat_flush": "Consistent :(ENABLED)",
  "vip_type": "Consistent (BACKEND)",
  "server_port": "Consistent",
  "vip_server_timeout": "Consistent",
  "vip_client_timeout": "Consistent",
  "persistent_method": "Consistent",
  "persistent_timeout": "Consistent"
},
{
  "owner": "swapneil",
  "fleet_name": "RegionMappingService",
  "creation_date": "09-03-2020",
  "environment": "RegionMappingService/EU",
  "vip_port": 80,
  "partition": "YES",
  "protocol": "HTTP",
  "monitor": "Consistent (http-ping)",
  "lbset": "Consistent",
  "predictor": "Consistent",
  "spillover": "Consistent",
  "vip_cka": "Consistent :(NO)",
  "max_conns": "Consistent : (16)",
  "vip_cipher": null,
  "vip_cip": "Consistent",
  "vip_tier": "Consistent(Tier1)",
  "vip_siloed": "Consistent(Non-SILOED)",
  "vip_globalized": "Consistent(Non-GLOBALIZED)",
  "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
  "vip_retail_tag": "Consistent(RETAIL_TAG)",
  "down_stat_flush": "Consistent :(ENABLED)",
  "vip_type": "Consistent (BACKEND)",
  "server_port": "Consistent",
  "vip_server_timeout": "Consistent",
  "vip_client_timeout": "Consistent",
  "persistent_method": "Consistent",
  "persistent_timeout": "Consistent"
},
{
  "owner": "swapneil",
  "fleet_name": "RegionMappingService",
  "creation_date": "09-03-2020",
  "environment": "RegionMappingService/JP",
  "vip_port": 443,
  "partition": "YES",
  "protocol": "TCP",
  "monitor": "NC",
  "lbset": "NC (>1 Vip's in same LB)",
  "predictor": "NC :SHOULD BE ROUNDROBIN",
  "spillover": "Consistent",
  "vip_cka": "Consistent :(NO)",
  "max_conns": "Consistent : (9000)",
  "vip_cipher": null,
  "vip_cip": "Consistent",
  "vip_tier": "Consistent(Non-Tier1)",
  "vip_siloed": "Consistent(Non-SILOED)",
  "vip_globalized": "Consistent(Non-GLOBALIZED)",
  "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
  "vip_retail_tag": "Consistent(RETAIL_TAG)",
  "down_stat_flush": "Consistent :(ENABLED)",
  "vip_type": "Consistent (BACKEND)",
  "server_port": "Consistent",
  "vip_server_timeout": "Consistent",
  "vip_client_timeout": "Consistent",
  "persistent_method": "Consistent",
  "persistent_timeout": "Consistent"
}];

function generateDynamicTable(myContacts) {
  var noOfContacts = myContacts.length;

  if (noOfContacts > 0) {

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");
    table.style.width = '50%';
    table.setAttribute('id','example');
    table.setAttribute('class', 'stripe row-border order-column');
    table.setAttribute('border', '1');
    table.setAttribute('cellspacing', '0');
    table.setAttribute('cellpadding', '5');

    // retrieve column header ('Name', 'Email', and 'Mobile')

    var col = []; // define an empty array
    for (var i = 0; i < noOfContacts; i++) {
      for (var key in myContacts[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

    // CREATE TABLE HEAD .
    var tHead = document.createElement("thead");

    // CREATE ROW FOR TABLE HEAD .
    var hRow = document.createElement("tr");

    // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th");
      th.innerHTML = col[i];
      hRow.appendChild(th);
    }
    tHead.appendChild(hRow);
    table.appendChild(tHead);

    // CREATE TABLE BODY .
    var tBody = document.createElement("tbody");

    // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
    for (var i = 0; i < noOfContacts; i++) {

      var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD

      for (var j = 0; j < col.length; j++) {
        var td = document.createElement("td");
        if (col[j] == 'monitor' && myContacts[i][col[j]] == 'NC') {
          var a = document.createElement('a');
          var linkText = document.createTextNode("Ext. link");
          a.appendChild(linkText);
          a.title = "Check details";
          a.href = "http://example.com";
          td.appendChild( a );
        } else {
          td.innerHTML = myContacts[i][col[j]];
        };
        bRow.appendChild(td);
      }
      tBody.appendChild(bRow)

    }
    table.appendChild(tBody);

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("demo");
    divContainer.appendChild(table);
  }
};
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
  </head>
  <body>
    <div id="demo"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js">             </script>
  </body>
</html>

Отредактированный ответ : Я только что переместил функцию generateDynamicTable внутри существующего прослушивателя событий DOMContentLoaded в окно , generateDynamicTable обрабатывает элемент DOM, поэтому для успешной работы требуется загрузка документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...