entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

reload datatable

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é.

0voto

magarzon comentado

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

0voto

rach comentado

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

1 Respuesta

3votos

magarzon Puntos30630

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.

0voto

rach comentado

hola primero que nada muchisimas gracias por responder, de igual forma estoy probando la solucion que me propones y me sale el siguiente error

Uncaught SyntaxError: Unexpected token '{'

justo en esta parte del codigo

{"data": "NominationDetails_id"},

sigo revisando de que manera puedo resolver el tema muchas gracias

1voto

rach comentado

Te agradezco muchísimo tu ayuda, me funcionó a la perfección, no sabes como sufrí con el refresh de las datatables, pero muchisimas gracias por tu valiosa ayuda.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta