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

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.