Question

hola a todos, espero alguien me pueda ayudar, tengo la siguiente función:

function onloadtableApprovedHRBP(){

    $("#tbodyapprovedhrbp tr").remove();
    $.ajax({
        url: "ajax/hrbp_approved_unit.php",
        success: function (data) {

               var html = "";

         console.log(data);
            $.each(data, function (i, d) {

                $("#tbodyapprovedhrbp").html("");

                html = html + "<tr>";
                html = html + "<td>" + d.NominationDetails_id + "</td>";
                html = html + "<td>" + d.Nomination_Title + "</td>";
                html = html + "<td>" + d.Signum + "</td>";
                html = html + "<td>" + d.EmployeeName + "</td>";
                html = html + "<td>" + d.Country + "</td>";
                html = html + "<td>" + d.Company + "</td>";
                html = html + "<td>" + d.OrganizationalUnit + "</td>";
                html = html + "<td>" + d.Manager_EmployeeName + "</td>";
                if(d.MoneyAmount_Manager_Proposed=="" || d.MoneyAmount_Manager_Proposed==0){
                html = html + '<td>' + d.MoneyPercent_Manager_Proposed + " Monthly Base Salary Percentage" + '</td>';
                         }else{
                html = html + '<td>' + d.MoneyAmount_Manager_Proposed + " Fixed EUR Amount" + '</td>';
                    }
                html = html + '<td>' + d.HRPB_ApprovalDate + '</td>';
                if(d.ApprovedAmount=="" || d.ApprovedAmount==0){
                html = html + '<td>' + d.MoneyPercent + " Monthly Base Salary Percentage" + '</td>';
                    }else{
                html = html + '<td>' + d.ApprovedAmount + " Fixed EUR Amount" + '</td>';
                }

                html = html + '<td>' + '<button class="btn" onclick="hrpb_detailsApproved(' + d.NominationDetails_id + ')">Detail Information</button>';

                html = html + "</tr>";
            })
            //table.draw();
            $("#tbodyapprovedhrbp").append(html);

    var table = $('#example2').DataTable({
      "paging":   true,
      "retrieve": true,
      'rowsGroup': [0,1,11],
      "order": [[ 0, "desc" ]],
      "pagingType": "full_numbers"
    } );

        },
        error: function (xhr, status, statusText) {
            alert("No matching records found ");
            console.log('An error occurred');
        }
    });
}

que alimenta una datatable, cuando hago un cambio con ajax, vuelvo a entrar en dicha funcion pero rowsGroup no lo hace, alguien me puede ayudar?
de antemano muchas gracias por la ayuda, de igual forma si lo soluciono, se los compartiré.

Comments

Ahí me colé, tiene que ser un [ (y después del último {data...} sustituir el } por ]). He editado la respuesta para corregirlo, pero hasta que no lo supervisen no va a salir la edición

---

Mucha gracias parece que ya quedó pero como son varias estoy trabajando con todas, muchas gracias por tomarte el tiempo de responder

Answer 1

A ver, tienes un lío un poco importante de cómo funciona DataTable.

Seguramente el problema venga de que estás cargándote y volviendo a recrear el html de la tabla (algo que DataTable podría hacer por ti), y como luego llamas a la función DataTable con retrieve:true, esto hace que se reutilice la instancia de DataTable si ya estaba creada, pero no tiene en cuenta los cambios que has realizado sobre la tabla.

Lo que debes hacer es crear tu tabla así (supongo que ya lo estás haciendo):

<table id="example2">
  <thead>
      <tr role="row" class="heading">
           <th>Details</th>
           <th>Title</th>
           <th>Signum</th>
           <th>Name</th>
           <th>Country</th>
           <th>Company</th>
           <th>Unit</th>
           <th>Manager</th>
           <th>Money proposed</th>
           <th>ApprovalDate</th>
           <th>Money</th>
           <th>Amount approved</th>
           <th>Actions</th>
      </tr>
  </thead>
  <tbody></tbody>
</table>

Luego, eliminas toda la función que hace la llamada ajax, en el $(document).ready, incluyes la llamada para crear el DataTable, quitando el retrieve, y añadiendo el parámetro ajax, con la url con la que estás haciendo tú la llamada. Esto hace lo mismo que tú estás haciendo, pero controlado por el datatable, y sin necesidad de eliminar y crear de nuevo la tabla (que además de generarte problemas, el rendimiento es peor que si dejas que eso lo controle datatable). También el parámetro ServerSide a false, porque supongo que estás devolviendo todos los datos, y ya datatable lo organiza en páginas, en caso contrario, la paginación la tendrías que hacer en servidor. Y por último la definición de cada columna, qué dato del ajax que devuelves va a cada columna, y si vas a mostrarlo de alguna manera especial, como en el caso de la última columna, que muestras un botón, tienes que añadir una función, como te pongo en el ejemplo.

var table = $('#example2').DataTable({
      "ajax": {url: 'ajax/hrbp_approved_unit.php', dataSrc: ''},
      "serverSide":false
      "paging":   true,
      'rowsGroup': [0,1,11],
      "order": [[ 0, "desc" ]],
      "pagingType": "full_numbers",
      "columns": [
        {"data": "NominationDetails_id"},
        {"data": "Nomination_Title"},
        {"data": "Signum"},
        {"data": "EmployeeName"},
        {"data": "Country"},
        {"data": "Company"},
        {"data": "OrganizationalUnit"},
        {"data": "Manager_EmployeeName"},
        {"data": "MoneyAmount_Manager_Proposed", "render":moneyProposed},
        {"data": "HRPB_ApprovalDate"},
        {"data": "ApprovedAmount", "render": approvedAmount},
        {"data": "NominationDetails_id", "render":detailsButtons}
       ]
    } );

A continuación, te pongo las 3 funciones de render para los campos que son más peculiares, primero la de los botones, que es la más sencilla.
En data tienes el dato actual de la columna, type es porque a esta función datatable la llama con diferentes propósitos. Normalmente nos interesa cuando el valor de type es "display", pero puedes devolver siempre lo mismo independientemente del type. row es todos los datos devueltos por la llamada ajax, y meta contiene metadatos, como por ejemplo en meta.col tienes qué nº de columna se está pintando:

function detailsButtons(data, type, row, meta)
{
if ('display' === type) {
   return '<button class="btn" onclick="hrpb_detailsApproved(' + data + ')">Detail Information</button>';
}

return data;
}

Para el caso más complicado de las columnas donde debes escoger uno u otro dato, supongo que puede haber otras opciones, pero lo puedes hacer con la función render: pones como dato de esa columna una de las dos opciones, y como luego en la función tienes todos los datos (en el parámetro row), eliges el que quieras:

function moneyProposed(data, type, row, meta) {
   if (data == "" || data == 0) {
      return row["MoneyPercent_Manager_Proposed" + " Monthly Base Salary Percentage";
   } else {
      return data + " Fixed EUR Amount";
   }
}

function approvedAmount(data, type, row, meta) {
   if (data == "" || data == 0) {
      return row["MoneyPercent" + " Monthly Base Salary Percentage";
   } else {
      return data + " Fixed EUR Amount";
   }
}

Y cuando quieras recargar la tabla y volver a llamar al ajax:

table.ajax.reload();

OJO: Todo esto te lo escribo de memoria, no lo he probado, si encuentras algún problema, dímelo en los comentarios.

Saludos.