Question

0

386

Visualizações

How to set given var string as a column names and data using DataTable in Javascript

Using a javascript function

function initializeUserTable(tableHeaders , tableData ) {
     // I want to set table headers and table data
}

var tableHeaders = "ID,USERNAME,STATUS,LOGIN";

var tableData = "1,ABC,ACTIVE,N,2,DEF,INACTIVE,Y,3,XYZ,ACTIVE,Y";

want to set the tableHeaders as a header and data as a tableData, so the table looks like

about 4 years ago · Juan Pablo Isaza

2 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-04T09:37:46.838Z

you can use :

yourstring.split(",") to transform your data as array
table.insertRow to insert new row in a table tag
row.insertCell to insert new cell in table tag

var tableHeaders = "ID,USERNAME,STATUS,LOGIN";
var tableData = "1,ABC,ACTIVE,N,2,DEF,INACTIVE,Y,3,XYZ,ACTIVE,Y";

function insertRow(table) {
  if (!table.dataset.number) {
    table.dataset.number = 0;
  }
  var rowNumber = parseInt(table.dataset.number);
  table.dataset.number = rowNumber + 1;
  return table.insertRow(rowNumber);
}

function insertCell(row) {
  if (!row.dataset.number) {
    row.dataset.number = 0;
  }
  var cellNumber = parseInt(row.dataset.number);
  row.dataset.number = cellNumber + 1;
  return row.insertCell(cellNumber);
}

function initializeUserTable(tableHeaders, tableData) {
     var headers = tableHeaders.split(",");
     var datas = tableData.split(",");
     var table = document.getElementById('my-table');
     var row = insertRow(table);
     let cell;
     
     headers.forEach(header => {
      cell = insertCell(row);
      cell.outerHTML = `<th>${header}</th>`;
     });
     
     row = insertRow(table);

     datas.forEach(data => {
      cell = insertCell(row);
      cell.innerHTML = data;
      if (parseInt(row.dataset.number) === headers.length) {
        row = insertRow(table);
      }
     });
}

initializeUserTable(tableHeaders, tableData);

table,th, td {
    border:1px solid #ddd;
    padding:5px;
    text-align: center;
}

table {
  border-collapse: collapse;
}

th {
   background: #efefef;
}

<table id="my-table"><table>

Answer 2 · 2022-07-04T09:37:46.845Z

I hope this is help you

    var table = document.getElementsByTagName("table")[0];
            var ths = ["ID","USERNAME","STATUS","LOGIN"];
            var tds = [["1","ABC","ACTIVE","N"],["2","DEF","INACTIVE","Y"],["3","XYZ","ACTIVE","Y"]];
            let tr = document.createElement("tr");
            function initializeUserTable(tableHeaders , tableData ){
    
                 for(let i=0;i<ths.length;i++){
                    for(let j=0;j<tableHeaders.length;j++){
                        if(i==0){
                            let th = document.createElement("th");
                             th.innerHTML=tableHeaders[j];
                            if(j==0){
                                tr.appendChild(th);
                            }
                            tr.appendChild(th);
                        }
                        else{
                            let td = document.createElement("td");
                             td.innerHTML=tableData[i-1][j];
                            tr.appendChild(td);
                        }
                    }
                  table.insertAdjacentElement("beforeend",tr);
                  tr = document.createElement("tr");
                }
            }
            initializeUserTable(ths,tds);

            table{
                border-collapse: collapse;
            }
             table,th, td {
                border:2px solid black;
                width:50%;
                height:20px;
                text-align: center;
                }
                th{
                    background: lightgray;
                }

<!DOCTYPE html>
<html>
    <head>
        <title>tableData</title>
    </head>
    <body>
        <table>
            
        </table>

    </body>
</html>

0

386

How to set given var string as a column names and data using DataTable in Javascript

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT