0

Hola como elimino el sort a un dataTable de jquery, pero a una columna especificamente.

He intentando esto:

Opcion 1

Opcion 2

En la siguiente imagen quiero quitarle el sor unicamente a la columna # Imagen

Aquí les paso el codigo:

<table id="tableBirthdays" class="table display">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Nombre</th>
                <th scope="col">Apellido</th>
                <th scope="col">Cargo</th>
                <th scope="col">Fecha de Nacimiento</th>
                <th scope="col">Inicio del cargo</th>
                <th scope="col">Imagen</th>
            </tr>
        </thead>
        <tfoot style="display: contents;">
            <tr>
                <th>Id</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Cargo</th>
                <th>Fecha de Nacimiento</th>
                <th>Inicio del cargo</th>
                <th>Imagen</th>
            </tr>
        </tfoot>
        <tbody class="contentTable">
<?php
    while ($fila = mysqli_fetch_array($result)){
        $estado="";
        $col_name=$fila['name'];
        $col_surname=$fila['surname'];
        $col_job=$fila['job'];
        $col_id=$fila['id']; 
        $col_start=$fila['start'];
        $col_cumple=$fila['day']."/".$fila['month']."/".$fila['year'];
        $col_image=($fila['image']==NULL) ? "default.png" : $col_id."/".$fila['image'] ;
        $delete .= '<option class="opcionBirthdays" data-src="birthday" value="'.$col_id.'" title="'.$col_name." ".$col_surname.'">';
        $delete .= $col_id.". ";
        $delete .= $col_name." ".$col_surname;
        $delete .= '</option>';
?>
            <tr>
                <td>
                    <label class="d-none"><?php echo $col_id; ?></label>
                    <div class="row">
                        <div class="col">
                            <label><?php echo $col_id; ?></label>
                        </div>
                        <div class="col">
                            <button type="button" value="Guardar" name="detail" class="botonIQ btnGuardar" data-id="<?php echo $col_id; ?>" data-action='controller/uploadBirthday.php?tipo=0&code=<?php echo $col_id; ?>'>Guardar</button>
                        </div>
                    </div>

                </td>
                <td>
                    <input class="form-control" type="text" name="name" value="<?php echo $col_name; ?>" width="150" id="birthdaysName-<?php echo $col_id; ?>" required/>
                    <label class="d-none"><?php echo $col_name; ?></label>
                </td>
                <td>
                    <input class="form-control" type="text" name="surname" value="<?php echo $col_surname; ?>" width="150" id="birthdaysSurname-<?php echo $col_id; ?>" required/>
                    <label class="d-none"><?php echo $col_surname; ?></label>
                </td>
                <td>
                    <input class="form-control" type="text" name="job" value="<?php echo $col_job; ?>" width="150" id="birthdaysJob-<?php echo $col_id; ?>"required/>
                    <label class="d-none"><?php echo $col_job; ?></label>
                </td>
                <td>
                    <input id="birthdaysBirthday-<?php echo $col_id; ?>" class="datepicker form-control" data-elemento="birthdays" width="150" value="<?php echo $col_cumple; ?>" name="birthday" readonly required/>
                    <label class="d-none"><?php echo $col_cumple; ?></label>
                </td>
                <td>
                    <input id="birthdaysStart-<?php echo $col_id; ?>" class="datepicker form-control" data-elemento="birthdays" width="150" value="<?php echo $col_start; ?>" name="start" readonly required/>
                    <label class="d-none"><?php echo $col_start; ?></label>
                </td>
                <td>
                    <form action='controller/uploadBirthday.php?tipo=1&code=<?php echo $col_id; ?>' class='dropzone' data-elemento="birthdays" enctype='multipart/form-data' id='birthdaysImage-<?php echo $col_id; ?>' style="height: 150px; width: 100px; font-size: 10px">
                        <img class='img-l miniImagen' width="40px" height="40px" src='images/<?php echo $col_image; ?>' />
                    </form>
                    <label class="d-none"><?php echo $col_image; ?></label>
                </td>
            </tr>
<?php
        $contador++;
    } 
?>
        </tbody>
    </table>

Y este el js que construye la tabla

$('#tableBirthdays').DataTable({
          "paging":         false,
          language: {
            "decimal":        "",
            "emptyTable":     "No hay datos",
            "info":           "Mostrando de _START_ a _END_ felicitaciones de un total de _TOTAL_ felicitaciones",
            "infoEmpty":      "Mostrando de 0 a 0 felicitaciones de un total de 0 felicitaciones",
            "infoFiltered":   "(Filtro de _MAX_ total felicitaciones)",
            "infoPostFix":    "",
            "thousands":      ",",
            "lengthMenu":     "Mostrar _MENU_ felicitaciones",
            "loadingRecords": "Cargando...",
            "processing":     "Procesando...",
            "search":         "Buscar:",
            "zeroRecords":    "No se encontraron coincidencias",
            "paginate": {
              "first":      "Primero",
              "last":       "Ultimo",
              "next":       "Próximo",
              "previous":   "Anterior"
                        },
            "aria": {
              "sortAscending":  ": Activar orden de columna ascendente",
              "sortDescending": ": Activar orden de columna desendente"
            }
        }
      }).columns().every( function () {
        var that = this;
        $('input', this.footer()).on('keyup change', function() {
          if ( that.search() !== this.value ) {
              that
                  .search( this.value )
                  .draw();
          }
        });
      });

1 respuesta 1

0

Puedes establecer esa opción en DataTables, la columna a la que quieres quitar el sort es la número 0 y quedaría algo así:

$('#tableBirthdays').DataTable({
 "sort": true, 
 "order" : [[1,"desc"]],
 "columnDefs": [ {
        "targets": 0,
        "orderable": false
        } ],
          "paging":         false,
          "language": {
            "decimal":        "",
            "emptyTable":     "No hay datos",
            "info":           "Mostrando de _START_ a _END_ felicitaciones de un total de _TOTAL_ felicitaciones",
            "infoEmpty":      "Mostrando de 0 a 0 felicitaciones de un total de 0 felicitaciones",
            "infoFiltered":   "(Filtro de _MAX_ total felicitaciones)",
            "infoPostFix":    "",
            "thousands":      ",",
            "lengthMenu":     "Mostrar _MENU_ felicitaciones",
            "loadingRecords": "Cargando...",
            "processing":     "Procesando...",
            "search":         "Buscar:",
            "zeroRecords":    "No se encontraron coincidencias",
            "paginate": {
              "first":      "Primero",
              "last":       "Ultimo",
              "next":       "Próximo",
              "previous":   "Anterior"
                        },
            "aria": {
              "sortAscending":  ": Activar orden de columna ascendente",
              "sortDescending": ": Activar orden de columna desendente"
            }
        }
      }).columns().every( function () {
        var that = this;
        $('input', this.footer()).on('keyup change', function() {
          if ( that.search() !== this.value ) {
              that
                  .search( this.value )
                  .draw();
          }
        });
      });

He editado la respuesta ya que el código tenía unas comillas de menos en el parámetro language. He creado un Fidle para que puedas ver que funciona https://jsfiddle.net/ntfkjoz3/1/

7
  • No funciona, y lo pegue tal cual, es decir agregue esas dos lineas que yo no tenía. el 15 feb. 2019 a las 16:30
  • Ya vi el problema.
    – Dismark
    el 15 feb. 2019 a las 21:26
  • cuál es el problema? el 18 feb. 2019 a las 14:26
  • faltas las comillas en el parámetro language, ya edité la respuesta con el error.
    – Dismark
    el 18 feb. 2019 a las 17:33
  • Ahora si pero hay un peque prob es mas que todo de GUI, ya no ordena por ese campo y por los demas si, pero se siguen viendo las flechas de ordenado solo se van cuando ordeno por otro campo, sabes como quitarlo? el 19 feb. 2019 a las 19:46

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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