2

Tengo un select en html que cuando yo elijo una opción automáticamente por medio de un ajax va a php y me response en json y me muestra los datos correspondientes de ese id de la opción que elegí en un datatable.

Como puedo evitar que cuando yo seleccione otra opción del select del html que obviamente ya contiene otro id me siga alimentando la tabla.

Es decir, que siempre que elijo una opción me alimenta la tabla con todos los datos que contiene cada id.

$("#grupo").change(function(){
        $("#estudiantes").find('option').remove();


            $.ajax({
                    url: 'listar_estudiantes',
                    type: 'POST',
                    data: {public_id:this.value}
                })
            .done(function(respuesta) {
                    var resultado = $.parseJSON(respuesta);
                    console.log(resultado);         

                    for (var i = resultado.length - 1; i >= 0; i--) 
                    {
                        var rowNode = tabla_estudiantes
                       .row.add([
                                    resultado[i].id_estudiante,
                                    resultado[i].nombre,
                                    resultado[i].apellido,
                                    resultado[i].nombre,
                                    resultado[i].grupo,
                                    resultado[i].nivel_estudio,
                                    "<center><button class='btn btn-warning' name='ver_estudiante' id='ver_estudiante'><span class='glyphicon glyphicon-eye-open'></span></button>",                    
                                ])
                       .draw()
                       .node();
                    }
                })
            .fail(function() {
                console.log("error");
                });
            });
2
  • No entiendo del todo tu pregunta, lo que quieres logar es que cada vez que cambie el id limpie toda la tabla e inserte la nueva información en la tabla
    – JuankGlezz
    Commented el 2 ene. 2017 a las 23:05
  • Si exactamente eso es lo que necesito
    – JDavid
    Commented el 2 ene. 2017 a las 23:27

3 respuestas 3

1

No hay necesidad de borrar el select para que se realicen cambios y para borrar la tabla haría esto:

  1. Guardar en una variable la tabla generado con el plugin

    var table = $('#example').DataTable({});
    
  2. Teniendo la variable guardada ahora si dentro de la función del select borrar los datos de la tabla con:

    table.clear().draw()
    
  3. Una vez limpia la tabla agregamos los nuevos datos de la misma forma como lo tienes

    for (var i = resultado.length - 1; i >= 0; i--) 
    {
      tabla.row.add([
        resultado[i].id_estudiante,
        resultado[i].nombre,
        resultado[i].apellido,
        resultado[i].nombre,
        resultado[i].grupo,
        resultado[i].nivel_estudio,
        "<center><button class='btn btn-warning' name='ver_estudiante' id='ver_estudiante'><span class='glyphicon glyphicon-eye-open'></span></button>",                    
      ]).draw().node();
    }
    

Ejemplo simple

var table = $('#example').DataTable({});
$('#Cambio').on('change',function(e){
  console.log(this.value)
  table.clear().draw()//limpiamos la tabla
  console.log('Cambio de Informacion')
  table.row.add([
        "Opcion Uno",
        "System Architect",
        "$3,120",
        "2011/04/25",
        "Edinburgh",
        "5421"
    ]).draw();
});
<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"/>
<select id="Cambio">
  <option>uno</option>
  <option>dos</option>
</select>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
  </tbody>
</table>

2
  • Hola @JuankGlezz al ejecutar tu codigo corre..y si selecciono el 'dos' me aparece un solo resultado pero si selecciono 'uno' ya no me aparecen los 9 resultados que falla tienes ahi? var table = $('#example').DataTable({}); $('#Cambio').on('change',function(){ table.clear().draw()//aqui deberia de haber algun signo? table.row.add([ gracias
    – JDavid
    Commented el 3 ene. 2017 a las 13:08
  • @Daniel No vuelve a cargar los 9 datos, porque venían precargados pero como haces una peticion ajax siempre te cargara los datos del ajax es por eso que no vuelvo a cargar los 9 datos porque se cambia el id, agrego un console.log("cambio la informacion") para que veas que se cambia la informacion
    – JuankGlezz
    Commented el 3 ene. 2017 a las 15:28
1

Si lo que quieres es limpiar la tabla al seleccionar otro id...

Cambia esta linea:

 $("#estudiantes").find('option').remove();

Por la siguiente:

 $("#estudiantes").html('');//Con esto limpias todos lo que contenga ese objeto, suponiendo que #estudiantes es tu <table>

Revisa el código de ejemplo:

$(document).ready(function() {
  $("#grupo").change(function(){
    var valor = $(this).val();
    console.log(valor);
    AgregarValores(valor)
    
  });
});


function AgregarValores(valor) {
   $("#estudiantes").html(''); // Esta linea hace lo que necesitas
  for (var i = 0; i < 4; i++) {
    var renglon = '<tr>';
    renglon = renglon + '<td> Renglon ' + (i+1) + '</td>';
    renglon = renglon + '<td> Estudiante ' + valor + '</td>';
    renglon = renglon + '</tr>';
    $("#estudiantes").append(renglon);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="grupo">
  <option value=1>Uno</option>
  <option value=2>Dos</option>
</select>
<table id="estudiantes">

</table>

En respuesta a tu comentario:

Te anexo el mismo ejemplo con jquery DataTables

$(document).ready(function() {
  //Inicializo el grid con TODOS los datos
  FiltrarDatos('');
  AgregarValores()
    
  $("#grupo").change(function() {
    var valor = $(this).val();
    //console.log(valor);

    FiltrarDatos(valor);
    AgregarValores()

  });
});


function AgregarValores() {
  //$('#estudiantes').DataTable().clear().draw();//Con esto se limpia el data table

  $('#estudiantes').DataTable({
    destroy: true,
    data: datosFiltrados,
    columns: [{
      data: 'id'
    }, {
      data: 'nombre'
    }, {
      data: 'puesto'
    }, {
      data: 'ciudad'
    }]
  });
}

var datosFiltrados = [];

function FiltrarDatos(filtro) {
  datosFiltrados = [];
  $.each(data.data, function(i, v) {
    if (v[2] == filtro || filtro == '') {
      var df = {
        id: i+1,
        nombre: v[0],
        puesto: v[1],
        ciudad: v[2]
      };
      datosFiltrados.push(df);
    }
  });

  console.log(filtro + ":" + datosFiltrados.length)
  return datosFiltrados;
}

var data = {
  "data": [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],
    [
      "Garrett Winters",
      "Accountant",
      "Tokyo",
      "8422",
      "2011/07/25",
      "$170,750"
    ],
    [
      "Ashton Cox",
      "Junior Technical Author",
      "San Francisco",
      "1562",
      "2009/01/12",
      "$86,000"
    ],
    [
      "Cedric Kelly",
      "Senior Javascript Developer",
      "Edinburgh",
      "6224",
      "2012/03/29",
      "$433,060"
    ],
    [
      "Airi Satou",
      "Accountant",
      "Tokyo",
      "5407",
      "2008/11/28",
      "$162,700"
    ],
    [
      "Brielle Williamson",
      "Integration Specialist",
      "New York",
      "4804",
      "2012/12/02",
      "$372,000"
    ],
    [
      "Herrod Chandler",
      "Sales Assistant",
      "San Francisco",
      "9608",
      "2012/08/06",
      "$137,500"
    ],
    [
      "Rhona Davidson",
      "Integration Specialist",
      "Tokyo",
      "6200",
      "2010/10/14",
      "$327,900"
    ],
    [
      "Colleen Hurst",
      "Javascript Developer",
      "San Francisco",
      "2360",
      "2009/09/15",
      "$205,500"
    ],
    [
      "Sonya Frost",
      "Software Engineer",
      "Edinburgh",
      "1667",
      "2008/12/13",
      "$103,600"
    ],
    [
      "Jena Gaines",
      "Office Manager",
      "London",
      "3814",
      "2008/12/19",
      "$90,560"
    ],
    [
      "Quinn Flynn",
      "Support Lead",
      "Edinburgh",
      "9497",
      "2013/03/03",
      "$342,000"
    ],
    [
      "Charde Marshall",
      "Regional Director",
      "San Francisco",
      "6741",
      "2008/10/16",
      "$470,600"
    ],
    [
      "Haley Kennedy",
      "Senior Marketing Designer",
      "London",
      "3597",
      "2012/12/18",
      "$313,500"
    ],
    [
      "Tatyana Fitzpatrick",
      "Regional Director",
      "London",
      "1965",
      "2010/03/17",
      "$385,750"
    ],
    [
      "Michael Silva",
      "Marketing Designer",
      "London",
      "1581",
      "2012/11/27",
      "$198,500"
    ],
    [
      "Paul Byrd",
      "Chief Financial Officer (CFO)",
      "New York",
      "3059",
      "2010/06/09",
      "$725,000"
    ],
    [
      "Gloria Little",
      "Systems Administrator",
      "New York",
      "1721",
      "2009/04/10",
      "$237,500"
    ],
    [
      "Bradley Greer",
      "Software Engineer",
      "London",
      "2558",
      "2012/10/13",
      "$132,000"
    ],
    [
      "Dai Rios",
      "Personnel Lead",
      "Edinburgh",
      "2290",
      "2012/09/26",
      "$217,500"
    ],
    [
      "Jenette Caldwell",
      "Development Lead",
      "New York",
      "1937",
      "2011/09/03",
      "$345,000"
    ],
    [
      "Yuri Berry",
      "Chief Marketing Officer (CMO)",
      "New York",
      "6154",
      "2009/06/25",
      "$675,000"
    ],
    [
      "Caesar Vance",
      "Pre-Sales Support",
      "New York",
      "8330",
      "2011/12/12",
      "$106,450"
    ],
    [
      "Doris Wilder",
      "Sales Assistant",
      "Sidney",
      "3023",
      "2010/09/20",
      "$85,600"
    ],
    [
      "Angelica Ramos",
      "Chief Executive Officer (CEO)",
      "London",
      "5797",
      "2009/10/09",
      "$1,200,000"
    ],
    [
      "Gavin Joyce",
      "Developer",
      "Edinburgh",
      "8822",
      "2010/12/22",
      "$92,575"
    ],
    [
      "Jennifer Chang",
      "Regional Director",
      "Singapore",
      "9239",
      "2010/11/14",
      "$357,650"
    ],
    [
      "Brenden Wagner",
      "Software Engineer",
      "San Francisco",
      "1314",
      "2011/06/07",
      "$206,850"
    ],
    [
      "Fiona Green",
      "Chief Operating Officer (COO)",
      "San Francisco",
      "2947",
      "2010/03/11",
      "$850,000"
    ],
    [
      "Shou Itou",
      "Regional Marketing",
      "Tokyo",
      "8899",
      "2011/08/14",
      "$163,000"
    ],
    [
      "Michelle House",
      "Integration Specialist",
      "Sidney",
      "2769",
      "2011/06/02",
      "$95,400"
    ],
    [
      "Suki Burks",
      "Developer",
      "London",
      "6832",
      "2009/10/22",
      "$114,500"
    ],
    [
      "Prescott Bartlett",
      "Technical Author",
      "London",
      "3606",
      "2011/05/07",
      "$145,000"
    ],
    [
      "Gavin Cortez",
      "Team Leader",
      "San Francisco",
      "2860",
      "2008/10/26",
      "$235,500"
    ],
    [
      "Martena Mccray",
      "Post-Sales support",
      "Edinburgh",
      "8240",
      "2011/03/09",
      "$324,050"
    ],
    [
      "Unity Butler",
      "Marketing Designer",
      "San Francisco",
      "5384",
      "2009/12/09",
      "$85,675"
    ],
    [
      "Howard Hatfield",
      "Office Manager",
      "San Francisco",
      "7031",
      "2008/12/16",
      "$164,500"
    ],
    [
      "Hope Fuentes",
      "Secretary",
      "San Francisco",
      "6318",
      "2010/02/12",
      "$109,850"
    ],
    [
      "Vivian Harrell",
      "Financial Controller",
      "San Francisco",
      "9422",
      "2009/02/14",
      "$452,500"
    ],
    [
      "Timothy Mooney",
      "Office Manager",
      "London",
      "7580",
      "2008/12/11",
      "$136,200"
    ],
    [
      "Jackson Bradshaw",
      "Director",
      "New York",
      "1042",
      "2008/09/26",
      "$645,750"
    ],
    [
      "Olivia Liang",
      "Support Engineer",
      "Singapore",
      "2120",
      "2011/02/03",
      "$234,500"
    ],
    [
      "Bruno Nash",
      "Software Engineer",
      "London",
      "6222",
      "2011/05/03",
      "$163,500"
    ],
    [
      "Sakura Yamamoto",
      "Support Engineer",
      "Tokyo",
      "9383",
      "2009/08/19",
      "$139,575"
    ],
    [
      "Thor Walton",
      "Developer",
      "New York",
      "8327",
      "2013/08/11",
      "$98,540"
    ],
    [
      "Finn Camacho",
      "Support Engineer",
      "San Francisco",
      "2927",
      "2009/07/07",
      "$87,500"
    ],
    [
      "Serge Baldwin",
      "Data Coordinator",
      "Singapore",
      "8352",
      "2012/04/09",
      "$138,575"
    ],
    [
      "Zenaida Frank",
      "Software Engineer",
      "New York",
      "7439",
      "2010/01/04",
      "$125,250"
    ],
    [
      "Zorita Serrano",
      "Software Engineer",
      "San Francisco",
      "4389",
      "2012/06/01",
      "$115,000"
    ],
    [
      "Jennifer Acosta",
      "Junior Javascript Developer",
      "Edinburgh",
      "3431",
      "2013/02/01",
      "$75,650"
    ],
    [
      "Cara Stevens",
      "Sales Assistant",
      "New York",
      "3990",
      "2011/12/06",
      "$145,600"
    ],
    [
      "Hermione Butler",
      "Regional Director",
      "London",
      "1016",
      "2011/03/21",
      "$356,250"
    ],
    [
      "Lael Greer",
      "Systems Administrator",
      "London",
      "6733",
      "2009/02/27",
      "$103,500"
    ],
    [
      "Jonas Alexander",
      "Developer",
      "San Francisco",
      "8196",
      "2010/07/14",
      "$86,500"
    ],
    [
      "Shad Decker",
      "Regional Director",
      "Edinburgh",
      "6373",
      "2008/11/13",
      "$183,000"
    ],
    [
      "Michael Bruce",
      "Javascript Developer",
      "Singapore",
      "5384",
      "2011/06/27",
      "$183,000"
    ],
    [
      "Donna Snider",
      "Customer Support",
      "New York",
      "4226",
      "2011/01/25",
      "$112,000"
    ]
  ]
}
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
</script>


<select id="grupo">
  <option value=''></option>
  <option value='New York'>New York</option>
  <option value='Tokyo'>Tokyo</option>
  <option value='London'>London</option>
</select>
<table id="estudiantes">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nombre</th>
      <th>Puesto</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

2
  • Hola @Cristina Carrasco Angulo al correr tu codigo hace lo que practicamente necesito pero tengo un problema y es que con el append es una de tantas opciones que me servirian pero como estoy usando el datatable no me funcionaria ese pedazo de codigo hay alguna otra opcion de implementarlo con el datatable? ya que si solo implemento el << $("#estudiantes").html(''); >> lo que hace es limpiarme la tabla como tal..asi que cuando yo seleccione no me aparece ningun resultado.
    – JDavid
    Commented el 3 ene. 2017 a las 13:15
  • @Daniel te anexe la respuesta a tu comentario, para inicializar el dataTable solo necesitas agregar destroy: true cuando vuelvas asignarle valores a data Commented el 3 ene. 2017 a las 18:29
0

Para limpiar la tabla basta con remover cada fila por medio de removeChild. Solo debes llamar la función antes de agregar los nuevos registros.

function clearTable (id) {
  var tbody = document.getElementById(id);
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }
}

También puede hacerse con innerHTML pero tiene como penalización muy bajo rendimiento en comparación con ésta manera; aunque por lo general no tiene mayor impacto en aplicaciones regulares.

Luego, antes de agregar los registros nuevos a la tabla, llamas a ésta función pasándole el id de la tabla a limpiar, en tu caso, la tabla de estudiantes.

$.ajax({
  url: 'listar_estudiantes',
  type: 'POST',
  data: { public_id: this.value }
})
.done(function (estudiantes) {
  clearTable('tabla-estudiantes'); // llamamos a la función
  $.each(estudiantes, (estudiante) => {
    // agregas los estudiantes a la tabla
  });
});
8
  • Hola @guzgarcia tengo una duda...esta funcion deberia de llamarla en otra funcion o con solo ponerla y cambiar el document.getElementById('#estudiantes'); me corre?
    – JDavid
    Commented el 3 ene. 2017 a las 13:10
  • Solo cambia pon el id de tu tabla para seleccionarla, o si lo quieres hacer multiuso, agregale un parámetro a la función que se llame id, de tal modo que le pases el id de la tabla cuando llamas la función; así te sirve para todas las tablas.
    – gugadev
    Commented el 3 ene. 2017 a las 13:13
  • ok gracias por tu respuesta...pero tengo una pequeña duda...yo para llegar a esa tabla estudiantes estoy pasando por dos selects...es decir; el primer select son los colegios,cuando yo selecciono el colegio "xyz" automaticamente me arroja los grupos de ese colegio ("xyz") entonces al seleccionar el grupo ("grupo b") ahi si me arroja la tabla estudiantes....entonces esa es mi pregunta...que id de todos esos select's deberia de poner en tu codigo?..espero haberme hecho entender mejor
    – JDavid
    Commented el 3 ene. 2017 a las 13:17
  • ¿Podrías explicarte mejor?
    – gugadev
    Commented el 3 ene. 2017 a las 13:24
  • que parte no te ha quedado clara como para basarme en eso y no tener que escribirte todo nuevamente :D
    – JDavid
    Commented el 3 ene. 2017 a las 13:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.