You do not show me the table correctly when creating it with $ .each

Question

You do not show me the table correctly when creating it with $ .each

Navigation

#1 by (1 votes)

1

I have the following table generated with Datatables:

Now, inside the Prize column, I want to create a common 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 function called 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>'
}

This way I do not create the table correctly, it does not show me the data

javascript jquery

asked by Juan Pablo B 05.11.2017 в 04:15

source

1 answer

Doubt about Polymorphism and fixes in C ++ HTML call a form from another form on the same page

score 1 · Accepted Answer

Errors in the post:

Concatenation operators are missing (which would cause the chain to end prematurely).
There are strings that are not strings (the string delimiters in JS are ' and " but not ' ).
Nothing is done with the result obtained (you should return it with a return or write it in some element or something).
That way to add the each does not serve to concatenate (you should create an auxiliary string and fill it before, in and after the each ).
The variable data is being misused within each (you should do data[index] or use item to access position or 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 is 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>