For cycle for child rows datatables

Question

For cycle for child rows datatables

Navigation

#1 by (1 votes)

1

I have this example taken from Datatables which I require, although this example when pressing a certain button shows a little more information than what is in that row.
But in my case I require that with the id of that row make a shipment by ajax and in the .done make a cycle so that it shows me all the qualifications that a student has.
DATABLES CODE

// Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

 function format ( d ) {
    // 'd' is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

The function format(d) receives the data and returns that data in a view created a small table that in a few words would be the child.rows()
If in that function I take that data and implement an ajax the function will never show me the operations that I have performed in the .done that is necessarily a for cycle, but it will show me everything that return out of the ajax.
I hope to have made myself understood and that if there is the possibility of doing a ajax and make a for for the received data that are the ratings per student would be of great help.

jquery html datatables

asked by JDavid 20.01.2017 в 17:54

source

1 answer

Make a figure with CSS Python tweepy trends and tweets

score 1 · Accepted Answer

Try to put Async = false in the call to ajax .

$(document).ready(function() {
  var table = $('#example').DataTable({
    "data": data,
    "columns": [{
      "className": 'details-control',
      "orderable": false,
      "data": null,
      "defaultContent": ''
    }, {
      "data": "matricula"
    }, {
      "data": "nombre"
    }, {
      "data": "aula"
    }, {
      "data": "grado"
    }],
    "order": [
      [1, 'asc']
    ]
  });

  // Add event listener for opening and closing details
  $('#example tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(format(row.data())).show();
      tr.addClass('shown');
    }
  });

});

/* Formatting function for row details - modify as you need */
function format(d) {
  // 'd' is the original data object for the row
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
    '<td>Calificación:</td>' +
    '<td>' + ObtenerCalificacion(d.matricula) + '</td>' +
    '</tr>' +
    '</table>';
}


//Aqui tendrias que poner tu ajax y calculos
function ObtenerCalificacion(matricula) {
  var calif=matricula;
  /*
  $.ajax({
    type: "GET",
    async: false, //Esta linea tendrias que poner
    data: {
     matricula: matricula
    },
    url: "UrlDedondeseobtiene.loquesa",
    success: function(data) {
      console.log("data", data);
      calif=data.calif;
    },
    error: function(objXMLHttpRequest) {
      console.log("error", objXMLHttpRequest);
    }
  });
  */
  return calif;
}

//Datos de ejemplo
var data = [{
  "matricula": "1",
  "nombre": "Alumno 1",
  "aula": "A",
  "grado": "1",
}, {
  "matricula": "2",
  "nombre": "Alumno 2",
  "aula": "A",
  "grado": "1",
}, {
  "matricula": "3",
  "nombre": "Alumno 3",
  "aula": "A",
  "grado": "1",
}, {
  "matricula": "4",
  "nombre": "Alumno 4",
  "aula": "A",
  "grado": "1",
}, ];

td.details-control {
  background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}
tr.shown td.details-control {
  background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Matricula</th>
      <th>Nombre</th>
      <th>Aula</th>
      <th>Grado</th>
    </tr>
  </thead>

</table>