Home / Questions / 114840
Accepted
Juan Pablo B
Asked: 2020-11-05 19:15:48 +0800 CST 2020-11-05 19:15:48 +0800 CST

It doesn't show me the table correctly when creating it with $.each

  • 772

I have the following table generated with Datatables:

enter image description here

Now, inside the Prize column, I want to create a regular table (without datatables), the way I do it is by calling a function called insertTablePositionDraw;

"columns": [                        
    {
        "data": "prize_money",
        "name": "draws.prize_money",
        "mRender": function (data, wea, row, meta) {
             return row.prize_money
                ? '$<strong>' + data + ' </strong>' +
                '<i class="fa fa-bar-chart create-prize-money" aria-hidden="true" data-toggle="modal" data-target="#modalCreatePrizeMoney"></i>' +
                  '<br/>' + (row.positions != "" ? insertTablePositionDraw(row.positions) : '')
                    : '';
              }
    },
 ]

The called function is the following:

function insertTablePositionDraw(data){

   return '<table class="table table-bordered">' +
           '<thead>'+
                '<tr>' +
                     '<th class="text-center">Posición</th>' +
                     '<th class="text-center">Premio</th>' +
                '</tr>' +
           '</thead>'+
           '<tbody>'+
                $.each(data, function(index, item){
                   `<tr>`+
                       `<td>`+
                           data.position;
                        `</td>`+
                        `<td>`+
                           data.pivot.dato;
                        `</td>`+
                   `</tr>`
                })
           '</tbody>'
      '</table>'
}

in this way it does not create the table correctly, it does not show me the data

javascript

1 Answers

  1. Best Answer

    Errors in the post:

    • Missing concatenation operators (which would cause the string to terminate prematurely).
    • There are strings that are not strings (string delimiters in JS are 'and "but not `).
    • Nothing is done with the returned result (you should return it with a returnor write it to some element or something).
    • That way of adding the eachdoesn't work for concatenation (you should create an auxiliary string and fill it before, inside and after the each).
    • The variable datais being misused within the each(you should do data[index]or use itemto access positionor pivot).

    Here you can see the errors in your code with comments:

    function createTable(){
   // NO SE DEVUELVE O HACE NADA
   '<table class="table table-bordered">' +
           '<thead>'+
                '<tr>' +
                     '<th class="text-center">Posición</th>' +
                     '<th class="text-center">Premio</th>' +
                '</tr>' +
           '</thead>'+
           '<tbody>'+
                // EACH NO DEVUELVE NADA QUE SE PUEDA CONCATENAR
                $.each(data, function(index, item){
                   // ESTAS USANDO ` EN LUGAR DE ' O "
                   `<tr>`+
                       `<td>`+
                           data.position; // ; EN LUGAR DE +
                        `</td>`+
                        `<td>`+
                           data.pivot.dato; // ; EN LUGAR DE +
                        `</td>`+
                   `</tr>`
                }) // TE FALTA UN +
           '</tbody>'
      '</table>'
}

// NO SE HACE NADA CON EL RESULTADO DE LA FUNCION

    Correcting that, the result looks like this and it works:

    var data = [{
  position: 1,
  pivot: {
    dato: 2
  }
}]

function createTable() {

  var aux = '<table class="table table-bordered">' +
              '<thead>' +
                '<tr>' +
                  '<th class="text-center">Posición</th>' +
                  '<th class="text-center">Premio</th>' +
                '</tr>' +
              '</thead>' +
              '<tbody>';

  $.each(data, function(index, item) {
    aux += '<tr>' +
             '<td>' +
               data[index].position +
             '</td>' +
             '<td>' +
               data[index].pivot.dato +
             '</td>' +
           '</tr>';
  });

  aux +=   '</tbody>'
         '</table>'
  return aux;
}

document.getElementById("tabla").innerHTML = createTable();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="tabla"></div>

    • 1