0

Estoy trabajando con datatables, tengo una tabla la cual la alimento con un archivo tipo JSON echo con php.

$('#consulta').DataTable({
    "ajax" : {
        "url" : "consulta_datatable_filtro.php",
        "type": "POST"
   }
});

El archivo consulta_datatable_filtro.php devuelve la consulta en formato JSON la cual es leída por la librería. hasta aquí todo bien la librería funciona correctamente con los datos que le paso pero yo necesito agregar un select para el que el usuario seleccione otro tipo de filtros que la librería no proporciona por default.

$('#consulta').DataTable({
  
})
.card{
			margin-top:10px;
		}

		tbody tr td{
			font-size: 14px;
		}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

<section class="section-container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="card text-left">
          <div class="card-header">
            Consulta de registros de afluencia
          </div>
          <div class="card-body">
            <form action="" id="form-filtro" class="d-flex align-self-center">
              <select name="filter-month" id="filter-month" class="form-control-sm">
                <option value="" selected>Filtrar por mes</option>
                <option value="01">Enero</option>
                <option value="02">Febrero</option>
                <option value="03">Marzo</option>
                <option value="04">Abril</option>
                <option value="05">Mayo</option>
                <option value="06">Junio</option>
                <option value="07">Julio</option>
                <option value="08">Agosto</option>
                <option value="09">Septiembre</option>
                <option value="10">Octubre</option>
                <option value="12">Noviembre</option>
                <option value="13">Diciembre</option>
              </select>
              <span class="btn btn-primary btn-sm" id="btn-filter">Filtrar</span>
            </form>
            <hr id="separator-filter">
            <table class="table" id="consulta">
              <thead class="thead-dark">
                <tr>
                  <td>Nombre</td>
                  <td>fecha</td>
                  <td>Hora</td>
                  <td>Ciudad</td>
                  <td>Correo Electronico</td>
                  <td>Telefono</td>
                  <td>Vehiculo</td>
                  <td>Color</td>
                  <td>APV</td>
                  <td>Sucursal</td>
                  <td>Editar</td>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <td>Nombre</td>
                  <td>fecha</td>
                  <td>hora</td>
                  <td>Ciudad</td>
                  <td>Correo Electronico</td>
                  <td>Telefono</td>
                  <td>Vehiculo</td>
                  <td>Color</td>
                  <td>APV</td>
                  <td>Sucursal</td>
                  <td>Editar</td>
                </tr>
              </tfoot>
              <tbody id="tbody-datos">

              </tbody>
            </table>
          </div>
          <div class="card-footer text-muted">
            Mercadotecnia - afluencia
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
	

Cuando selecciono una opción del filtro la envio con ajax al archivo php el cual devuelve el JSON por lo que en teoría al volver a hacer una nueva instancia de la clase datatables y referenciar al archivo este debería devolver los datos aplicando el filtro, sin embargo no es así, utilizo lo siguiente para enviar los filtros por post al archivo php.

$('#btn-filter').click(function(){
            var data = $('#filter-month').val()
            $.ajax({
                url: 'consulta_datatable_filtro.php',
                type: 'POST',
                data: data,
                success: function(r){                       
                    destruirTabla();            

                    $('#consulta').DataTable({
                        "ajax" : {
                            "url" : "consulta_datatable_filtro.php",
                            "type": "POST"
                        }
                    });

                }
            });
        });

La función destruir tabla contiene $('#consulta').dataTable().fnDestroy(); lo cual es necesario para ejecutar una nueva instancia de datatable según la documentación, después de ejecutar la función destruir tabla y crear una nueva instancia debería devolver el nuevo JSON con la nueva información, pero el archivo que devuelve el JSON no contiene los filtros originalmente, la información aplicando los filtros solo existe durante la ejecución de la petición ajax por lo que al referenciar el archivo los filtros no existen, quisera saber como puedo solucionar este detalle o como pasarle la respuesta que me devuelve ajax.

5
  • Amigo, entiendo tu problema, pero para este caso te falto colocar lo mas importante que es la función con la que cargas o creas tu tabla, yo he trabajado mucho con datatables así que puedo ayudarte si lo colocas
    – harifo
    el 3 mar. 2020 a las 18:34
  • La función con la que creo la tabla esta al principio del problema amigo, si bien utilizo la función cargarRegistros() esta función solo contiene la instancia de datatables que menciono al principio.
    – luis_am92
    el 3 mar. 2020 a las 18:43
  • Sinceramente pensé que la habias subido incompleta. Ya que en la instancia de dataTable es donde debes declarar todas las variables como el destroy, asignar la data (es una opcion), select, responsive, defaultContent, paginType, etc. Hay algún lugar en tu código donde tengas estas variables?
    – harifo
    el 3 mar. 2020 a las 18:52
  • Como mencionas me he dado cuenta por algunos ejemplos en los cuales he visto que declaran todas estas variables, como tal yo no he declarado estas variables y con honestidad no se bien como declararlas, como tal solo inicio la instancia, esto por que no me había visto con la necesidad de hacerlo, podrías ayudarme o indicarme.
    – luis_am92
    el 3 mar. 2020 a las 19:00
  • 1
    Claro amigo, estoy por salir del trabajo asi que por mientras te dejo el link de la primera pregunta que hice, para que veas mas o menos como es la construcción de un dataTable con objeto json. Ya para mañana te ayudaré mejor con tu respuesta
    – harifo
    el 3 mar. 2020 a las 19:47

2 respuestas 2

0

Con Datatable.js puedes configurar cada columna a como las necesites. Estas columnas tienen funciones de renderizado para que crees todo el html que necesites. Debes de tener algo como:

$('#consulta').DataTable({
    "ajax" : {
        "url" : "consulta_datatable_filtro.php",
        "type": "POST"
      },
   columns:{
       data: 'price', target: ? //número de columna
        render: function ( data, type, row ) {
            return generarCbo(data);
        }
   }
});

En el return de la función de render mostrada el resultado de su respectivo <td>
La data que asignas en column, es el valor que cargara en el parametro de data en la función render.

Para cargar la tabla directamente con ajax, tu post debe de tener en tu respuesta con el nombre de data para que lo reconozca.

0

Amigo, lo primero que debes hacer es crear funciones aparte, es decir, tener todo bien seccionado para que no te pierdas. Cuando envías su ajax, en el success debes colocar algo como lo siguiente:

success: function(data) {
                       cargarTabla(data);
                          }

Para que la función de cargar tabla se ejecute solo con resultados satisfactorios. Lo segundo al ejecutar tu funcion de cargar data debes tenerla como el siguiente código:

function cargarTabla(data){
    var now = new Date();
    var jsDate = now.getDate()+'-'+(now.getMonth()+1)+'-'+now.getFullYear();
    var datatableVariable = $('#dataTable').DataTable({
                destroy : true, //Cada vez que se construya una nueva tabla, destruye la anterior
                "processing" : true, //En caso de que sea mucha data, aparecerá un texto "procesando"
                data : data //acá cargas la data
    });
}

Con esto te encargarás de lo básico, es decir cargar datos y mostrarlos como en el siguiente ejemplo:

$(document).ready(function() {
  $('#example').DataTable();
});

function cargarTabla(data){


}
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="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>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2013/03/03</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>2008/10/16</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>2012/12/18</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>2010/03/17</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>2012/11/27</td>
      <td>$198,500</td>
    </tr>
    <tr>
      <td>Paul Byrd</td>
      <td>Chief Financial Officer (CFO)</td>
      <td>New York</td>
      <td>64</td>
      <td>2010/06/09</td>
      <td>$725,000</td>
    </tr>
    <tr>
      <td>Gloria Little</td>
      <td>Systems Administrator</td>
      <td>New York</td>
      <td>59</td>
      <td>2009/04/10</td>
      <td>$237,500</td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>2012/10/13</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td>Personnel Lead</td>
      <td>Edinburgh</td>
      <td>35</td>
      <td>2012/09/26</td>
      <td>$217,500</td>
    </tr>
    <tr>
      <td>Jenette Caldwell</td>
      <td>Development Lead</td>
      <td>New York</td>
      <td>30</td>
      <td>2011/09/03</td>
      <td>$345,000</td>
    </tr>
    <tr>
      <td>Yuri Berry</td>
      <td>Chief Marketing Officer (CMO)</td>
      <td>New York</td>
      <td>40</td>
      <td>2009/06/25</td>
      <td>$675,000</td>
    </tr>
    <tr>
      <td>Caesar Vance</td>
      <td>Pre-Sales Support</td>
      <td>New York</td>
      <td>21</td>
      <td>2011/12/12</td>
      <td>$106,450</td>
    </tr>
    <tr>
      <td>Doris Wilder</td>
      <td>Sales Assistant</td>
      <td>Sydney</td>
      <td>23</td>
      <td>2010/09/20</td>
      <td>$85,600</td>
    </tr>
    <tr>
      <td>Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>47</td>
      <td>2009/10/09</td>
      <td>$1,200,000</td>
    </tr>
    <tr>
      <td>Gavin Joyce</td>
      <td>Developer</td>
      <td>Edinburgh</td>
      <td>42</td>
      <td>2010/12/22</td>
      <td>$92,575</td>
    </tr>
    <tr>
      <td>Jennifer Chang</td>
      <td>Regional Director</td>
      <td>Singapore</td>
      <td>28</td>
      <td>2010/11/14</td>
      <td>$357,650</td>
    </tr>
    <tr>
      <td>Brenden Wagner</td>
      <td>Software Engineer</td>
      <td>San Francisco</td>
      <td>28</td>
      <td>2011/06/07</td>
      <td>$206,850</td>
    </tr>
    <tr>
      <td>Fiona Green</td>
      <td>Chief Operating Officer (COO)</td>
      <td>San Francisco</td>
      <td>48</td>
      <td>2010/03/11</td>
      <td>$850,000</td>
    </tr>
    <tr>
      <td>Shou Itou</td>
      <td>Regional Marketing</td>
      <td>Tokyo</td>
      <td>20</td>
      <td>2011/08/14</td>
      <td>$163,000</td>
    </tr>
    <tr>
      <td>Michelle House</td>
      <td>Integration Specialist</td>
      <td>Sydney</td>
      <td>37</td>
      <td>2011/06/02</td>
      <td>$95,400</td>
    </tr>
    <tr>
      <td>Suki Burks</td>
      <td>Developer</td>
      <td>London</td>
      <td>53</td>
      <td>2009/10/22</td>
      <td>$114,500</td>
    </tr>
    <tr>
      <td>Prescott Bartlett</td>
      <td>Technical Author</td>
      <td>London</td>
      <td>27</td>
      <td>2011/05/07</td>
      <td>$145,000</td>
    </tr>
    <tr>
      <td>Gavin Cortez</td>
      <td>Team Leader</td>
      <td>San Francisco</td>
      <td>22</td>
      <td>2008/10/26</td>
      <td>$235,500</td>
    </tr>
    <tr>
      <td>Martena Mccray</td>
      <td>Post-Sales support</td>
      <td>Edinburgh</td>
      <td>46</td>
      <td>2011/03/09</td>
      <td>$324,050</td>
    </tr>
    <tr>
      <td>Unity Butler</td>
      <td>Marketing Designer</td>
      <td>San Francisco</td>
      <td>47</td>
      <td>2009/12/09</td>
      <td>$85,675</td>
    </tr>
    <tr>
      <td>Howard Hatfield</td>
      <td>Office Manager</td>
      <td>San Francisco</td>
      <td>51</td>
      <td>2008/12/16</td>
      <td>$164,500</td>
    </tr>
    <tr>
      <td>Hope Fuentes</td>
      <td>Secretary</td>
      <td>San Francisco</td>
      <td>41</td>
      <td>2010/02/12</td>
      <td>$109,850</td>
    </tr>
    <tr>
      <td>Vivian Harrell</td>
      <td>Financial Controller</td>
      <td>San Francisco</td>
      <td>62</td>
      <td>2009/02/14</td>
      <td>$452,500</td>
    </tr>
    <tr>
      <td>Timothy Mooney</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>37</td>
      <td>2008/12/11</td>
      <td>$136,200</td>
    </tr>
    <tr>
      <td>Jackson Bradshaw</td>
      <td>Director</td>
      <td>New York</td>
      <td>65</td>
      <td>2008/09/26</td>
      <td>$645,750</td>
    </tr>
    <tr>
      <td>Olivia Liang</td>
      <td>Support Engineer</td>
      <td>Singapore</td>
      <td>64</td>
      <td>2011/02/03</td>
      <td>$234,500</td>
    </tr>
    <tr>
      <td>Bruno Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>38</td>
      <td>2011/05/03</td>
      <td>$163,500</td>
    </tr>
    <tr>
      <td>Sakura Yamamoto</td>
      <td>Support Engineer</td>
      <td>Tokyo</td>
      <td>37</td>
      <td>2009/08/19</td>
      <td>$139,575</td>
    </tr>
    <tr>
      <td>Thor Walton</td>
      <td>Developer</td>
      <td>New York</td>
      <td>61</td>
      <td>2013/08/11</td>
      <td>$98,540</td>
    </tr>
    <tr>
      <td>Finn Camacho</td>
      <td>Support Engineer</td>
      <td>San Francisco</td>
      <td>47</td>
      <td>2009/07/07</td>
      <td>$87,500</td>
    </tr>
    <tr>
      <td>Serge Baldwin</td>
      <td>Data Coordinator</td>
      <td>Singapore</td>
      <td>64</td>
      <td>2012/04/09</td>
      <td>$138,575</td>
    </tr>
    <tr>
      <td>Zenaida Frank</td>
      <td>Software Engineer</td>
      <td>New York</td>
      <td>63</td>
      <td>2010/01/04</td>
      <td>$125,250</td>
    </tr>
    <tr>
      <td>Zorita Serrano</td>
      <td>Software Engineer</td>
      <td>San Francisco</td>
      <td>56</td>
      <td>2012/06/01</td>
      <td>$115,000</td>
    </tr>
    <tr>
      <td>Jennifer Acosta</td>
      <td>Junior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>43</td>
      <td>2013/02/01</td>
      <td>$75,650</td>
    </tr>
    <tr>
      <td>Cara Stevens</td>
      <td>Sales Assistant</td>
      <td>New York</td>
      <td>46</td>
      <td>2011/12/06</td>
      <td>$145,600</td>
    </tr>
    <tr>
      <td>Hermione Butler</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>47</td>
      <td>2011/03/21</td>
      <td>$356,250</td>
    </tr>
    <tr>
      <td>Lael Greer</td>
      <td>Systems Administrator</td>
      <td>London</td>
      <td>21</td>
      <td>2009/02/27</td>
      <td>$103,500</td>
    </tr>
    <tr>
      <td>Jonas Alexander</td>
      <td>Developer</td>
      <td>San Francisco</td>
      <td>30</td>
      <td>2010/07/14</td>
      <td>$86,500</td>
    </tr>
    <tr>
      <td>Shad Decker</td>
      <td>Regional Director</td>
      <td>Edinburgh</td>
      <td>51</td>
      <td>2008/11/13</td>
      <td>$183,000</td>
    </tr>
    <tr>
      <td>Michael Bruce</td>
      <td>Javascript Developer</td>
      <td>Singapore</td>
      <td>29</td>
      <td>2011/06/27</td>
      <td>$183,000</td>
    </tr>
    <tr>
      <td>Donna Snider</td>
      <td>Customer Support</td>
      <td>New York</td>
      <td>27</td>
      <td>2011/01/25</td>
      <td>$112,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

Por último, te dejo un enlace a una respuesta que di donde aparece documentado el código para cargar la tabla y un montón de funciones mas que puedes implementar. Lo unico que debes tener en cuenta, es que está hecho para asp.net y vb.net

Cualquier duda, me avisas.

EDIT: Te añado otro enlace donde aparece un ejemplo de server side con php.

3
  • 1
    Que tal amigo, no habia podido revisar tu respuesta, te agradezco por el tiempo que te tomaste en ayudarme, voy a tratar de implementar su propuesta y te comento que resultados obtuve.
    – luis_am92
    el 20 mar. 2020 a las 18:08
  • Amigo he seguido el procedimiento que comentas pero al filtar recibo este error, DataTables warning: table id=consulta - Requested unknown parameter '1' for row 0, column 1. puedes ayudarme?
    – luis_am92
    el 20 abr. 2020 a las 15:27
  • Ese error corresponde a que el número de filas declaradas es distinto al numero de filas pintadas, declaralas como en el link de respuesta que te dejé, algo similar a esto columns: [ { data : "0" }, { data : "1" }, { data : "2" }, { data : "3" }, { data : "4" }, { data : "5" }, { data : "6" }, { data : "7" }, { data : "8" }, { data : "9" } ]
    – harifo
    el 20 abr. 2020 a las 20:13

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.