0

Hola necesito de su valiosa ayuda les planteo la situacio tengo una tabla con 4 campos de los cuales uno es un checkbox (campo seleccionar) Algunos campos checkbox ya estan seleccionados por defecto, y estan desordenados. lo que necesito hacer es ordenar al principio solo los seleccionados y los que estan desmarcados hasta el final Este es el codigo:

input#buscarUA.form-control(type='text', placeholder='Escribe el texto a encontrar', style='width:25%;')
        br

        table#tablausuariosagregar.table.table-bordered.table-hover(data-toggle='table', data-query-params='queryParams', data-pagination='false', data-search='false', data-height='400')
          thead(style="font-size:12px;background-color:rgb(233,236,239);")
            tr
              th Seleccionar 
              th Perfil
              th Nombre
              th Cuenta

          tbody
            each usuario,index in datos.usuarios
              tr(style='background-color:243,243,243;font-size:12px;')
                td
                  input#checkusers(data-perfil=''+usuario.perfil,onclick="get_values_usuarios_seleccionados();",class='check_user',type='checkbox', value='#{usuario.pk}')
                td #{usuario.perfil}
                td #{usuario.nombre}
                td #{usuario.cuenta}
3
  • 2
    Bienvenid@ a Stackoverflow en español @Karime Mira Cómo preguntar <- ACA para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida <- ACA para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – quevedo
    Commented el 29 jun. 2018 a las 4:13
  • Buscas una respuesta en javascript o php? que probaste en esos lenguajes? donde esta ese codigo? cuales son los chekcbox que queres ordenar?
    – gbianchi
    Commented el 29 jun. 2018 a las 4:19
  • eso de php no tiene nada. A mí me parece que es una plantilla HAML
    – ffflabs
    Commented el 29 jun. 2018 a las 11:59

1 respuesta 1

0

Ok. Esta es una solución simple y burda: cada vez que pinchas un checkbox, si lo activaste mueves toda su fila al inicio de la tabla. Si lo desactivaste mueves toda su fila al final de la tabla.

$(document).ready(function() {

  $('.casilla').click(function() {
      var $this=$(this),
          fila=$this.closest('tr'),
          tbody=$this.closest('tbody')
      if($this.is(':checked')) {
         fila.prependTo(tbody);
      } else {
         fila.appendTo(tbody);
      }
  });

});
table td, table th {
border:1px solid;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
  
<table>
	<thead>
	<tr>
    <th>Checkbox</th>
    <th>Nombre</th>
    <th>Raza</th>
    <th>Edad</th>
    <th>Dueño</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Knocky</td>
    <td>Jack Russell</td>
    <td>10</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Flor</td>
    <td>Poodle</td>
    <td>5</td>
    <td>Pedro</td>
  </tr>
    <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Sultán</td>
    <td>Labrador</td>
    <td>3</td>
    <td>Diego</td>
  </tr>
  <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Rocky</td>
    <td>Bulldog</td>
    <td>6</td>
    <td>Alicia</td>
  </tr>
</tbody>
</table>

La manera más elegante sería usando sort y ordenar tanto los checkeados como los no chequeados por una propiedad (por ejemplo alfabéticamente según la columna "nombre", pero eso te lo dejo de tarea

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.