2

Estoy utilzando una datatable pero quiero poder poder definir los select en las columnas que puedan aplicarse. Tengo un codigo pero me buscar por todas.

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-3.3.1.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>



     <table id="example" class="table table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
              <tr class="table-warning">
                  <th width="5%"># Indicador</th>
                  <th width="5%">Cantidad</th>
                  <th width="10%">Componente</th>
                  <th width="5%"></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td> </td>
                <td> 4 </td>
                <td> Falso </td>
                <td> <button class='btn btn-danger btn-sm'>x </button>  </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td> <button class='btn btn-danger btn-sm'>x </button>  </td>
              </tr>
                <tr>
                <td> </td>
                <td> 6 </td>
                <td> TRUE </td>
                <td> <button class='btn btn-danger btn-sm'>x </button>  </td>
              </tr>
          </tbody>
      </table>

Espero haberme explicado bien.

2
  • No entiendo que intentas hacer.
    – alanfcm
    Commented el 15 mar. 2019 a las 14:40
  • en vez que me tenga todos los select, yo pueda definir que columna pueda tener este select option
    – MoteCL
    Commented el 15 mar. 2019 a las 14:43

1 respuesta 1

2

Puedes lograr lo que quieres agregando una clase a las columnas donde quieres el select asi:

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns(".buscar").every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-3.3.1.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>



     <table id="example" class="table table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
              <tr class="table-warning">
                  <th width="5%"># Indicador</th>
                  <th width="5%" class="buscar">Cantidad</th>
                  <th width="10%" class="buscar">Componente</th>
                  <th width="5%"></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td> </td>
                <td> 4 </td>
                <td> Falso </td>
                <td> <button class='btn btn-danger btn-sm'>x </button>  </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td> <button class='btn btn-danger btn-sm'>x </button>  </td>
              </tr>
                <tr>
                <td> </td>
                <td> 6 </td>
                <td> TRUE </td>
                <td> <button class='btn btn-danger btn-sm'>x </button>  </td>
              </tr>
          </tbody>
      </table>

1
  • thanks my budda :)
    – MoteCL
    Commented el 15 mar. 2019 a las 14:53

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.